Hi, I hope you can help. I am having rendering performance issues when using the Radzen Blazor Chart stacked column series. I’m trying to render 12 columns (one for each month) over a series of the last seven years.
The chart renders OK but when I resize the browser window, or try enabling labels, there is a huge delay. I have replicated the issue by editing the source at the page Blazor Stacked Column Chart | Free UI Components by Radzen with the code below (I’ve just added some more data). I’ve also tested this with a simple, from ground up, web project built in VS2026. The delay seems a lot worse in a both this project and my production project.
I’m testing with the latest Radzen version (11.2.2), and using Interactive Server render mode.
Any help would be grateful.
@using System.Globalization <RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12"> <RadzenCard Variant="Variant.Outlined"> <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" Wrap="FlexWrap.Wrap"> <RadzenCheckBox @bind-Value="@showDataLabels" Name="dataLabels"></RadzenCheckBox> <RadzenLabel Text="Show Data Labels" Component="dataLabels" /> </RadzenStack> </RadzenCard> <RadzenRow> <RadzenColumn Size="12"> <RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3">Auto-size stacked column series</RadzenText> <RadzenChart Animate="true"> <RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2029" CategoryProperty="Quarter" Title="2029" LineType="LineType.Dashed" ValueProperty="Revenue"> <RadzenSeriesDataLabels Visible="@showDataLabels" /> </RadzenStackedColumnSeries> <RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2028" CategoryProperty="Quarter" Title="2028" LineType="LineType.Dashed" ValueProperty="Revenue"> <RadzenSeriesDataLabels Visible="@showDataLabels" /> </RadzenStackedColumnSeries> <RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2027" CategoryProperty="Quarter" Title="2027" LineType="LineType.Dashed" ValueProperty="Revenue"> <RadzenSeriesDataLabels Visible="@showDataLabels" /> </RadzenStackedColumnSeries> <RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2026" CategoryProperty="Quarter" Title="2026" LineType="LineType.Dashed" ValueProperty="Revenue"> <RadzenSeriesDataLabels Visible="@showDataLabels" /> </RadzenStackedColumnSeries> <RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2025" CategoryProperty="Quarter" Title="2025" LineType="LineType.Dashed" ValueProperty="Revenue"> <RadzenSeriesDataLabels Visible="@showDataLabels" /> </RadzenStackedColumnSeries> <RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue"> <RadzenSeriesDataLabels Visible="@showDataLabels" /> </RadzenStackedColumnSeries> <RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2023" CategoryProperty="Quarter" Title="2023" ValueProperty="Revenue"> <RadzenSeriesDataLabels Visible="@showDataLabels" /> </RadzenStackedColumnSeries> <RadzenColumnOptions Radius="15" /> <RadzenValueAxis Formatter="@FormatAsUSD" Min="0" Step="1000000"> <RadzenGridLines Visible="true" /> <RadzenAxisTitle Text="Revenue in USD" /> </RadzenValueAxis> </RadzenChart> </RadzenColumn> <RadzenColumn Size="12"> <RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3">Custom size stacked column series</RadzenText> <RadzenChart Animate="true"> <RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2029" CategoryProperty="Quarter" Title="2029" LineType="LineType.Dashed" ValueProperty="Revenue" /> <RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2028" CategoryProperty="Quarter" Title="2028" LineType="LineType.Dashed" ValueProperty="Revenue" /> <RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2027" CategoryProperty="Quarter" Title="2027" LineType="LineType.Dashed" ValueProperty="Revenue" /> <RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2026" CategoryProperty="Quarter" Title="2026" LineType="LineType.Dashed" ValueProperty="Revenue" /> <RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2025" CategoryProperty="Quarter" Title="2025" LineType="LineType.Dashed" ValueProperty="Revenue" /> <RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue" /> <RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2023" CategoryProperty="Quarter" Title="2023" ValueProperty="Revenue" /> <RadzenColumnOptions Radius="10" Width="20" /> <RadzenCategoryAxis Padding="20" /> <RadzenValueAxis Formatter="@FormatAsUSD" Min="0" Step="1000000"> <RadzenGridLines Visible="true" /> <RadzenAxisTitle Text="Revenue in USD" /> </RadzenValueAxis> </RadzenChart> </RadzenColumn> </RadzenRow> </RadzenStack> @code { bool showDataLabels = false; class DataItem { public string Quarter { get; set; } public double Revenue { get; set; } } string FormatAsUSD(object value) { return ((double)value).ToString("C0", CultureInfo.CreateSpecificCulture("en-US")); } DataItem[] revenue2023 = new DataItem[] { new DataItem { Quarter = "Q1", Revenue = 234000 }, new DataItem { Quarter = "Q2", Revenue = 284000 }, new DataItem { Quarter = "Q3", Revenue = 274000 }, new DataItem { Quarter = "Q4", Revenue = 294000 }, new DataItem { Quarter = "Q5", Revenue = 234000 }, new DataItem { Quarter = "Q6", Revenue = 284000 }, new DataItem { Quarter = "Q7", Revenue = 274000 }, new DataItem { Quarter = "Q8", Revenue = 294000 }, new DataItem { Quarter = "Q9", Revenue = 234000 }, new DataItem { Quarter = "Q10", Revenue = 284000 }, new DataItem { Quarter = "Q11", Revenue = 274000 }, new DataItem { Quarter = "Q12", Revenue = 294000 }, }; DataItem[] revenue2024 = new DataItem[] { new DataItem { Quarter = "Q1", Revenue = 254000 }, new DataItem { Quarter = "Q2", Revenue = 324000 }, new DataItem { Quarter = "Q3", Revenue = 354000 }, new DataItem { Quarter = "Q4", Revenue = 394000 }, new DataItem { Quarter = "Q5", Revenue = 254000 }, new DataItem { Quarter = "Q6", Revenue = 324000 }, new DataItem { Quarter = "Q7", Revenue = 354000 }, new DataItem { Quarter = "Q8", Revenue = 394000 }, new DataItem { Quarter = "Q9", Revenue = 254000 }, new DataItem { Quarter = "Q10", Revenue = 324000 }, new DataItem { Quarter = "Q11", Revenue = 354000 }, new DataItem { Quarter = "Q12", Revenue = 394000 }, }; DataItem[] revenue2025 = new DataItem[] { new DataItem { Quarter = "Q1", Revenue = 254000 }, new DataItem { Quarter = "Q2", Revenue = 324000 }, new DataItem { Quarter = "Q3", Revenue = 354000 }, new DataItem { Quarter = "Q4", Revenue = 394000 }, new DataItem { Quarter = "Q5", Revenue = 254000 }, new DataItem { Quarter = "Q6", Revenue = 324000 }, new DataItem { Quarter = "Q7", Revenue = 354000 }, new DataItem { Quarter = "Q8", Revenue = 394000 }, new DataItem { Quarter = "Q9", Revenue = 254000 }, new DataItem { Quarter = "Q10", Revenue = 324000 }, new DataItem { Quarter = "Q11", Revenue = 354000 }, new DataItem { Quarter = "Q12", Revenue = 394000 }, }; DataItem[] revenue2026 = new DataItem[] { new DataItem { Quarter = "Q1", Revenue = 254000 }, new DataItem { Quarter = "Q2", Revenue = 324000 }, new DataItem { Quarter = "Q3", Revenue = 0 }, new DataItem { Quarter = "Q4", Revenue = 394000 }, new DataItem { Quarter = "Q5", Revenue = 254000 }, new DataItem { Quarter = "Q6", Revenue = 0 }, new DataItem { Quarter = "Q7", Revenue = 354000 }, new DataItem { Quarter = "Q8", Revenue = 394000 }, new DataItem { Quarter = "Q9", Revenue = 254000 }, new DataItem { Quarter = "Q10", Revenue = 324000 }, new DataItem { Quarter = "Q11", Revenue = 354000 }, new DataItem { Quarter = "Q12", Revenue = 394000 }, }; DataItem[] revenue2027 = new DataItem[] { new DataItem { Quarter = "Q1", Revenue = 254000 }, new DataItem { Quarter = "Q2", Revenue = 324000 }, new DataItem { Quarter = "Q3", Revenue = 354000 }, new DataItem { Quarter = "Q4", Revenue = 394000 }, new DataItem { Quarter = "Q5", Revenue = 254000 }, new DataItem { Quarter = "Q6", Revenue = 324000 }, new DataItem { Quarter = "Q7", Revenue = 354000 }, new DataItem { Quarter = "Q8", Revenue = 394000 }, new DataItem { Quarter = "Q9", Revenue = 254000 }, new DataItem { Quarter = "Q10", Revenue = 324000 }, new DataItem { Quarter = "Q11", Revenue = 354000 }, new DataItem { Quarter = "Q12", Revenue = 394000 }, }; DataItem[] revenue2028 = new DataItem[] { new DataItem { Quarter = "Q1", Revenue = 254000 }, new DataItem { Quarter = "Q2", Revenue = 324000 }, new DataItem { Quarter = "Q3", Revenue = 354000 }, new DataItem { Quarter = "Q4", Revenue = 394000 }, new DataItem { Quarter = "Q5", Revenue = 254000 }, new DataItem { Quarter = "Q6", Revenue = 324000 }, new DataItem { Quarter = "Q7", Revenue = 354000 }, new DataItem { Quarter = "Q8", Revenue = 394000 }, new DataItem { Quarter = "Q9", Revenue = 254000 }, new DataItem { Quarter = "Q10", Revenue = 324000 }, new DataItem { Quarter = "Q11", Revenue = 354000 }, new DataItem { Quarter = "Q12", Revenue = 394000 }, }; DataItem[] revenue2029 = new DataItem[] { new DataItem { Quarter = "Q1", Revenue = 254000 }, new DataItem { Quarter = "Q2", Revenue = 324000 }, new DataItem { Quarter = "Q3", Revenue = 354000 }, new DataItem { Quarter = "Q4", Revenue = 394000 }, new DataItem { Quarter = "Q5", Revenue = 254000 }, new DataItem { Quarter = "Q6", Revenue = 324000 }, new DataItem { Quarter = "Q7", Revenue = 354000 }, new DataItem { Quarter = "Q8", Revenue = 394000 }, new DataItem { Quarter = "Q9", Revenue = 254000 }, new DataItem { Quarter = "Q10", Revenue = 324000 }, new DataItem { Quarter = "Q11", Revenue = 354000 }, new DataItem { Quarter = "Q12", Revenue = 394000 }, }; }