How to Change the Fill Color Using an Event in Blazor Charts?

This article explains how to dynamically change the fill color of a chart series in Blazor Charts using the OnPointRender event.

Overview

Blazor Charts provides support to customize the appearance of chart elements through various events. You can use the OnPointRender event to change the fill color of individual data points in a chart series. This is useful when you want each point to have a distinct color or to apply custom styling based on specific logic.

Implementation

Use the Fill property in the OnPointRender event to assign a custom color for each data point.

@using Syncfusion.Blazor.Charts
<SfChart Title="Olympic Medals">
   <ChartEvents OnPointRender="PointRenderEvent"></ChartEvents>
   <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
   <ChartSeriesCollection>
       <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" PointColorMapping="Color" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart>

@code {
   public string[] colors = new string[] {"red", "green", "#ff0097","crimson", "blue", "darkorange" };
   int i = 0;
   public class ChartData
   {
       public string X { get; set; }
       public double Y { get; set; }
   }

   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 },
   };
   public void PointRenderEvent(PointRenderEventArgs args)
   {
       if (i >= MedalDetails.Count)
           i = 0;
       args.Fill = colors[i];
       i++;
   }
} 

Output Screenshot

Live Sample

Live Demo: Change Fill Color Using OnPointRender in Blazor Charts

Conclusion:

We hope you found this guide helpful in learning How to change the fill color in a chart series using an event in Blazor Charts. For more features, visit our [Blazor Charts feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our [Blazor Charts 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!