How to Change Color Point in Blazor Box and Whisker Charts?

This article explains how to change the color of specific point in box and whisker chart.

Changing specific point color in box and whisker

Blazor Charts provides an option to customize the particular point in a box and whisker series chart using OnPointRender event.

This can be done by changing the fill color of the required point using the args.Fill argument, based on its index via the args.Point.Index argument, or by checking its X value with args.Point.X in the chart’s OnPointRender event.

The below code example demonstrates how to changing specific point in box and whisker.

@using Syncfusion.Blazor.Charts
<SfChart ID="chart1" Title="Employees Age Group in Various Departments">
       <ChartSeriesCollection>
           <ChartSeries DataSource="@ChartPoints" XName="Department" YName="Age" Name="Department" BoxPlotMode="@BoxPlotMode" ShowMean="@Mean" Type="Syncfusion.Blazor.Charts.ChartSeriesType.BoxAndWhisker">
               <ChartMarker Visible="true" Height="7" Width="7"></ChartMarker>
           </ChartSeries>
       </ChartSeriesCollection>
       <ChartEvents OnPointRender="PointRenderEvt"></ChartEvents>
   </SfChart>
@code{
   public void PointRenderEvt(PointRenderEventArgs args)
   {
       if (args.Point.Index == 1)
           args.Fill = "blue";
       //if(args.Point.X.ToString() == "Testing")
           //args.Fill = "blue";
   }
   public List<BoxandWhiskerData> ChartPoints { get; set; } = new List<BoxandWhiskerData>
   {
       new BoxandWhiskerData { Department = "Development", Age = new double[]{ 22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38 }},
       new BoxandWhiskerData { Department = "Testing", Age = new double[] { 22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50 }},
      //...
   };
   public class BoxandWhiskerData
   {
       public string Department { get; set; }
       public double[] Age { get; set; }
   }
} 

The following screenshot illustrates the output of the code snippet.

Output

Live Sample for Customizing Point in BoxAndWhisker

Conclusion
I hope you enjoyed learning how to change color point in Blazor Box and Whisker Charts.
You can refer to our Blazor Charts 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 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, Direct-Trac or feedback portal. We are always happy to assist you!