We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Fit component height to dashboard layout panel height

Thread ID:

Created:

Updated:

Platform:

Replies:

148699 Oct 30,2019 04:02 PM UTC Nov 4,2019 04:45 AM UTC Blazor 5
loading
Tags: Dashboard Layout
Emilio
Asked On October 30, 2019 04:02 PM UTC

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.


Sowmiya Padmanaban [Syncfusion]
Replied On 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 


Emilio
Replied On 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



Sowmiya Padmanaban [Syncfusion]
Replied On 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 


Emilio
Replied On November 2, 2019 08:19 AM UTC

Now it works. Thanks.

Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon