How to format TimeSpanAxis label based on axis interval in WPF (SfChart)?

2 mins read

WPF Chart support the formatting of axis labels using the TimeSpanAxis based on specific intervals. The LabelFormat property is utilized to apply predefined formatting styles according to the requirement. This article explains how to format the TimeSpanAxis label based on axis interval in WPF (SfChart).

[Xaml]

<chart:SfChart>
            <chart:SfChart.DataContext>
                <local:ViewModel/>
            </chart:SfChart.DataContext>
            <chart:SfChart.PrimaryAxis>
 
                <chart:TimeSpanAxis Minimum="00:00:00" 
                                    EdgeLabelsDrawingMode="Shift" 
                                    Maximum="00:00:10" 
                                    LabelFormat="mm\:ss\:fff" >
                    <chart:TimeSpanAxis.Header>
                        <Label FontWeight="Bold"  
                               Content="Time in (mm:ss:fff)"/>
                    </chart:TimeSpanAxis.Header>
                </chart:TimeSpanAxis>
            </chart:SfChart.PrimaryAxis>
 
            <chart:SfChart.SecondaryAxis  >
                <chart:NumericalAxis Minimum="50" Maximum="700" >
                    <chart:NumericalAxis.Header>
                        <Label Content="Distance in (meters)" 
                               FontWeight="Bold" />
                    </chart:NumericalAxis.Header>
                </chart:NumericalAxis>
            </chart:SfChart.SecondaryAxis>
            
            <chart:SfChart.Series>
                <chart:SplineSeries XBindingPath="Time" 
                                    Interior="Purple" 
                                    YBindingPath="Distance" 
                                    ItemsSource="{Binding Data}" >
                    <chart:SplineSeries.AdornmentsInfo>
                        <chart:ChartAdornmentInfo ShowLabel="True" />
                    </chart:SplineSeries.AdornmentsInfo>
                </chart:SplineSeries>
            </chart:SfChart.Series>
        </chart:SfChart>

[C#]

  SfChart chart = new SfChart();
            this.DataContext = new ViewModel();
 
            TimeSpanAxis primaryAxis = new TimeSpanAxis()
            {
                Minimum = new TimeSpan(00, 00, 00),
                Maximum = new TimeSpan(00, 00, 10),
                LabelFormat = "mm\\:ss\\:fff",
                Header = new Label()
                {
                    Content = "Time in (mm:ss:fff)",
                    FontWeight = FontWeights.Bold,
                },
                EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Shift,
 
            };
            chart.PrimaryAxis = primaryAxis;
 
            NumericalAxis secondaryAxis = new NumericalAxis()
            {
                Minimum = 50,
                Maximum = 700,
                Header = new Label()
                {
                    Content = "Distance in (meters)",
                    FontWeight = FontWeights.Bold,
                },
 
            };
            chart.SecondaryAxis = secondaryAxis;
 
            SplineSeries series = new SplineSeries()
            {
                XBindingPath = "Time",
                YBindingPath = "Distance",
                ItemsSource = (new ViewModel()).Data,
                AdornmentsInfo = new ChartAdornmentInfo()
                {
                    ShowLabel = true,
                },
                Interior = new SolidColorBrush(Colors.Purple),
                
            };
            chart.Series.Add(series);
            this.Content = chart;

Output:

Milliseconds axis interval in TimeSpanAxis on Spline chart

Description automatically generated

You can download the sample in GitHub

Conclusion

I hope you enjoyed learning about how to format TimeSpanAxis label based on axis interval in WPF (SfChart).

You can refer to our WPF Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Chart documentation to understand how to present and manipulate data.

For current customers, you can check out our WPF components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our WPF Chart and other WPF components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

How to format TimeSpanAxis label based on axis interval in WPF (SfChart)?

Access denied