Setting width and height
I cannot believe nobody talked about using a relative parent element.
Code:
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="chart"></canvas>
</div>
Sources: Official documentation
You can also simply surround the chart with container (according to official doc http://www.chartjs.org/docs/latest/general/responsive.html#important-note)
<div class="chart-container">
<canvas id="myCanvas"></canvas>
</div>
CSS
.chart-container {
width: 1000px;
height:600px
}
and with options
responsive:true
maintainAspectRatio: false
You can override the canvas style width !important ...
canvas{
width:1000px !important;
height:600px !important;
}
also
specify responsive:true,
property under options..
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
update under options added : maintainAspectRatio: false,
link : http://codepen.io/theConstructor/pen/KMpqvo
In my case, passing responsive: false
under options solved the problem. I'm not sure why everybody is telling you to do the opposite, especially since true is the default.