'ChartDataLabel' does not render a label on a RangeBar Column datapoint in SfChart

[Ramesh S]

I am using SfChart RangeColumn to render a chart. I have used

to render some text on the data points. But it looks like ChartDataLabel does not render anything.. I have attached a sample code for your reference...

@page "/"

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Charts

@using Syncfusion.Blazor.Buttons

@using System.Dynamic

@inject HttpClient httpClient

<div id="ControlRegion" style="width:100%;height:900px">

<div style="height:10px"> </div>

<div style="width:100%;height:96%">

<SfChart @ref="sfRangeChart" IsTransposed="true" Theme="Theme.Fluent" Height="95%" Width="98%">

<ChartZoomSettings EnableSelectionZooming="false"

   EnableMouseWheelZooming="false"

   EnablePinchZooming="false"

   EnableScrollbar="true"

   Mode="ZoomMode.XY" />

<ChartEvents OnAxisLabelRender="axisLabel"></ChartEvents>

<ChartArea><ChartAreaBorder Width="1"></ChartAreaBorder></ChartArea>

<ChartPrimaryXAxis Interval="5" ZoomFactor="@zoomFactorY" ZoomPosition="@zoomPositionY"

   Minimum="0" Maximum="150" EnableAutoIntervalOnZooming="false"

   RangePadding="ChartRangePadding.None"

   ValueType="Syncfusion.Blazor.Charts.ValueType.Double">

<ChartAxisMajorGridLines Width="1"></ChartAxisMajorGridLines>

<ChartAxisMajorTickLines Width="2"></ChartAxisMajorTickLines>

</ChartPrimaryXAxis>

<ChartPrimaryYAxis ZoomFactor="@zoomFactor" ZoomPosition="@zoomPosition"

   Interval="1" Minimum="0" Maximum="93"

   EdgeLabelPlacement="EdgeLabelPlacement.Shift"

   RangePadding="ChartRangePadding.None">

<ChartAxisMajorTickLines Width="1"></ChartAxisMajorTickLines>

<ChartAxisMajorGridLines Width="1"></ChartAxisMajorGridLines>

</ChartPrimaryYAxis>

<ChartSeriesCollection>

<ChartSeries PointColorMapping="Color" DataSource="@dataSource" XName="Date" High="HighTemp"

 Low="LowTemp" ColumnSpacing="0.05" Type="ChartSeriesType.RangeColumn" ColumnWidth="0.5">

<ChartMarker>

<ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Outer"

LabelIntersectAction="LabelIntersectAction.None">

<Template>

@{

var data = context as ChartDataPointInfo;

}

<span>

Test1

</span>

</Template>

</ChartDataLabel>

</ChartMarker>

</ChartSeries>

</ChartSeriesCollection>

</SfChart>

</div>

</div>

