How to customize the color of chart points at runtime in Blazor Charts?

This article explains how to customize the color of chart points at runtime in Blazor Charts.

Customize the Color of Chart Points Using the OnPointRender Event

Blazor Charts provides an option to customize the color of chart points at runtime. This can be achieved by utilizing the OnPointRender event to customize the color of each point using the point Index.

In this code snippet, the OnPointRender event is used to dynamically set the color of chart points based on their Index. The PointRender method checks the index of each point and applies specific colors: green for the point at index 10, red for the point at index 7, and blue for all other points.

@using Syncfusion.Blazor.Charts

<SfChart>
   <ChartEvents OnPointRender="PointRender"></ChartEvents>
   <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
   <ChartSeriesCollection>
       <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column" />
   </ChartSeriesCollection>
</SfChart>

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

   public void PointRender(PointRenderEventArgs args)
   {
       if (args.Point.Index == 10)
       {
           args.Fill = "green";
       }
       else if (args.Point.Index == 7)
       {
           args.Fill = "red";
       }
       else
       {
           args.Fill = "blue";
       }
   }
   
   public List<ChartData> MedalDetails = new List<ChartData>
   {
       new ChartData { X= "South Korea", Y= 39.4 },
       new ChartData { X= "India", Y= 61.3 },
       new ChartData { X= "Pakistan", Y= 20.4 },
       new ChartData { X= "Germany", Y= 65.1 },
       new ChartData { X= "Australia", Y= 15.8 },
       new ChartData { X= "Italy", Y= 29.2 },
       new ChartData { X= "United Kingdom", Y= 44.6 },
       new ChartData { X= "Saudi Arabia", Y= 9.7 },
       new ChartData { X= "Russia", Y= 40.8 },
       new ChartData { X= "Mexico", Y= 31 },
       new ChartData { X= "Brazil", Y= 75.9 },
       new ChartData { X= "China", Y= 51.4 }
   };
} 

The following screenshot illustrates the output of the code snippet.

Live Sample for Customizing the Color of Chart Points at Runtime

Conclusion

I hope you enjoyed learning how to customize the color of chart points at runtime in Blazor Charts.

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, support portal, or feedback portal. We are always happy to assist you!