Syncfusion Blazor RangeColumn Chart – How to Style High and Low Data Labels Separately (Without Index Hack)

[Ashish Khanal]

Description:

I want to style the data labels for the high and low values of a RangeColumn chart differently (e.g., high in red, low in blue).

Currently, I’m using a hacky approach with a counter/index in `OnAfterRender` and the `OnDataLabelRender` event to alternate the color, but this feels brittle and not robust.

Is there a built-in or recommended way in Syncfusion Blazor Charts to style the high and low data labels separately, so that the high value is always one color (e.g., red) and the low value is always another (e.g., blue), regardless of the order or number of points?

Minimal Repro:

https://blazorplayground.syncfusion.com/rjheZbWIGSaWqWGi

Question:

Is there a way to directly identify whether the data label is for the high or low value in the `OnDataLabelRender` event, or another recommended approach to style them differently?

I want to avoid using a counter/index or relying on render order.

Thank you!

[Ashish Khanal]

Repro code (for future reference):

@using Syncfusion.Blazor.Charts

<h3>Minimal Repro: RangeColumn Data Label Styling</h3>

<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; }

    }

    // Current hacky approach: alternate color by index

    private int dataLabelIndex = 0;

    public void DataLabelRender(Syncfusion.Blazor.Charts.TextRenderEventArgs args)

    {

        args.Font.Color = (dataLabelIndex % 2 == 0) ? "Red" : "Blue";

        dataLabelIndex++;

    }

}

[Durga Gopalakrishnan]

Hi Ashish,

Your requirement can be achieved by identifying whether the current label represents a "High" or "Low" value by comparing it against the data source values, and then assigning the appropriate color accordingly.

For your reference, we’ve attached the updated sample and a screenshot demonstrating this approach.

public void DataLabelRender(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

     }

}

Screenshot :

Sample : https://blazorplayground.syncfusion.com/BtVIjPsvzMYhSguW

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.