@code {

public double zoomFactorY = 0;

public double zoomPositionY = 0;

public double zoomFactor = 0;

public double zoomPosition = 0;

public double totalPoints = 0;

public double displayedPoints = 15;

public List<RangeBarChartData>? dataSource;

//public List<AnnotationData> Annotations;

public ChartAxisScrollbarSettingsRange range1 = new ChartAxisScrollbarSettingsRange();

SfChart sfRangeChart;

private int minY = 0, maxY = 15, maxYPoints = 200;

private int minX = 0, maxX = 150;

protected override void OnInitialized()

{

dataSource = ChartPoints.ToList();

//Annotations = AnnotationValues.ToList();

totalPoints = ChartPoints.Count;

totalPoints = ChartPoints.Max(c => c.HighTemp);

zoomFactor = displayedPoints / totalPoints;

var t = ChartPoints.Max(c => c.Date);

zoomFactorY = 0.5;

zoomPositionY = 15 / t;

}

public List<string> labels = new List<string>();

public class RangeBarChartData

{

public double Date { get; set; }

public double LowTemp { get; set; }

public double HighTemp { get; set; }

public string Text { get; set; }

public string Color { get; set; }

}

public List<RangeBarChartData> ChartPoints = new List<RangeBarChartData>

{

new RangeBarChartData { Date = 15, HighTemp = 10, LowTemp = 4, Text="P 5", Color = "red" },

new RangeBarChartData { Date = 40, HighTemp = 7.5, LowTemp = 4.5, Text = "P 4", Color = "#8ea9db" },

new RangeBarChartData { Date = 50, HighTemp = 8, LowTemp = 3, Text = "P 3", Color = "#8ea9db" },

new RangeBarChartData { Date = 75, HighTemp = 14, LowTemp = 11, Text = "P 2", Color = "#8ea9db" },

new RangeBarChartData { Date = 60, HighTemp = 3.5, LowTemp = 2, Text = "P 1", Color = "#f4b084" },

new RangeBarChartData { Date = 15, HighTemp = 15, LowTemp = 11, Text = "P 6", Color = "#8ea9db" },

new RangeBarChartData { Date = 40, HighTemp = 17, LowTemp = 12, Text = "P 7", Color = "#8ea9db" },

new RangeBarChartData { Date = 50, HighTemp = 20, LowTemp = 16, Text = "P 8", Color = "#8ea9db" },

new RangeBarChartData { Date = 75, HighTemp = 23, LowTemp = 19, Text = "P 9", Color = "#8ea9db" },

new RangeBarChartData { Date = 60, HighTemp = 27, LowTemp = 23, Text = "P 10", Color = "#8ea9db" },

new RangeBarChartData { Date = 25, HighTemp = 30, LowTemp = 25, Text = "P 11", Color = "#8ea9db" },

new RangeBarChartData { Date = 40, HighTemp = 33, LowTemp = 28, Text = "P 12", Color = "#8ea9db" },

new RangeBarChartData { Date = 60, HighTemp = 36, LowTemp = 31, Text = "P 13", Color = "#8ea9db" },

new RangeBarChartData { Date = 70, HighTemp = 38, LowTemp = 34, Text = "P 14", Color = "#8ea9db" },

new RangeBarChartData { Date = 50, HighTemp = 43, LowTemp = 36, Text = "P 15", Color = "#8ea9db" },

new RangeBarChartData { Date = 25, HighTemp = 66, LowTemp = 63, Text = "P 16", Color = "#8ea9db" },

new RangeBarChartData { Date = 40, HighTemp = 69, LowTemp = 65, Text = "P 17", Color = "#8ea9db" },

new RangeBarChartData { Date = 60, HighTemp = 72, LowTemp = 68, Text = "P 18", Color = "#8ea9db" },

new RangeBarChartData { Date = 70, HighTemp = 70, LowTemp = 66, Text = "P 19", Color = "#8ea9db" },

new RangeBarChartData { Date = 50, HighTemp = 74, LowTemp = 70, Text = "P 20", Color = "#8ea9db" },

new RangeBarChartData { Date = 81, HighTemp = 12, LowTemp = 5, Text = "P 21", Color = "#8ea9db" },

new RangeBarChartData { Date = 90, HighTemp = 20, LowTemp = 12, Text = "P 22", Color = "#8ea9db" },

new RangeBarChartData { Date = 50, HighTemp = 40, LowTemp = 36, Text = "P 23", Color = "#8ea9db" },

new RangeBarChartData { Date = 86, HighTemp = 90, LowTemp = 81, Text = "P 23", Color = "#8ea9db" }

};

void axisLabel(AxisLabelRenderEventArgs args)

{

if (args.Axis.Name == "PrimaryYAxis")

{

args.Text = "Date" + " " + args.Value;

}

if (args.Axis.Name == "PrimaryXAxis")

{

args.Text = args.Value.ToString();

}

}

void textLabel(TextRenderEventArgs args)

{

labels.Add(args.Text);

if (labels.Count % 2 != 0)

{

foreach (var value in labels)

{

if (labels.Contains(args.Text))

{

args.Text = args.Text.Split(' ')[0].Replace(args.Text.Split(' ')[0], "S") + args.Text.Split(' ')[1];

}

}

}

else

{

args.Text = args.Text.Split(' ')[0] + args.Text.Split(' ')[0].Replace(args.Text.Split(' ')[0], "") + args.Text.Split(' ')[1];

}

}

}

