We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

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

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>          

 

 

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.

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

 

 

 

 

 

 

 
Article ID: Published Date: Last Revised Date: Platform: Control:
6941 06/28/2016 03/06/2018 UWP SfChart
Did you find this information helpful?
Add Comment
You must log in to leave a comment

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.