Articles in this section
Category / Section

How to change color of specific point in Blazor Box and Whisker Charts?

3 mins read

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

image.png

Live Sample for Customizing Point in BoxAndWhisker

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied