Chart.js: Fixed height charts

[tomdwyer]

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?

[nnnick]

Not really I'm afraid - the aspect ratio is set by the height and width of the original canvas element.

If you have an idea for an API for setting this as a potential improvement i'm all ears.

[davidblurton]

How about recalculating the aspect ratio before resize is called?

[BenMagyar]

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

JSFiddle Example

[nnnick]

Ah yep, sorry meant to put a note that it resolves this issue.

Filling a whole container element, and managing height of that via CSS seemed a more flexible solution than just an option to keep a fixed height when resizing.

[ghost]

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.

[Legends]

added maintainAspectRatio option (997a216). Setting it to false, along with responsive: true will redraw the canvas within a fixed height container correctly.

When I give the div container of my canvas a fixed heigth, set responsive to true and maintainaspectratio to false, what then happens is: the canvas grows in height infinitely !!! it's growing and growing and doesn't stop anymore..... boom. I am using:

• Chart.js
• http://chartjs.org/
• Version: 2.4.0

[etimberg]

@Legends do you have a fiddle for that?

[Legends]

Hm, it is not reproducable in the pen, but the chart is in my web app and when I only change the aspectratio to false and when I reload the page it grows in height infinitly. very strange.

Here is a demo

[etimberg]

In your web app, what is the CSS display property set to on the canvas? Certain styles make the width incorrectly reported per https://github.com/chartjs/Chart.js/issues/2538

[Legends]

Display:block;

The height property is getting increased infinitely

[Legends]

having a container with position relative fixes this issue, but the chart's layout is broken then.

[glavrjk]

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

[MrJohaNero]

I found this answer ( https://github.com/chartjs/Chart.js/issues/2958#issuecomment-261949718 )

I've used only the responsive and maintainAspectRatio properties and my problem was solved.
For more details click on the above link, @simonbrunel does the trick.

[LuisCamargoTI]

I found this solution https://github.com/chartjs/Chart.js/issues/2958

[s1h4d0w]

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

[kneeki]

@glavrjk That fixed my problem as well!

<canvas id="myChart" style="width: content-box;"></canvas>

[maiconkf]

@Legends i am with the same issue.. did you fixed it?

[Legends]

@maiconkf I fixed it, but I cannot remember how anymore, it was a long time ago.. sorry.

[enrimarfe]

@maiconkf I have the same issue, did you find a solution?

[dawidkowal]

@enrimarfe
var ctx = $(element)[0].getContext("2d");
ctx.canvas.height = 300;
https://stackoverflow.com/questions/40263891/canvas-static-height-chartjs

[renesansz]

@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!

[beausmith]

New example using @BenMagyar's solution with Chart.js v2.7.2…

http://jsfiddle.net/beau/9pcsu09x/

Another solution…

To get a fixed height and variable width…

• remove any width or height on the canvas element.
• set the desired css height on parent html container.
• set chart options to include maintainAspectRatio: false,

Here is a demo:
https://codepen.io/beau/pen/rvJRzb/

[ZhenyuanBo]

having a container with position relative fixes this issue, but the chart's layout is broken then.

Hey I have the same problem as you. Can you please tell me how you fixed your problem? (infinitely stretching vertically)