Blazorise Version
2.2.1
What Blazorise provider are you running on?
Bootstrap5
Link to minimal reproduction or a simple code snippet
<SvgColumnChart TItem="DataPoint" Items="@_items" Options="@_options">
<SvgChartCategoryAxis TItem="DataPoint" Value="@(x => x.Label)" />
<SvgChartValueAxis BeginAtZero="false" />
<SvgColumnSeries TItem="DataPoint" Name="Value" Value="@(x => x.Value)" />
</SvgColumnChart>
@code {
private SvgChartOptions _options = new() { Responsive = true, Width = 1000, Height = 300 };
private List<DataPoint> _items = new()
{
new() { Label = "A", Value = 96 },
new() { Label = "B", Value = 98 },
new() { Label = "C", Value = 100 },
};
public class DataPoint { public string Label { get; set; } public double Value { get; set; } }
}
Steps to reproduce & bug description
<SvgColumnChart TItem="DataPoint" Items="@_items" Options="@_options">
<SvgChartCategoryAxis TItem="DataPoint" Value="@(x => x.Label)" />
<SvgChartValueAxis BeginAtZero="false" />
<SvgColumnSeries TItem="DataPoint" Name="Value" Value="@(x => x.Value)" />
</SvgColumnChart>
@code {
private SvgChartOptions _options = new() { Responsive = true, Width = 1000, Height = 300 };
private List<DataPoint> _items = new()
{
new() { Label = "A", Value = 96 },
new() { Label = "B", Value = 98 },
new() { Label = "C", Value = 100 },
};
public class DataPoint { public string Label { get; set; } public double Value { get; set; } }
}
Steps to reproduce & bug description: Render an SvgColumnChart with a non-stacked SvgColumnSeries and SvgChartValueAxis BeginAtZero="false", using data values clustered near the top of the auto-scaled range (e.g. 96–100, which auto-scales the axis to roughly 95–100). Look at the rendered bars.
Root cause (found by reading SvgChartColumnSeriesRenderer.Render):
var startValue = ResolveStackValue(item.StackBaseValues, pointIndex, 0); // hardcoded 0 fallback
var startY = chart.ProjectY(startValue, item.ValueAxisId);
For a non-stacked series, the baseline value is always 0, regardless of the axis's actual visible minimum. ProjectY(0) then returns a Y-coordinate far outside the plot area whenever the axis doesn't include 0 in its visible range.
What is expected?
Bars should render within (or at least visually respect) the plot area — either by using the axis's visible minimum as the baseline when BeginAtZero is false, or by clipping series rendering to the plot area bounds.
What is actually happening?
Every bar renders as a rectangle stretching from a point far below the visible plot area up to its value. Since the root has overflow: visible (per ResolveSvgStyle), these oversized bars paint straight through/past the chart's own container into whatever is below it on the page.
What browsers do you see the problem on?
No response
Any additional comments?
Workaround: a custom plugin rendering an SVG matching the actual plot area, applied via CSS clip-path to .svg-chart-columns.
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
Steps to reproduce & bug description: Render an SvgColumnChart with a non-stacked SvgColumnSeries and SvgChartValueAxis BeginAtZero="false", using data values clustered near the top of the auto-scaled range (e.g. 96–100, which auto-scales the axis to roughly 95–100). Look at the rendered bars.
Root cause (found by reading SvgChartColumnSeriesRenderer.Render):
var startValue = ResolveStackValue(item.StackBaseValues, pointIndex, 0); // hardcoded 0 fallback
var startY = chart.ProjectY(startValue, item.ValueAxisId);
For a non-stacked series, the baseline value is always 0, regardless of the axis's actual visible minimum. ProjectY(0) then returns a Y-coordinate far outside the plot area whenever the axis doesn't include 0 in its visible range.
What is expected?
Bars should render within (or at least visually respect) the plot area — either by using the axis's visible minimum as the baseline when BeginAtZero is false, or by clipping series rendering to the plot area bounds.
What is actually happening?
Every bar renders as a rectangle stretching from a point far below the visible plot area up to its value. Since the root has overflow: visible (per ResolveSvgStyle), these oversized bars paint straight through/past the chart's own container into whatever is below it on the page.
What browsers do you see the problem on?
No response
Any additional comments?
Workaround: a custom plugin rendering an SVG matching the actual plot area, applied via CSS clip-path to .svg-chart-columns.