Setting width and height [closed]
I'm trying out the example code for Chart.js given in the docs.
Width and height is specified inline on the canvas element at 400px/400px.
But when rendering the chart it's blown up to full page width, and cuts off the far right end.
How/where am I supposed to control the width/height of the chart?
Solution 1:
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
Solution 2:
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