Setting width and height [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
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?

Answer 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

Answer 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)
HTML
<div class="chart-container">
<canvas id="myCanvas"></canvas>
</div>
CSS
.chart-container {
width: 1000px;
height:600px
}
And with options
responsive: true
maintainAspectRatio: false

Answer 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.

Answer 4

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

Answer 5

You can change the aspectRatio according to your needs:
options:{
aspectRatio:4 //(width/height)
}

Answer 6

This helped in my case:
options: {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
min:0,
max:100
}
}]
}
}

Answer 7

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

Answer 8

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
}
}]
}
}
});

Answer 9

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
}
}
},
});
};

Answer 10

Use this, it works fine.
<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>
and under options,
responsive:true,