How to show different data marker symbol based on conditions in Blazor Chart?

This KB article explains how to show different data marker symbols based on the conditions in the Blazor Chart.

Marker symbol customization based on condition in Blazor Chart

We can show different data marker symbols based on the conditions by using OnPointRender event. This event triggers before each point for the series is rendered.

The following properties are available in the PointRenderEventArgs.

• Border – Specifies the color and the width of the point border.

• Fill – Specifies the fill color of the point.

• Height – Specifies the current point’s height.

• Shape – Specifies the marker shape of the point.

• Width – Specifies the current point’s width.

We can customize the marker shape based on Y value by specifying the Shape property of the PointRenderEventArgs.

The below code example demonstrates how to change marker shape based on Y value:

Index.razor

@using Syncfusion.Blazor.Charts

<SfChart> 

    <ChartEvents OnPointRender="@PointRender"></ChartEvents>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@ConsumerReports" XName="X" YName="Y" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10" />
        </ChartSeries>
    </ChartSeriesCollection>

</SfChart>

@code {
    
    public class ChartData
    {
        public double X { get; set; }
        public double Y { get; set; }
    }

    public List<ChartData> ConsumerReports = new List<ChartData>
    {
        new ChartData{ X= 2005, Y= 25 },
        new ChartData{ X= 2006, Y= 15 },
        new ChartData{ X= 2007, Y= 45 },
        new ChartData{ X= 2008, Y= 30},
        new ChartData{ X= 2009, Y= 20 },
        new ChartData{ X= 2010, Y= 35 },
        new ChartData{ X= 2011, Y= 50 },
        new ChartData{ X= 2012, Y= 45 },
        new ChartData{ X= 2013, Y= 25 },
        new ChartData{ X= 2014, Y= 35 },
        new ChartData{ X= 2015, Y= 20 }
    };
    
    public void PointRender(PointRenderEventArgs args)
    {
        if(args.Point.YValue <= 20)
        {
            args.Shape = ChartShape.InvertedTriangle;
            args.Fill = "red";
            args.Border.Color = "red";
        }
        if(args.Point.YValue >20 && args.Point.YValue < 40)
        {
            args.Shape = ChartShape.Diamond;
            args.Fill = "blue";
            args.Border.Color = "blue";
        }
        if (args.Point.YValue >= 40)
        {
            args.Shape = ChartShape.Triangle;
            args.Fill = "green";
            args.Border.Color = "green";
        }
    }
}

The following screenshot illustrates the output of the above code snippet.

Output:

View the sample in GitHub

Conclusion

I hope you enjoyed learning how to show different data marker symbols based on conditions in Blazor Chart Component.

You can refer to our Blazor Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data.

For current customers, you can check out our 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 other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!