Attachment: TestPage2_80b15e02.zip

[Durga Gopalakrishnan]

Hi Ramesh,

Greetings from Syncfusion.

Currently, when specifying zoom factor and zoom position for chart axis, the data label is not displayed. So, we have considered this case as bug and logged a defect report for the issue ”Rangebar datalabels are not rendered when axis zoom factor and position enabled”. This fix will be available in our weekly patch release which is scheduled to be rolled on 24^th March 2026. We appreciate your patience until then. You can keep track of the bug from the below feedback link.

Feedback Link : https://www.syncfusion.com/feedback/73068/rangebar-datalabels-are-not-rendered-when-axis-zoom-factor-and-position-enabled

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Regards,

Durga Gopalakrishnan.

[Ramesh S]

Hi,

Please let me know if this bug is fixed in the latest Syncfusion Blazor Nuget Package..

Thanks,

Ramesh S

[Karthick Panneerselvam]

Hi Ramesh,

We are glad to inform you that our v33.1.45 patch release has been successfully rolled out. This release includes a fix for the reported issue.

You can resolve the issue by upgrading to the latest available Syncfusion Blazor patch version.

Issue Details

Problem:
RangeBar data labels were not rendered when the axis ZoomFactor and ZoomPosition properties were enabled.

Fix

The issue has now been resolved, and data labels will render properly when zooming is applied to the chart axis.

NuGet Package:

NuGet Gallery | Syncfusion.Blazor.Charts 33.1.45

Sample:

https://blazorplayground.syncfusion.com/VjrRNzXwqrUIKoko

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,
Karthick Panneerselvam

[Ramesh S]

Hi Karthick,

Thanks for the fix.
< ChartDataLabel> is rendered without any template.

<ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Outer"

                                        LabelIntersectAction="LabelIntersectAction.None">
</ChartDataLabel>

If a template is defined within it , it looks like it is not working and the chart freezes and scrollbar is not working..

<ChartMarker>
    <ChartDataLabel Visible="true">
        <Template>
            <table>
                <tr>
                    <td align="center" style="background-color: #C1272D; font-size: 14px; color: #E7C554; font-weight: bold; padding: 5px">Test</td>
                </tr>
            </table>
        </Template>
    </ChartDataLabel>
</ChartMarker>

[Karthick Panneerselvam]

Hi Ramesh,

 

We are validating your reported scenario. We will update the further details within one business day(4th August2026). We appreciate your patience until then.

 

Regards,

Karthick Panneerselvam.

[Karthick Panneerselvam]

Hi Ramesh,

 

We have considered your reported scenario as bug and logged a defect report for the issue ”RangeColumn DataLabel Template throws index access issue when zooming is enabled(ZoomFactor , ZoomPosition)”. This fix will be available in our weekly patch release which is scheduled to be rolled on 18th August 2026. We appreciate your patience until then. You can keep track of the bug from the below feedback link.

 

Feedback Link : RangeColumn DataLabel Template throws index access issue when zooming is enabled(ZoomFactor , ZoomPosition) in Blazor | Feedback Portal

 

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

 

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

 

Regards,

Karthick Panneerselvam.

[Karthick Panneerselvam]

Hi Ramesh,

We are glad to inform you that our v34.2.4 patch release has been successfully rolled out. This release includes a fix for the reported issue.

Issue Details

Problem:

RangeColumn supports up to two data labels per point. In certain zoom, pan, and scroll scenarios, data label template rendering could fail when the expected label information was not available.

Fix

Improved validation for data label processing and enhanced template refresh handling during zoom and scroll operations to ensure data labels render correctly after visible range changes.

NuGet Package:

https://www.nuget.org/packages/Syncfusion.Blazor.Charts/34.2.4

We thank you for your support and appreciate your patience in waiting for this release.

Regards,
Karthick Panneerselvam