How to add data points on interactions in .NET MAUI Chart (SfCartesianChart)?
In .NET MAUI Chart, you can personalize touch behavior by overriding the OnTouchUp method in the ChartInteractiveBehavior class to add data points to the chart through touch interactions.
Step 1: Create the extension class inherited from the ChartInteractiveBehavior class. Personalize the touch behavior by overriding the OnTouchUp method within the ChartInteractionExt class to handle the touch-up events on a chart.
Use the PointToValue method to convert the touch coordinates (pointX and pointY) into corresponding data values on the X and Y axes of the SfCartesianChart.
[C#]
public class ChartInteractionExt : ChartInteractiveBehavior
{
protected override void OnTouchUp(ChartBase chart, float pointX, float pointY)
{
base.OnTouchUp(chart, pointX, pointY);
if (chart is SfCartesianChart cartesianChart)
{
var x = cartesianChart.PointToValue(cartesianChart.XAxes[0], pointX, pointY);
var y = cartesianChart.PointToValue(cartesianChart.YAxes[0], pointX, pointY);
if (cartesianChart.BindingContext is ViewModel viewModel)
{
viewModel.Data.Add(new Model(x, y));
}
}
}
}
Step 2:
Assign the extension class ChartInteractionExt to the InteractiveBehavior property of the SfCartesianChart.
[XAML]
<chart:SfCartesianChart.InteractiveBehavior>
<local:ChartInteractionExt />
</chart:SfCartesianChart.InteractiveBehavior>
[C#]
SfCartesianChart chart = new SfCartesianChart();
. . .
ChartInteractionExt interaction = new ChartInteractionExt();
chart.InteractiveBehavior = interaction;
. . .
Now, you can add data points to the chart anywhere within the chart area through touch input.
Output
Download the complete sample from GitHub.
Conclusion
I hope you enjoyed learning how to customize the axis grid line for the .NET MAUI Chart (SfCartesianChart).
You can refer to our .NET MAUI Chart feature tour page to know about its other groundbreaking feature representations and .NET MAUI Chart documentation and how to quickly get started with configuration specifications. Explore our .NET MAUI Chart example to understand how to create 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!