Blazorise Version
2.2.1
What Blazorise provider are you running on?
Bootstrap5
Link to minimal reproduction or a simple code snippet
<SvgColumnChart TItem="MonthlyRevenue" Items="@revenue" Options="@options">
<SvgChartLegend Position="SvgChartLegendPosition.Bottom" />
<SvgChartCategoryAxis Value="@( item => item.Month )" />
<SvgChartValueAxis BeginAtZero TickCount="6" />
<SvgColumnSeries Name="Revenue" Value="@( item => item.Revenue )" Color="Color.Primary"
BorderRadius="4" />
</SvgColumnChart>
@code {
private readonly SvgChartOptions options = new() { Width = 1000, Height = 280 };
private readonly List<MonthlyRevenue> revenue = [
new() { Month = "Jan", Revenue = 68 }, new() { Month = "Feb", Revenue = 74 }, new() {
Month = "Mar", Revenue = 91 },
];
private sealed class MonthlyRevenue { public string Month { get; set; } public double
Revenue { get; set; } }
}
Steps to reproduce & bug description
- Render with one and .
- Give the series a short Name (e.g. "Revenue" or "Banked hours").
- Compare the legend's horizontal position to the chart's true center.
What is expected?
The legend's swatch + label should be horizontally centered under the chart.
What is actually happening?
The legend is visibly shifted left of center. The offset shrinks as the label gets longer or
more series are added.
What browsers do you see the problem on?
Firefox, Chrome, Microsoft Edge, Other
Any additional comments?
Root cause seems to be in SvgChartLegendRenderer.Render():
var itemWidth = Math.Min(140, options.Width / Math.Max(legendItems.Count, 1));
var totalWidth = itemWidth * legendItems.Count;
var startX = Math.Max(8, (options.Width - totalWidth) / 2);
Each item gets a fixed 140px-capped slot, and the slots are centered but the swatch/text inside each slot is left-aligned, not centered within it. Short labels don't fill the slot, so the visible content sits left of true center.
Blazorise Version
2.2.1
What Blazorise provider are you running on?
Bootstrap5
Link to minimal reproduction or a simple code snippet
Steps to reproduce & bug description
What is expected?
The legend's swatch + label should be horizontally centered under the chart.
What is actually happening?
The legend is visibly shifted left of center. The offset shrinks as the label gets longer or
more series are added.
What browsers do you see the problem on?
Firefox, Chrome, Microsoft Edge, Other
Any additional comments?
Root cause seems to be in
SvgChartLegendRenderer.Render():Each item gets a fixed 140px-capped slot, and the slots are centered but the swatch/text inside each slot is left-aligned, not centered within it. Short labels don't fill the slot, so the visible content sits left of true center.