RadzenTabs & RadzenChart poor rendering performance with TabRenderMode.Client #1550

Closed
opened 2026-01-29 17:55:16 +00:00 by claunia · 1 comment
Owner

Originally created by @kerajel on GitHub (Dec 20, 2024).

Pre-conditions

  • Server-side Blazor application.
  • RadzenTabs component with TabRenderMode.Client.
  • RadzenChart nested within RadzenTabs.

Steps to Replicate

  1. Switch between the tabs multiple times.

Expected Results

  • Switching between tabs should render charts smoothly.

Actual Results

  • Rendering is glitchy: when switching to a tab, all chart data initially clumps up in the top left corner and then, after a split second, distributes evenly across the chart.
  • This issue only occurs with TabRenderMode.Client; TabRenderMode.Server works fine.
    Recording 2024-12-21 025202

Additional Information

Originally created by @kerajel on GitHub (Dec 20, 2024). ### Pre-conditions - Server-side Blazor application. - RadzenTabs component with `TabRenderMode.Client`. - RadzenChart nested within RadzenTabs. ### Steps to Replicate 1. Switch between the tabs multiple times. ### Expected Results - Switching between tabs should render charts smoothly. ### Actual Results - Rendering is glitchy: when switching to a tab, all chart data initially clumps up in the top left corner and then, after a split second, distributes evenly across the chart. - This issue only occurs with `TabRenderMode.Client`; `TabRenderMode.Server` works fine. ![Recording 2024-12-21 025202](https://github.com/user-attachments/assets/f4606560-bf48-4565-ae53-4df6a90cca1b) ### Additional Information - Debug website: [http://dmaltepebotov-001-site2.qtempurl.com/](http://dmaltepebotov-001-site2.qtempurl.com/) - Repository: [https://github.com/kerajel/RadzenDebugSite](https://github.com/kerajel/RadzenDebugSite) - Radzen.Blazor Version: 5.7.1
Author
Owner

@akorchev commented on GitHub (Dec 27, 2024):

RadzenChart needs to know its size to properly render. And there is some inevitable latency imposed by blazor server which causes this behavior (I don't think we can fix that). I can suggest two possible workarounds:

  1. Set the width and height of your chart in pixels - this should avoid the need of getting the size of the chart client-size: <RadzenChart style="width: 800px; height: 400px;">
  2. Use TabRenderMode.Server.
@akorchev commented on GitHub (Dec 27, 2024): RadzenChart needs to know its size to properly render. And there is some inevitable latency imposed by blazor server which causes this behavior (I don't think we can fix that). I can suggest two possible workarounds: 1. Set the width and height of your chart in pixels - this should avoid the need of getting the size of the chart client-size: `<RadzenChart style="width: 800px; height: 400px;">` 2. Use TabRenderMode.Server.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1550