Skip to content

[Bug]: SvgChartLegend is not horizontally centered for single/short-label legend #6667

Description

@FenixCrafter

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

  1. Render with one and .
  2. Give the series a short Name (e.g. "Revenue" or "Banked hours").
  3. 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.

Metadata

Metadata

Assignees

Labels

Type

Projects

Status
✔ Done

Relationships

None yet

Development

No branches or pull requests

Issue actions