Articles in this section
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.

Customizing Label Format based on Interval in WPF Chart

Customizing Label Format based on Interval in WPF Chart

Customizing Label Format based on Interval in WPF Chart

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied