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:
- Set the
Type
property of theChartCategoryAxis
toChartCategoryAxisType.Date
. - 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 },
};
}