How to fit Chart when resizing the DashboardLayoutPanel

[Syncfusion Support]

Query: How to fit Chart when resizing the DashboardLayoutPanel 

Answer:  

For using onResize event to achieve chart size fit in DashboardLayoutPanel.Refresh the chart and accumulation chart on created and onResize event of the dashboard layout. Here is the code snippet for your reference.

// add additional code here    

<SfDashboardLayout @ref="dashboard" CellSpacing="@(new double[] { 10, 10 })" Columns="5" AllowResizing="true">  

  

        <DashboardLayoutEvents Created="created" OnResizeStop="resizeStop"></DashboardLayoutEvents>  

  

        <DashboardLayoutPanels>  

  

            <DashboardLayoutPanel>  

  

                <ContentTemplate>  

                    <SfChart @ref="Chart" ID="Chart1" Title="" Theme="ChartTheme.Bootstrap" Width="98%" Height="100%">  

                        <ChartEvents Load="ChartLoad" />  

                        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>  

                        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>  

                        <ChartPrimaryXAxis LabelFormat="hhtt" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" EdgeLabelPlacement="EdgeLabelPlacement.Shift" Interval="2">  

                            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>  

                        </ChartPrimaryXAxis>  

                        <ChartPrimaryYAxis Minimum="0" Maximum="100" Interval="20" EdgeLabelPlacement="EdgeLabelPlacement.Shift" LabelFormat="{value}%" Title="Percent">  

                            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>  

                            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>  

                            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>  

                        </ChartPrimaryYAxis>  

                        <ChartSeriesCollection>  

                            <ChartSeries DataSource="@ChartData" XName="xValue" YName="yValue2" Opacity="1" Name="Performance" Width="5" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line">  

                                <ChartMarker Visible="true" Height="10" Width="10" Shape="ChartShape.Circle">  

                                    <ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Top">  

                                    </ChartDataLabel>  

                                </ChartMarker>  

                            </ChartSeries>  

                        </ChartSeriesCollection>  

                        <ChartLegendSettings Visible="true" Alignment="Syncfusion.Blazor.Charts.Alignment.Center" Position="Syncfusion.Blazor.Charts.LegendPosition.Top"></ChartLegendSettings>  

                    </SfChart>  

                </ContentTemplate>  

  

            </DashboardLayoutPanel>  

  

            <DashboardLayoutPanel SizeX=2 SizeY=2 Col=1>  

  

                <ContentTemplate><div>1</div></ContentTemplate>  

  

            </DashboardLayoutPanel>  

  

            <DashboardLayoutPanel SizeY=2 Col=3>  

  

                <ContentTemplate>  

                    <SfAccumulationChart @ref="AccumulationChart" Title="Mobile Browser Statistics" EnableAnimation="false">  

                        <AccumulationChartEvents Load="BeforeRender" />  

                        <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>  

                        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>  

                        <AccumulationChartSeriesCollection>  

                            <AccumulationChartSeries DataSource="@dataSource" XName="xValue" YName="yValue" Name="Browser" Radius="@OuterRadius" StartAngle="@StartAngle" EndAngle="@EndAngle"  

                                                     InnerRadius="0%" ExplodeIndex="@ExplodeIndex" Explode="true" ExplodeOffset="@ExplodeRadius">  

                                <AccumulationDataLabelSettings Visible="true" Name="xValue" Position="AccumulationLabelPosition.Outside"></AccumulationDataLabelSettings>  

                            </AccumulationChartSeries>  

                        </AccumulationChartSeriesCollection>  

                    </SfAccumulationChart>  

                </ContentTemplate>  

  

            </DashboardLayoutPanel>  

  

            <DashboardLayoutPanel Row=1>  

  

                <ContentTemplate><div>3</div></ContentTemplate>  

  

            </DashboardLayoutPanel>  

  

        </DashboardLayoutPanels>  

 </SfDashboardLayout>  

// add additional code here    

  

void created()  

    {  

        this.Chart.Refresh();  

        this.AccumulationChart.Refresh();  

    }  

    void resizeStop()  

    {  

        this.Chart.Refresh();  

        this.AccumulationChart.Refresh();  

    }  

Find the sample for to fit Chart when resizing the DashboardLayoutPanel from here.

[Michael Aston]

In the demo below resizing the tile on the counter page does not resize the chart within the tile. See the attached video.

Is this a bug or is there another way of resizing the tile content?

Attachment: 20210423_13h39_53_905642f5.zip

[Durga Gopalakrishnan]

Hi Michael, 

  

We have ensured your reported scenario with attached sample. We have noted that OnResizeStop event is not yet declared in sample. We request you to include this event in dashboard layout. We have also attached modified sample for your reference. 

  

Code Snippet :  

  

<SfDashboardLayout @ref="dashboardObject" Columns="5" AllowResizing="true">   

    <ChildContent> 

        <DashboardLayoutEvents OnResizeStop="ResizeStop"></DashboardLayoutEvents> 

   </ChildContent> 

</SfDashboardLayout> 

  

Screenshot : 

  

 

  

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DashboardResize2031727998.zip 

  

Please revert us if you have any concerns. 

  

Regards, 

Durga G