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 features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Charts example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Charts and other Blazor components.

If you have any questions 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!