Fixed height charts

6 thoughts on “Fixed height charts”

1. I was struggling with this earlier today, then came across the recently added maintainAspectRatio option (997a216). Setting it to false, along with responsive: true will redraw the canvas within a fixed height container correctly.

   JSFiddle Example

2. it took my lot of time in trying to lay the chart inside a fixed height container. Just now I found this issue, thanks!
   It would be great if maintainAspectRatio and responsive options could be made false and true by default, respectively.

3. Display:block;

   The height property is getting increased infinitely

   

4. I had the same problem with excessive high on a linechart. I discovered that the problem was that I had the width of the canvas at 100%% and I solved it by applying the property “width: content-box;” Since my canvas is inside a box block. I hope you can solve your problem in this way. I did not have to touch responsive or maintainAspectRatio, I kept them true

5. @glavrjk Thank you for that solution, it fixed it for me! I simply did this:

   <div><canvas id="totalschart" style="height:400px;width: content-box;"></canvas></div>

   With “responsive: true” and “maintainAspectRatio: false” and now it correctly displays as 400px high.

6. @enrimarfe or you can set the max-height of the canvas to limit the height calculation.
   This solved my issue with the height calculation going way high!

Comments are closed.