Blazor 17.4.43 - EJS Chart - Chart height will not properly size when set to Height=100%

[Sorin]

Hello,

I'm using EjsChart and having trouble getting the height of the chart to go full screen.

For example,

• I set the chart's parent div as"height:100vh"
• vh is viewport height, making the div full screen
• I set the chart as <EjsChart Height="100%">
• According to the API "If specified as '100%, chart renders to the full height of its parent element."
• The issue is that the chart remains a height of 450px even though the parent div is 700px

This same issue used to happen with the EjsMaps component in the past, but it was fixed in the latest 17.4.43

So I'm wondering if it's the same root cause.

Thanks,

Sorin

[Srihari Muthukaruppan]

Hi Sorin, 

We have analyzed your query. From that, we would like to let you know that the chart is responsive with respect to the width and height of its parent element. Since while using EjsChart tag a dynamic div will be created for which height and width of the parent div element is not set, the chart will render with its default size(600 * 450). Hence we suggest you to use the below workaround solution to achieve your requirement. In which we have provided the required height for parent div and the style of the chart has been set to inherit to get parent size. Please find below the sample, code snippet and screenshot.  

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

 

Code Snippet: 

    <div style="height:100vh"> 

        <EjsChart Height="100%"> 

            <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category" Interval="1"> 

            </ChartPrimaryXAxis> 

            <ChartSeriesCollection> 

                <ChartSeries DataSource="@dataSource" XName="x" YName="y" Type="ChartSeriesType.Column"> 

                </ChartSeries> 

            </ChartSeriesCollection> 

        </EjsChart> 

    </div> 

    <style> 

        .e-chart { 

            height:inherit 

        } 

    </style> 

Screenshot: 

 

Let us know if you have any concerns. 

Thanks,  

Srihari 

[Sorin]

Thank you Srihari!

I could confirm that using the "height:inherit" css code fixes the problem.

Sorin

[Srihari Muthukaruppan]

Hi Sorin,  

 

Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   

   

Thanks,   

Srihari M