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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

150866 Jan 22,2020 11:48 AM UTC Jan 24,2020 04:03 AM UTC Blazor 3
loading
Tags: Charts
Sorin
Asked On January 22, 2020 11:48 AM UTC

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 [Syncfusion]
Replied On 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"> 
            </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
Replied On January 23, 2020 11:58 AM UTC

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

Sorin

Srihari Muthukaruppan [Syncfusion]
Replied On 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.   
   
Thanks,   
Srihari M 


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