Refreshing SFChart in a DashboardLayoutPanel on a window resize

[Antoine Roy-Lachance]

Hi,

I have a dashboard layout view which contains an SFChart in one of his panel. I'm currently trying to use the OnWindowResize event of DashboardLayout to rerender the Chart when the window size change. The event is successfully trigerred when I rezise the window but the render of the Chart is not adjusting properly to its new dashboardlayoutpanel size, I have to refresh the page for the Chart to render correctly. I would like to know how can I rerender my Chart so that it fits its new dashboard panel size properly after the window has resized.

Here's a sample of the codes i'm using and some screenshots of the page

Original rendering of the chart

After the window resize

[Shalini Maragathavel]

Hi Antoine, 

Greetings from Syncfusion support. 

                                                                                                                                         

We checked your query and suggest you to invoke the RefreshAsync method after Dashboard Layout component is rendered in OnAfterRenderAsync as demonstrated in the below code snippet, 

<div class="control-section"> 

    <SfDashboardLayout @ref="dashboardObject" Columns="8"   CellSpacing="@Spacing" CellAspectRatio="@Ratio"> 

       

        <DashboardLayoutPanels> 

            

            <DashboardLayoutPanel Column="0" Row="1" SizeX="4" SizeY="3"> 

                <ContentTemplate> 

                        <SfChart Height="100%" @ref="chart" Width="100%" Theme="@Theme">
                   . . . 

                       </SfChart> 

                       

                </ContentTemplate> 

            </DashboardLayoutPanel> 

               </DashboardLayoutPanels> 

    </SfDashboardLayout> 

</div> 

@code { 

    protected override async Task OnAfterRenderAsync(bool firstRender) 

    { 

        await Task.Delay(3000); // simulate the async operations 

        await chart.RefreshAsync(); 

    } 

 

} 

Please find the below sample for your reference, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-381845119-421838403.zip 

Documentation: https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started#panels-with-components 

Please get back to us if you need further assistance. 

Regards,   

Shalini M.