Category / Section
How to customize the label formats of date time axis during interval transitions in WPF Chart (SfChart)?
2 mins read
Description:
This article describes how to display the date-time axis label with custom format during the date-time transitions such as Minutes to Day, Days to Month, Months to Year, etc.
Solution:
You can be achieved this by subscribing the LabelCreated event in date-time axis and accessing the AxisLabel argument, which is a type of DateTimeAxisLabel in WPF Chart (SfChart).
The following properties of DateTimeAxisLabel are used to apply the format for the labels:
- IsTransition: Bool property, enables us to identify the transitions in date-time axis intervals.
- IntervalType: Enum property, enables us to get the actual interval type of date-time axis at any instance.Note:
These APIs are available from version 14.2 release.
The following code snippet illustrates customization of label format based on interval transition:
XAML
<syncfusion:SfChart.PrimaryAxis> <syncfusion:DateTimeAxis LabelsIntersectAction="None" LabelCreated="DateTimeAxis_LabelCreated" Name="primaryAxis" /> </syncfusion:SfChart.PrimaryAxis>
C#
private void DateTimeAxis_LabelCreated(object sender, LabelCreatedEventArgs e) { // Casting the Axislabel as DateTimeAxisLabel. DateTimeAxisLabel dateTimeLabel = e.AxisLabel as DateTimeAxisLabel; bool isTransition = dateTimeLabel.IsTransition; // Indicates interval transition. switch (dateTimeLabel.IntervalType) { case DateTimeIntervalType.Years: { e.AxisLabel.LabelContent = dateTimeLabel.Position.FromOADate().ToString("yyyy"); } break; case DateTimeIntervalType.Months: { if (isTransition) e.AxisLabel.LabelContent = dateTimeLabel.Position.FromOADate().ToString("MMM-yyyy"); else e.AxisLabel.LabelContent = dateTimeLabel.Position.FromOADate().ToString("MMM"); } break; case DateTimeIntervalType.Days: { if (isTransition) e.AxisLabel.LabelContent = dateTimeLabel.Position.FromOADate().ToString("MMM-dd"); else e.AxisLabel.LabelContent = dateTimeLabel.Position.FromOADate().ToString("dd"); } break; case DateTimeIntervalType.Hours: { if (isTransition) e.AxisLabel.LabelContent = dateTimeLabel.Position.FromOADate().ToString("dd.HH:mm"); else e.AxisLabel.LabelContent = dateTimeLabel.Position.FromOADate().ToString("HH"); } break; case DateTimeIntervalType.Minutes: { if (isTransition) e.AxisLabel.LabelContent = dateTimeLabel.Position.FromOADate().ToString("HH:mm"); else e.AxisLabel.LabelContent = dateTimeLabel.Position.FromOADate().ToString("mm"); } break; case DateTimeIntervalType.Seconds: { if (isTransition) e.AxisLabel.LabelContent = dateTimeLabel.Position.FromOADate().ToString("mm:ss"); else e.AxisLabel.LabelContent = dateTimeLabel.Position.FromOADate().ToString("ss"); } break; case DateTimeIntervalType.Milliseconds: { if (isTransition) e.AxisLabel.LabelContent = dateTimeLabel.Position.FromOADate().ToString("ss:fff"); else e.AxisLabel.LabelContent = dateTimeLabel.Position.FromOADate().ToString("fff"); } break; } }
The following screenshots illustrate the label format customization based on interval type for date-time axis.