How to Convert Screen Points to Data Values and Vice Versa in .NET MAUI Chart (SfCartesianChart)?

The .NET MAUI SfCartesianChart offers powerful methods for converting between data values and screen points, enabling dynamic data interaction within charts. This article guides you through using these methods.

• Value to DataPoint : Convert a data value from the chart’s data model into a screen coordinate.
• DataPoint to Value: Convert a screen coordinate (pixel position) into a data model value.

This example demonstrates handling button clicks to display tooltip, trackball, text annotations on the chart’s using the converted value/data points.

Step 1: Initialize SfCartesianChart

Set up the SfCartesianChart following the guidelines in documentation.

Step 2: Value To DataPoint

Value To DataPoint in Category Axis:

Define the SfCartesianChart with CategoryAxis. Initialize the ChartTooltipBehavior with a name and set the EnableTooltip property to true for the series.

[XAML]

<Grid RowDefinitions="*,100">
<chart:SfCartesianChart x:Name="chart">

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

<chart:SfCartesianChart.TooltipBehavior>
    <chart:ChartTooltipBehavior x:Name="tooltip"/>
</chart:SfCartesianChart.TooltipBehavior>

<chart:ColumnSeries EnableTooltip="True"/>
</chart:SfCartesianChart>

<Button Grid.Row="1" Text="Value To DataPoint"  Clicked="Button_Clicked"/>
</Grid>

Each X-axis value is treated as an index (e.g., 0, 1, 2). The ValueToPoint method converts data values to screen coordinates, and the Show method displays the tooltip at the nearest data point for the given X and Y values.

[C#]

private void Button_Clicked(object sender, EventArgs e)
{
    if (chart is SfCartesianChart cartesianChart)
   {
    //Convert chart point to screen point.
    var xPoint = cartesianChart.ValueToPoint(cartesianChart.XAxes[0], 2);
    var yPoint = cartesianChart.ValueToPoint(cartesianChart.YAxes[0], 65);

    tooltip.Show(xPoint, yPoint, true);
   }
}

Value to DataPoint in DateTimeAxis:

Define the SfCartesianChart with DateTimeAxis. Initialize the ChartTrackballBehavior with a name.

[XAML]

<Grid RowDefinitions="*,100">
<chart:SfCartesianChart x:Name="chart">
<chart:SfCartesianChart.XAxes>
       <chart:DateTimeAxis x:Name="xAxis" Interval="1" IntervalType="Months">
           <chart:DateTimeAxis.LabelStyle>
               <chart:ChartAxisLabelStyle LabelFormat="MMM-dd"/>
           </chart:DateTimeAxis.LabelStyle>
       </chart:DateTimeAxis>
</chart:SfCartesianChart.XAxes>

 <chart:SfCartesianChart.TrackballBehavior>
     <chart:ChartTrackballBehavior x:Name="trackball"/>
 </chart:SfCartesianChart.TrackballBehavior>
</chart:SfCartesianChart>
<Button Grid.Row="1" Text="Value To DataPoint"  Clicked="Button_Clicked"/>
</Grid>

Using the ToOADate() built-in method, convert the DateTime value to a double.The ValueToPoint method is convert the data value into screen coordinates, and the trackball is displayed at the converted point using the Show method.

[C#]

private void Button_Clicked(object sender, EventArgs e)
{
  if (chart is SfCartesianChart cartesianChart)
 {
    //Convert chart point to screen point.
    var xPoint = cartesianChart.ValueToPoint(cartesianChart.XAxes[0], new DateTime(2010,04,30).ToOADate());
    var yPoint = cartesianChart.ValueToPoint(cartesianChart.YAxes[0], 182);

    trackball.Show(xPoint, yPoint);
 }
} 

Step 3: DataPoint to Value

In this example, we convert a screen coordinate (pixel position) to the corresponding data value and display a TextAnnotation at that point:

private void Button_Clicked1(object sender, EventArgs e)
{
    if (chart is SfCartesianChart cartesianChart)
    {
        //Convert screen point to chart point.
        var xValue = cartesianChart.PointToValue(cartesianChart.XAxes[0], 630, 100);
        var yValue = cartesianChart.PointToValue(cartesianChart.YAxes[0], 630, 100);

        var text = new TextAnnotation()
        {
            X1 = xValue,
            Y1 = yValue,
            Text = "Highest Sales Month",
            CoordinateUnit = ChartCoordinateUnit.Axis
        };
        text.LabelStyle = new ChartAnnotationLabelStyle()
       ...
        chart.Annotations.Add(text);
    }
}

Github

For more details, refer to the Value to data point vice versa conversion sample.

Conclusion:

I hope you enjoyed learning about how to Convert Screen Points to Data Values and Vice Versa in .NET MAUI Cartesian Chart.

Refer to our .NET MAUI Cartesian Chart’s feature tour page to know 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, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trail 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!