1. Home
  2. Forum
  3. Blazor
  4. Fit component height to dashboard layout panel height

Fit component height to dashboard layout panel height

I can't fit chart or grid componet to dashboard layout panel height. Chart overflow panel height.

For example

<EjsDashboardLayout CellSpacing="@(new double[]{20 ,20 })" CellAspectRatio="2" Columns="4">
    <DashboardLayoutPanels>
        <DashboardLayoutPanel>
            <ContentTemplate>
                <div style="width:100%; height:100%;">
                  <EjsChart Title="Evolución Ventas Mensual" Width="100%" Height="100%"  UseGroupingSeparator = "true">
                 ...
               </EjsChart>
             </div>
            </ContentTemplate>
...

This is the result




the chart is overlapping 2 panels. (panel with number 5 is empty).

I've tried several width and height combinations with same result.


5 Replies
SP Sowmiya Padmanaban Syncfusion Team October 31, 2019 09:47 AM UTC

Hi Emilio, 
 
Thanks for contacting Syncfusion support. 
 
We have checked your reported query that chart component does not fit with dashboard layout panel. To resolve your issue, you have to call the refresh() method of chart component during dashboard layout created() event. 
 
Refer the below code snippet to call the refresh method. 
    <EjsDashboardLayout CellSpacing="@(new double[]{20 ,20 })" Columns="4"> 
        <DashboardLayoutEvents Created="@onCreate"></DashboardLayoutEvents> 
        <DashboardLayoutPanels> 
            <DashboardLayoutPanel Row="0" Col="0" SizeX="2" SizeY="2"> 
                <ContentTemplate> 
                    <div style="height:100%;width:100%"> 
                        <EjsChart @ref="chartObj" Width="100%" Height="100%"> 
                            <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis> 
                            <ChartSeriesCollection> 
                                <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column"> 
                                </ChartSeries> 
                            </ChartSeriesCollection> 
                        </EjsChart> 
                    </div> 
                </ContentTemplate> 
            </DashboardLayoutPanel> 
      </DashboardLayoutPanels> 
</EjsDashboardLayout> 
@code { 
    EjsChart chartObj; 
      public async Task onCreate(object args) 
 
    { 
        await Task.Delay(1000); // simulate the async operations 
        this.chartObj.Refresh(); 
    } 
} 
 
 
 
For your reference, we have prepared a sample. Refer the sample link below. 
 
Please let us know, if you have any concerns. 
 
 
Regards, 
Sowmiya.P 


EM Emilio October 31, 2019 04:50 PM UTC

Sorry but your example doesn't work for me.
When I run your example



panel 1 must be same height than panel 2. Chart overflows panel's 1 height.

I've added CellApectRatio="2"  because i need little panels



SP Sowmiya Padmanaban Syncfusion Team November 1, 2019 09:50 AM UTC

Hi Emilio, 
 
Sorry for the inconvenience caused. 
 
We have checked your reported query the chart is not render properly while setting cellAspectRatio for dashboard layout. We are able to reproduce your issue from our end. We have identify the root cause for this issue, the height and width for chart component is not properly set, so the issue occurs. To set height and width for the chart component, resolve the chart component issue. While rendering the dynamic content template for dashboard layout, in that case you have to call the refresh() method for chart component until then there is no need for that. 
 
Refer the below code snippet to set the style. 
<div style="height:100%;width:100%"> 
                    <EjsChart @ref="chartObj" ID="chart"  Width="100%" Height="100%"> 
                        <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis> 
                        <ChartSeriesCollection> 
                            <ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column"> 
                            </ChartSeries> 
                        </ChartSeriesCollection> 
                    </EjsChart> 
                </div> 
<style> 
    #chart { 
        height:100%; 
        width:100%; 
    } 
</style> 
 
We have using the below package version. 
1.       Target Framework (.NetCore 3.1) 
2.       Package version(V 17.3.21) 
3.       SDK version (SDK-3.1.100-preview1) 
 
We suggest you to update the package to the latest version. For your reference, we have prepared a sample. Refer the sample link below. 
 
 
If the issue still persist, Can you please share the additional details regarding your requirement it will helpful for us to resolve your issue at earlier. 
1.       Target Framework (3.1 or 3.0) 
2.       Package version you have used. 
3.       SDK version. 
 
Please let us know, if you have any concerns. 
 
 
Regards, 
Sowmiya.P 


EM Emilio November 2, 2019 08:19 AM UTC

Now it works. Thanks.

AB Ashokkumar Balasubramanian Syncfusion Team November 4, 2019 04:45 AM UTC

Hi Emilio,  
 
We are glad to know that given solution works. Please let us know if you need any further assistance.  
 
Regards, 
Ashokkumar B. 


Loader.
Up arrow icon