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.