Setting width and height

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

Use this, it works fine.

<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>

and under options,

responsive:true,

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.

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

Not mentioned above but using max-width or max-height on the canvas element is also a possibility.

The below worked for me - but dont forget to put this in the "options" param.

var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
maintainAspectRatio: false,
responsive:true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});

This helped in my case:

options: {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
min:0,
max:100
}
}]
}
}

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 change the aspectRatio according to your needs:

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

You can create a div to wrap the canvas tag,

    <div class="wrap">
<canvas id="myChart"></canvas>
</div>


.grafico{
width: 400px !important;
}

any changes in js chart options

var myChart = new Chart(ctx, {
type: 'bar', //doughnut, bar, line, radar, pie, polarArea
data: data,
options: {


scales: {
y: {
beginAtZero: true,
stepSize: 1
}


}
},
});
};