Setting width and height
HtmlCsschart.jsHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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,
Solution 2 - Html
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
Solution 3 - Html
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 - Html
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
Solution 5 - Html
You can change the aspectRatio
according to your needs:
options:{
aspectRatio:4 //(width/height)
}
Solution 6 - Html
This helped in my case:
options: {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
min:0,
max:100
}
}]
}
}
Solution 7 - Html
Not mentioned above but using max-width
or max-height
on the canvas element is also a possibility.
Solution 8 - Html
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
}
}]
}
}
});
Solution 9 - Html
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
}
}
},
});
};
Solution 10 - Html
Use this, it works fine.
<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>
and under options
,
responsive:true,