Chart.js: Is it possible to make charts a fixed height?

[lizbanach]

I have tried to change the height/width on the canvas element but it still seems to stretch to full browser width/height. Is there a way to make the canvas a fixed height but maintain the responsiveness of the charts? Thank you!

[panzarino]

You can set max height on its container. Here is an example: http://codepen.io/pen?template=JXVYzq

[lizbanach]

Thank you @zachpanz88 ! That worked great. Is there a way to let the width stretch to 100% while keeping a max-height on the element? It looks awkward for me to have a max-width and max-height on these charts. See screenshot below.

[panzarino]

You can remove the max-width. If you do not set a width and height on the canvas it will be responsive without a certain aspect ratio.

[panzarino]

Closing as issue appears to be solved

[beausmith]

To get a fixed height and variable width chart…

1. remove width or height attributes from the canvas element.
2. set the desired css height on the canvas element's parent html element.
3. set chart options to include maintainAspectRatio: false,

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

[alvinyen]

@beausmith thank you for saving my day!!

[jsina]

I've done it with this code
<canvas style="width: 100% !important;height: auto !important;" id="canvas"></canvas>

[nicdnepr]

https://codepen.io/nicdnepr/pen/yLeOLdB
Who can help me with setting height to top chart directly?
I generate datasets from program and it can has more or less data
If I set big height in canvas and dataset is small, the chart is much bigger then legend
Or when small height in canvas and dataset is big, then it not display chart
I try to set height in canvas depends on dataset count, but can't find dependency