RadzenChart legend overlaps category axis labels when bottom legend spans more than one line

Radzen.Blazor Components
1

The RadzenChart legend overlaps the category axis labels when the bottom legend spans more than one line:

image
image767×511 14.9 KB

This issue is easy to reproduce using the following code (based on the Chart > Legend example from the Radzen demo page, by duplicating the series several times and assigning long titles to them):

image
image1368×629 40.5 KB

I expected the chart area to automatically resize when the legend requires additional space.

Could you take a look at fixing this?

2

Hi @gvnoorden,

Unfortunately fixing such overlaps isn't trivial. Instead we recommend using a different legend position or shortening the titles. We don't plan on fixing that.

3

My workaround is to apply custom styles in the extended chart container and push the legend farther down:

.chart-container {
    margin-bottom: 30px;
}

    .chart-container ::deep div.rz-legend.rz-legend-bottom {
        bottom: -30px;
    }

I’m using Blazor CSS isolation in my chart component.