Fixed height charts

So maybe I’m doing something wrong but as far as I can gather, the responsive feature in the latest version doesn’t allow you to use fixed height charts whilst utilizing the responsive width feature.

I wanted to make a container of 100%% width and 400px height although of course chart.js responsive height overrides anyway I add.

Any quick fix for this?

Author: Fantashit

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

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

Comments are closed.