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

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


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.


3 Replies

SM Srihari Muthukaruppan Syncfusion Team January 23, 2020 10:07 AM UTC

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.  

Code Snippet: 
    <div style="height:100vh"> 
        <EjsChart Height="100%"> 
            <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category" Interval="1"> 
                <ChartSeries DataSource="@dataSource" XName="x" YName="y" Type="ChartSeriesType.Column"> 
        .e-chart { 


Let us know if you have any concerns. 


SO Sorin January 23, 2020 11:58 AM UTC

Thank you Srihari!
I could confirm that using the "height:inherit" css code fixes the problem.


SM Srihari Muthukaruppan Syncfusion Team January 24, 2020 04:03 AM UTC

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

Live Chat Icon For mobile
Up arrow icon