'ChartDataLabel' does not render a label on a RangeBar Column datapoint in SfChart
I am using SfChart RangeColumn to render a chart. I have used
@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
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 24th 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.
Hi,
Please let me know if this bug is fixed in the latest Syncfusion Blazor Nuget Package..
Thanks,
Ramesh S
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
Hi Karthick,
Thanks for the fix.
< ChartDataLabel> is rendered without any template.
</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>
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.
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.
- 6 Replies
- 3 Participants
-
RS Ramesh S
- Mar 7, 2026 06:01 AM UTC
- Aug 4, 2026 09:50 AM UTC
