Chart.js ignoring canvas height and width

Question

Following the documentation of Chart.js I am trying to make a small diagram:

<canvas id="myChart" width="400" height="400"></canvas> <script> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'line', data: { labels:['15-2016','16-2016','17-2016',], datasets:[ { label:'Yes', data:[3.4884,1.1628,1.3514,], backgroundColor:'rgba(75,192,192,1)', borderColor:'rgba(75,192,192,1)', pointRadius:0 }, { label:'Maybe', data:[0.5571,1.3298,0.791,], backgroundColor:'rgba(255,206,86,1)', borderColor:'rgba(255,206,86,1)', pointRadius:0 }, { label:'No', data:[0,0,0,], backgroundColor:'rgba(255,99,132,1)', borderColor:'rgba(255,99,132,1)', pointRadius:0 } ] } }); </script> 

However, when the page is displayed, the canvas somehow becomes

 <canvas style="height: 929px; width: 929px;" id="myChart" width="1858" height="1858"></canvas> 

which waaaaay is too big for my needs. How can I set the width and height of the canvas, what do I want?

Answer 1

I was able to rigidly determine the size of the graph by disabling responsiveness:

 options: { responsive: false } 

Answer 2

I solved the problem by adding the "maintainAspectRatio: false" options to the parameters.

 options : { maintainAspectRatio: false }; 

Answer 3

Using both options, support AspectRatio: false And responsiveness: false seems to do the trick to make the chart fit the canvas in size in canvas height and width tags.