Change width of chart.js chart without changing height
I am using a sample line chart.
When I change the width to a different value.
<div style="width:30%">
<div>
<canvas id="canvas" height="450" width="600"></canvas>
</div>
</div>
The chart grows in both height and width. I tried setting the height too, but it never works. He always makes the height big.
Does anyone know how to adjust the width while keeping the height the same?
+3
source to share
1 answer
If you are trying to make the chart fill the container (and use it for sizing) you need to support AspectRatio = false combined with responsive = true
var ctx = document.getElementById("canvas").getContext("2d");
var myLine1 = new Chart(ctx).Line(lineChartData1, {
maintainAspectRatio: false,
responsive: true
});
In this case, the height and width of the canvas will not be respected.
Fiddle - http://jsfiddle.net/s816dk83/
+2
source to share