How to show different data marker symbols based on condition in Xamarin.Forms Charts?
This KB article explains how to show the different data marker symbols based on the conditions in the Xamarin.Forms Chart (SfChart).
You can apply the different data marker symbols for the chart series by hooking the DataMarkerLabelCreated event in the chart series and set the MarkerType based on the condition in the event.
The following steps and code show how to apply the different marker symbols based on the data range.
Step 1: Add the ChartDataMarker for the series and enable the marker by setting the ShowMarker property to true.
<chart:LineSeries ItemsSource="{Binding Data}"
XBindingPath="Month"
YBindingPath="Target"
Label="2019">
<chart:LineSeries.DataMarker>
<chart:ChartDataMarker ShowMarker="True" ShowLabel="False"
MarkerWidth="15" MarkerHeight="15"/>
</chart:LineSeries.DataMarker>
</chart:LineSeries>
Step 2: Hook the DataMarkerLabelCreated event in the chart series.
<chart:LineSeries ItemsSource="{Binding Data}"
XBindingPath="Month"
YBindingPath="Target"
DataMarkerLabelCreated="LineSeries_DataMarkerLabelCreated"
Label="2019">
…..
</chart:LineSeries>
Step 3: In the DataMarkerLabelCreated event method, set the data marker symbols based on your requirement by using the data marker MarkerType property.
private void LineSeries_DataMarkerLabelCreated(object sender,
ChartDataMarkerLabelCreatedEventArgs e)
{
var data = e.DataMarkerLabel.Data as Model;
if (data != null)
{
if (data.Target >= 65)
{
e.DataMarkerLabel.MarkerType = DataMarkerType.Triangle;
e.DataMarkerLabel.MarkerColor = Color.Green;
}
else if (data.Target <= 40)
{
e.DataMarkerLabel.MarkerType = DataMarkerType.InvertedTriangle;
e.DataMarkerLabel.MarkerColor = Color.Red;
}
else
{
e.DataMarkerLabel.MarkerType = DataMarkerType.Diamond;
e.DataMarkerLabel.MarkerColor = Color.Blue;
}
}
}
Output:
See also:
How to add a custom data marker in Xamarin.Forms Chart
How to change the data marker symbol type in Chart
How to add the icons on top of each column/bar segment in Xamarin.Forms Chart
Conclusion
I hope you enjoyed learning about how to show different data marker symbols based on condition in Xamarin.Forms Charts.
You can refer to our Xamarin Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin Chart Documentation to understand how to present and manipulate data.
For current customers, you can check out our Xamarin 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 Xamarin Chart and other Xamarin 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!
