)
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: June 24, 2019).
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?

Platform: WPF |
Control: SfChart |
Published Date: June 28, 2016 |
Last Revised Date: March 6, 2018

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

 

 

 

 

 

 

 

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

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

Live Chat Icon For mobile
Live Chat Icon