How to format the trackball labels in .NET MAUI Chart (SfCartesianChart)?

Cartesian charts offer customization options for trackball labels, trackball lines, and trackball markers using the ChartTrackballBehavior. This article explains how to format the trackball label in a .NET MAUI Cartesian Chart.

Step 1: Initialize SfCartesianChart
Begin by setting up the SfCartesianChart according to the guidelines in the documentation.

Step 2: Initialize ChartTrackballBehavior
To enable the trackball in the chart, create an instance of ChartTrackballBehavior and set it to the TrackballBehavior property of SfCartesianChart.

XAML

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

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

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

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="Date" 
                      YBindingPath="MonthlyRevenue"
                      ShowMarkers="True" />
       
</chart:SfCartesianChart> 

C#

SfCartesianChart chart = new SfCartesianChart();

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

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

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

LineSeries lineSeries = new LineSeries ()
{
  ItemsSource = new ViewModel().Data,
  XBindingPath = "Date",
  YBindingPath = "MonthlyRevenue",
  ShowMarkers = true,
  
};
chart.Series.Add(lineSeries);
this.Content = chart; 

Step 3: Format the trackball label
The LabelStyle property allows you to customize the trackball labels in the Cartesian Chart. By creating an instance of ChartLabelStyle and using its LabelFormat property, you can format the trackball labels. Finally, set the customized ChartLabelStyle to the LabelStyle property.

XAML

....
<chart:SfCartesianChart.TrackballBehavior>
    <chart:ChartTrackballBehavior>
        <chart:ChartTrackballBehavior.LabelStyle>
            <chart:ChartLabelStyle LabelFormat="$#.#" Background="Black"/>
        </chart:ChartTrackballBehavior.LabelStyle>
    </chart:ChartTrackballBehavior>
</chart:SfCartesianChart.TrackballBehavior>

... 

C#

... 
ChartTrackballBehavior trackball = new ChartTrackballBehavior();
ChartLabelStyle labelStyle = new ChartLabelStyle()
{
    LabelFormat = "$#.#",
    Background = Colors.Black
};
trackball.LabelStyle = labelStyle;
chart.TrackballBehavior = trackball;
... 

Output:

Conclusion

I hope you enjoyed how to format the trackball label in .NET MAUI SfCartesianChart.

Refer to our .NET MAUI Chart’s 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 following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!