Setting Width And Height

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 u

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)

<divclass="chart-container"><canvasid="myCanvas"></canvas></div>

CSS

.chart-container {
    width: 1000px;
    height:600px
}

and with options

responsive:truemaintainAspectRatio:false

Solution 3:

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.

Solution 4:

I cannot believe nobody talked about using a relative parent element.

Code:

<divclass="chart-container"style="position: relative; height:40vh; width:80vw"><canvasid="chart"></canvas></div>

Sources: Official documentation

Solution 5:

You can change the aspectRatio according to your needs:

options:{
     aspectRatio:4//(width/height)}