How to customize label formats of date-time axis during the interval transitions?

Platform: UWP |

Control: SfChart |

Published Date: June 28, 2016 |

Last Revised Date: March 6, 2018

Tags: sfchart, axis, datetimeaxis, sfchart3d

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:

This can be achieved by subscribing the LabelCreated event in date-time axis and accessing the AxisLabel argument, which is a type of DateTimeAxisLabel.

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>

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.

$D:\Issue Files Chart\Knowledge_Base_4\Image_1.png$

$D:\Issue Files Chart\Knowledge_Base_4\Image_2.png$

$D:\Issue Files Chart\Knowledge_Base_4\Image_3.png$

2X faster development

The ultimate UWP UI toolkit to boost your development speed.

Free Trial

Did you find this information helpful?

CONTACT US

How to customize label formats of date-time axis during the interval transitions?

Please sign in to access our KB

CONTACT US