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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Warning Icon 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.Close Icon