How to change high and low data label color in Blazor Charts?

This article explains how to change the data label colors in Range Column Blazor Charts.

Changing the color of high and low datalabel values

Blazor Charts provides an option to customize the color of high and low data label values in different color using OnDataLabelRender event.

This functionality can be implemented by determining whether the current label corresponds to a “High” or “Low” value, based on a comparison with the data source. The args.Point.Index helps identify which data point is being rendered for the label.

By casting args.Series.DataSource to a strongly typed model such as RangePoint, you can easily access the high and low values. Then, compare args.Text with the high value of the point, if it matches, set args.Font.Color to red. Similarly, if it matches the low value, set args.Font.Color to blue.

The following code example demonstrates how to change the color of data label high and low values using event.

Code Example

@using Syncfusion.Blazor.Charts

<SfChart Title="RangeColumn High/Low Data Label Styling" Width="600px" Height="350px">
   <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
   <ChartPrimaryYAxis Title="Value" />
   <ChartSeriesCollection>
       <ChartSeries DataSource="@RangeData"
                    XName="Category"
                    High="High"
                    Low="Low"
                    Name="Range"
                    Type="Syncfusion.Blazor.Charts.ChartSeriesType.RangeColumn">
           <ChartMarker Visible="true" Height="5" Width="5">
               <ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Outer"
                               Font="@(new ChartDataLabelFont { Size = "14px", FontWeight = "Bold" })" />
           </ChartMarker>
       </ChartSeries>
   </ChartSeriesCollection>
   <ChartEvents OnDataLabelRender="DataLabelRender" />
</SfChart>

@code {
   private List<RangePoint> RangeData = new()
   {
       new RangePoint { Category = "A", High = 30, Low = 10 },
       new RangePoint { Category = "B", High = 40, Low = 20 },
       new RangePoint { Category = "C", High = 35, Low = 15 }
   };

   public class RangePoint
   {
       public string Category { get; set; } = "";
       public double High { get; set; }
       public double Low { get; set; }
   }

    public void DataLabelRender(Syncfusion.Blazor.Charts.TextRenderEventArgs args)
{
    // Get index of the point in the data source
    int index = args.Point.Index;

    // Cast to your model
    var data = args.Series.DataSource.Cast<RangePoint>().ToList();
    var item = data[index];

    // Match High vs Low
    if (args.Text == item.High.ToString())
    {
        args.Font.Color = "Red";   // High → Red
    }
    else if (args.Text == item.Low.ToString())
    {
        args.Font.Color = "Blue";  // Low → Blue
    }
}
} 

Output

Demo

Live Sample for Changing Datalabel Color

Conclusion

I hope you enjoyed learning about how to change high and low data label color in Blazor Charts.

You can refer to our Blazor Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Blazor Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our Blazo components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our React Chart and other React components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!