Can't set height as percentage, px works great

[Amos]

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

[Srihari Muthukaruppan]

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.  

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HeightIssues-170497650.zip 

  

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 

[Amos]

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

[Amos]

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.

[Amos]

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...

[Srihari Muthukaruppan]

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. 

  

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

  

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 

[Amos]

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

[Srihari Muthukaruppan]

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. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/cardcomponent-769077828.zip 

  

Screenshot: 

 

  

Kindly provide more information on the behavior of your application or the procedure to replicate the issue. 

  

Regards, 

Srihari 

[Amos]

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 {

        height: 45vh;

        display:flex;

        flex-direction: column;

        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

[Amos]

OK, I went with the refresh method and now it works ok.

Thanks a lot!

[Srihari Muthukaruppan]

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