Can't set height as percentage, px works great

Hi

I have the following code:
<ejs-accumulationchart height='90%'... >
The above has no effect on the chart no matter the value is.

The following code:
<ejs-accumulationchart height='350px'... >
Works great and changes according to the px value.

Am I missing something?
I tried with both pie and Pyramid.
I want it to occupy 100% of the div it resides in.
Thanks

10 Replies

SM Srihari Muthukaruppan Syncfusion Team April 9, 2020 01:33 PM UTC

Hi Amos, 
  
We have analyzed your query. From that, we would like to let you know that we can achieve your requirement by setting the height in vh (viewport Height). Based on your requirement we have also prepared a sample for reference. Please find below code snippet and sample.  
  
  
Code Snippet: 
App.Vue: 
  
 <ejs-accumulationchart  style='height: 80vh' > 
           // add your additional code here 
</ejs-accumulationchart> 
  
Screenshot: 
 
  
Let us know if you have any concerns. 
  
Regards, 
Srihari M 



AM Amos April 9, 2020 03:50 PM UTC

Thank you for your reply.

It worked but
1. Your documentation is talking about % and not vh.
2. Your documentation is talking about height property and not style='height...' property.
3. I have a card component. Inside I have a title, horizontal line and a Pyramid chart. 40vh was the right height for it while 100vh was MUCH higher than the card it was in.

Technically your solution is working, but maybe the documentation should be updated.
Thanks


AM Amos April 9, 2020 08:03 PM UTC

And now I tried the same with a column chart but things don't go as planned:
<ejs-chart :primaryXAxis='portfolioXAxis' style='height: 20vh; width: 40vh' background='transparent'>


The bottom part, x axis, is cut off. It looks like it expects to be in a certain height, otherwise it cuts off every thing below that.


AM Amos April 12, 2020 07:27 AM UTC

In the meantime, I put the chart above the other info so it can have a fixed px - this is working as expected but now the width is the problem
<ejs-chart :primaryXAxis='portfolioXAxis' :primaryYAxis='portfolioYAxis' height='200px' width='98%' background='transparent'>

I set the width to 98% and that looks great but when changing something in the code, which is causing a hot reload, the chart's width goes
off the charts, way beyond the defined width. If I change to 95% it works again until the next hot reload, then I change it back to 98% and
it works and so on...


SM Srihari Muthukaruppan Syncfusion Team April 13, 2020 12:50 PM UTC

Hi Amos, 
  
We have analyzed your query. From that, we would like to let you know that chart height and width property work fine on the reported scenario. Unfortunately, we are unable to reproduce the reported scenario. We have also attached the sample used for testing. Please find the below sample and screenshot. 
  
  
Code Snippet: 
<ejs-chart style='display:block' :height='height' :width='width'>
 </ejs-chart>
 
  // add your additional code here    
  width : '60%',
  height : '200px', 
 
  // add your additional code here 
  
Screenshot: 
 
  
If you still face this issue. Kindly revert us with more information which will be more helpful for further analysis and provide you the solution sooner. 

Regards,
 
Srihari M 



AM Amos April 13, 2020 03:15 PM UTC

When setting height/width with % what is the basis that counts as 100%?  For example I have the following:

<div class="col-xs-12 col-sm-6 col-md-3">
            <q-card class="card">
                <h5>testh5>
                <hr class="hr"/>
                    <ejs-chart :primaryXAxis='pXAxis' :primaryYAxis='pYAxis' height="200px" width='97%' background='transparent'>
                        <e-series-collection>
                            <e-series...> e-series>
                        e-series-collection>
                    ejs-chart>                    
            q-card>        
        div>       
I have width='97%' does it know that the card width is 100% and it calculates 97% out of it, or is it something else? I ask because it looks like the first rendering is done based on the card width and the next time, the render is done based on something else causing the chart to be wider than it should.

Also when that happens, if I click f12 to open the bottom panel and then f12 again to close it, the width adjust itself to the right width. It looks like a problem with the "parent" when the chart draws itself. Is there a way I can repaint the chart when rendering is over?

Thanks



SM Srihari Muthukaruppan Syncfusion Team April 14, 2020 09:32 AM UTC

Hi Amos, 
  
We have analyzed your query. From that, As stated earlier chart renders based on the parent element width and height. We have prepared a sample and also attached the screenshot for your reference. In which the chart is placed inside the Syncfusion card component and the chart size calculation is based on the card component width and height as shown. Unfortunately, we are unable to reproduce the reported scenario. We have also attached the sample used for testing. Please find the below sample and screenshot for your reference. 
  
  
Screenshot: 
 
  
Kindly provide more information on the behavior of your application or the procedure to replicate the issue. 
  
Regards, 
Srihari 



AM Amos April 14, 2020 09:52 AM UTC

Thank you for your response, the card in my case, doesn't have a width, it is calculated at runtime based on its parent.

<div class="col-xs-12 col-sm-6 col-md-3">
            <q-card class="card">

    .card {
        height45vh;
        display:flex;
        flex-directioncolumn;
        background-color#d1e2fc;
    }
I think that the chart is rendered "too early" before the card is calculated causing the chart to be wider than it should.
Is there a way for me to force the chart to repaint itself? That's what happens when I press F12 twice and then it's drawing ok.
I will simply redraw the chart when the rendering is done.
Thanks


AM Amos April 14, 2020 11:06 AM UTC

OK, I went with the refresh method and now it works ok.
Thanks a lot!


SM Srihari Muthukaruppan Syncfusion Team April 15, 2020 05:10 AM UTC

Hi Amos,  
  
Most welcome. Kindly get in touch with us, if you would require further assistance. We are always happy in assisting you.   
   
Thanks,   
Srihari M 


Loader.
Up arrow icon