How to set the milliseconds label in .NET MAUI Cartesian Charts?

In .NET MAUI Cartesian Charts, you can customize the axis and trackball labels to display time with millisecond precision. This guide will walk you through setting the milliseconds label format using Syncfusion®'s SfCartesianChart.

Imagine you are monitoring real-time data from a sensor that records temperature readings every few milliseconds. To visualize this data accurately, you need the chart to display axis labels and trackball labels with millisecond precision.

Step 1: Initialize the SfCartesianChart
Refer to the documentation for detailed steps on initializing the SfCartesianChart.

The following code illustrates how to initialize the SfCartesianChart.

[XAML]

<chart:SfCartesianChart>

    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis/>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>

    <chart:FastLineSeries ItemsSource="{Binding Data}" 
                          XBindingPath="XValues" 
                          YBindingPath="YValues" />
</chart:SfCartesianChart>

[C#]

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis primaryAxis = new DateTimeAxis();
chart.XAxes.Add(primaryAxis);

NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);

FastLineSeries series = new FastLineSeries();
series.ItemsSource = (new ViewModel()).Data;
series.XBindingPath = "XValues";
series.YBindingPath = "YValues";

chart.Series.Add(series);

Step 2: Customize Axis Labels to Display Milliseconds
To display milliseconds in axis labels, use the LabelFormat property in ChartAxisLabelStyle.
The following code illustrates how to set the milliseconds label format for axis labels.

[XAML]

<chart:SfCartesianChart>
 . . .   
    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis LabelRotation="-30" Interval="10" IntervalType="Seconds">
            <chart:DateTimeAxis.LabelStyle>
                <chart:ChartAxisLabelStyle LabelFormat="HH:mm:ss.fff"></chart:ChartAxisLabelStyle>
            </chart:DateTimeAxis.LabelStyle>
        </chart:DateTimeAxis>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
. . .
</chart:SfCartesianChart>

[C#]

SfCartesianChart chart = new SfCartesianChart();
. . .
ChartAxisLabelStyle axisLabelStyle = new ChartAxisLabelStyle()
{
    LabelFormat = "HH:mm:ss.fff"
};

DateTimeAxis primaryAxis = new DateTimeAxis()
{
    LabelRotation = -30,
    Interval = 10,
    IntervalType = DateTimeIntervalType.Seconds,
    LabelStyle = axisLabelStyle,
};
chart.XAxes.Add(primaryAxis);

NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);
. . .

Output

Step 3: Customize Trackball Labels to Display Milliseconds
To display milliseconds in trackball labels, use the LabelFormat property in ChartLabelStyle.
The following code illustrates how to set the milliseconds label format for trackball axis labels.

[XAML]

<chart:SfCartesianChart>
 . . .   
    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis ShowTrackballLabel="True">       
            <chart:DateTimeAxis.TrackballLabelStyle>
                <chart:ChartLabelStyle Background="Black" LabelFormat="MM/dd/yyyy (HH:mm:ss.fff)"></chart:ChartLabelStyle>
            </chart:DateTimeAxis.TrackballLabelStyle>
        </chart:DateTimeAxis>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>

    <chart:SfCartesianChart.TrackballBehavior>
        <chart:ChartTrackballBehavior/>
    </chart:SfCartesianChart.TrackballBehavior>
. . .
</chart:SfCartesianChart>

[C#]

SfCartesianChart chart = new SfCartesianChart();
. . .
ChartLabelStyle tracballLabelStyle = new ChartLabelStyle()
{
    Background = Colors.Black,
    LabelFormat = "MM/dd/yyyy (HH:mm:ss.fff)"
};

DateTimeAxis primaryAxis = new DateTimeAxis()
{
    ShowTrackballLabel = true,
    TrackballLabelStyle = tracballLabelStyle
};
chart.XAxes.Add(primaryAxis);

NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);

ChartTrackballBehavior trackball = new ChartTrackballBehavior();
chart.TrackballBehavior= trackball;
. . .

Output

Conclusion
I hope you enjoyed learning how to set the milliseconds label format for axis and trackball labels in .NET MAUI Cartesian Charts.
Refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!