Responsive Chart

Environment

Product

Charts for Blazor

Description

When the user resizes the browser window or some layout change happens (for example, a navigation panel is expanded or collapsed), you may want to have the charts redraw with the new dimensions.

Solution

Generally, the Width and Height parameters of the chart can take values in %, and the chart will render according to the dimensions of its parent element.

This works well for the initial rendering and the chart will be "responsive" immediately according to your layout, regardless of the display (desktop, tablet, phone).

When the layout changes dynamically at runtime, you have to call its .Refresh() method. You can find an example in the following sample project: https://github.com/telerik/blazor-ui/tree/master/chart/responsive-chart