Syncfusion AI Assistant

How can I help you?

Customize the marker for specific data point

4 May 20261 minute to read

We can customize the marker for specific data point with custom template for LineSparkline and AreaSparkline, in order to customize the marker we need to inherit the MarkerTemplateSelector class and override the SelectTemplate method.

<Syncfusion:SfLineSparkline
    x:Name="sparkline"
    MarkerVisibility="Visible"
    ItemsSource="{Binding UsersList}"
    YBindingPath="NoOfUsers">

    <Syncfusion:SfLineSparkline.MarkerTemplateSelector>
        <local:CustomMarkersTemplateSelector MarkerHeight="10" MarkerWidth="10"/>
    </Syncfusion:SfLineSparkline.MarkerTemplateSelector>

</Syncfusion:SfLineSparkline>
public class CustomMarkersTemplateSelector : MarkerTemplateSelector
{
    protected override DataTemplate SelectTemplate(double x, double y)
    {
        if (y == MaximumY)
        {
            DataTemplate markerTemplate = Application.Current.Resources["markerTemplate"] as DataTemplate;
            return markerTemplate;
        }
        else
        {
            return base.SelectTemplate(x, y);
        }
    }
}

The following is a snapshot of the custom marker position.

Customize-the-marker-for-specific-data-point_img1