Date Axis

Categorical charts (such as Column, Line, Area) support displaying dates on the x-axis. A date axis aggregates the data points that fall within its scope to a single data point that gets rendered.

To enable a date axis:

1. Set the Type property of the ChartCategoryAxis to ChartCategoryAxisType.Date.
2. Provite categories of type DateTime to it (see data binding a chart).

You can control the aggregation level through the BaseUnit property of the axis. It takes a member of the Telerik.Blazor.ChartCategoryAxisBaseUnit class.

You can set the aggregation function through the Aggregate property of the series. It takes a member of the Telerik.Blazor.ChartSeriesAggregate class.

Date Axis with month grouping and different aggregates on the series

Grouping by month, aggregates

<TelerikChart>

    <ChartCategoryAxes>
        <ChartCategoryAxis BaseUnit="ChartCategoryAxisBaseUnit.Months" Type="ChartCategoryAxisType.Date"></ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Column" Name="Product 1 (SUM)" Data="@chartData"
                            Field="@nameof(MyDataModel.Product1)" CategoryField="@nameof(MyDataModel.MySharedCategories)" Aggregate="ChartSeriesAggregate.Sum">
            <ChartSeriesLabels Visible="true"></ChartSeriesLabels>
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Column" Name="Product 2 (COUNT)" Data="@chartData"
                            Field="@nameof(MyDataModel.Product2)" Aggregate="ChartSeriesAggregate.Count">
            <ChartSeriesLabels Visible="true"></ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>

</TelerikChart>

@code {
    public class MyDataModel
    {
        public DateTime MySharedCategories { get; set; }
        public int Product1 { get; set; }
        public int Product2 { get; set; }
    }

    public List<MyDataModel> chartData = new List<MyDataModel>()
    {
        new MyDataModel() { MySharedCategories = new DateTime(2019, 11, 11), Product1 = 1, Product2 = 2 },
        new MyDataModel() { MySharedCategories = new DateTime(2019, 12, 15), Product1 = 2, Product2 = 3 },
        new MyDataModel() { MySharedCategories = new DateTime(2019, 12, 19), Product1 = 3, Product2 = 4 },
        new MyDataModel() { MySharedCategories = new DateTime(2019, 12, 28), Product1 = 4, Product2 = 5 },
    };
}

The result from the code snippet above

Advanced Features

Automatic Fitting

If you set BaseUnit="ChartCategoryAxisBaseUnit.Fit", the chart will choose such a base unit, so that the number of categories on the axis will be less than or equal to the value of the MaxDateGroups property (if it is set).

Using this feature will ignore the BaseUnitStep.

If you do not set the BaseUnit, its value is determined by the smallest interval between categories. In the example above, it is four days, which is less than a week, but more than a day, so the base unit will be Days.

Avoid large intervals with short base units. This would result in a huge amount of categories and this can result in performance degradation, or even errors/crashes.

Base Unit Step

If there are many categories, you can choose to render every n-th of them by setting the BaseUnitStep property.

Week Start Day

When the BaseUnit is set to weeks, you can control the start day of the week through the WeekStartDay property. The 0 value is Sunday, 1 is Monday and so on.

Labels Format

Each base unit has a default format for the date it displays. If you want to change it, use the Format property under the ChartCategoryAxisLabels tag of the category axis.

Steps set to weeks, changed weeks start day to Monday and non-default label format

Steps, custom label format, non-default start of week

<TelerikChart>

    <ChartCategoryAxes>
        <ChartCategoryAxis BaseUnit="ChartCategoryAxisBaseUnit.Weeks" WeekStartDay="1" Type="ChartCategoryAxisType.Date">
            <ChartCategoryAxisLabels Format="{0:dd MMM}" />
        </ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Column" Name="Product 1 (SUM)" Data="@chartData"
                            Field="@nameof(MyDataModel.Product1)" CategoryField="@nameof(MyDataModel.MySharedCategories)" 
                            Aggregate="ChartSeriesAggregate.Sum">
            <ChartSeriesLabels Visible="true"></ChartSeriesLabels>
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Column" Name="Product 2 (COUNT)" Data="@chartData"
                            Field="@nameof(MyDataModel.Product2)" Aggregate="ChartSeriesAggregate.Count">
            <ChartSeriesLabels Visible="true"></ChartSeriesLabels>
        </ChartSeries>
    </ChartSeriesItems>

</TelerikChart>

@code {
    public class MyDataModel
    {
        public DateTime MySharedCategories { get; set; }
        public int Product1 { get; set; }
        public int Product2 { get; set; }
    }

    public List<MyDataModel> chartData = new List<MyDataModel>()
    {
        new MyDataModel() { MySharedCategories = new DateTime(2019, 11, 11), Product1 = 1, Product2 = 2 },
        new MyDataModel() { MySharedCategories = new DateTime(2019, 12, 15), Product1 = 2, Product2 = 3 },
        new MyDataModel() { MySharedCategories = new DateTime(2019, 12, 19), Product1 = 3, Product2 = 4 },
        new MyDataModel() { MySharedCategories = new DateTime(2019, 12, 28), Product1 = 4, Product2 = 5 },
    };
}

See Also

• Data Binding a Chart
• Live Demos: Chart