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.
