Set height of chart in Chart.js
JavascriptJquerychart.jsJavascript Problem Overview
I want to draw a horizontal bar chart with Chart.js but it keeps scaling the chart instead of using the height I assign the canvas form the script.
Is there any way to set the height of the graph from the script?
See fiddle: Jsfidle
HTML
<div class="graph">
<div class="chart-legend">
</div>
<div class="chart">
<canvas id="myChart"></canvas>
</div>
</div>
JavaScript
var ctx = $('#myChart');
ctx.height(500);
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
maintainAspectRatio: false,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
Javascript Solutions
Solution 1 - Javascript
If you disable the maintain aspect ratio in options then it uses the available height:
var chart = new Chart('blabla', {
type: 'bar',
data: {
},
options: {
maintainAspectRatio: false,
}
});
Solution 2 - Javascript
The easiest way is to create a container for the canvas and set its height:
<div style="height: 300px">
<canvas id="chart"></canvas>
</div>
and set
options: {
responsive: true,
maintainAspectRatio: false
}
Solution 3 - Javascript
Seems like var ctx = $('#myChart');
is returning a list of elements. You would need to reference the first by using ctx[0]
.
Also height is a property, not a function.
I did it this way in my code:
var chartEl = document.getElementById("myChart");
chartEl.height = 500;
Solution 4 - Javascript
You can wrap your canvas element in a parent div, relatively positioned, then give that div the height you want, setting maintainAspectRatio: false in your options
//HTML
<div id="canvasWrapper" style="position: relative; height: 80vh/500px/whatever">
<canvas id="chart"></canvas>
</div>
<script>
new Chart(somechart, {
options: {
responsive: true,
maintainAspectRatio: false
/*, your other options*/
}
});
</script>
Solution 5 - Javascript
This one worked for me:
I set the height from HTML
canvas#scoreLineToAll.ct-chart.tab-pane.active[height="200"]
canvas#scoreLineTo3Months.ct-chart.tab-pane[height="200"]
canvas#scoreLineToYear.ct-chart.tab-pane[height="200"]
Then I disabled to maintaining aspect ratio
options: {
responsive: true,
maintainAspectRatio: false,
Solution 6 - Javascript
You can also set the dimensions to the canvas
<canvas id="myChart" width="400" height="400"></canvas>
And then set the responsive options to false to always maintain the chart at the size specified.
options: {
responsive: false,
}
Solution 7 - Javascript
I created a container and set it the desired height of the view port (depending on the number of charts or chart specific sizes):
.graph-container {
width: 100%;
height: 30vh;
}
To be dynamic to screen sizes I set the container as follows:
*Small media devices specific styles*/
@media screen and (max-width: 800px) {
.graph-container {
display: block;
float: none;
width: 100%;
margin-top: 0px;
margin-right:0px;
margin-left:0px;
height: auto;
}
}
Of course very important (as have been referred to numerous times) set the following option
properties of your chart:
options:{
maintainAspectRatio: false,
responsive: true,
}
Solution 8 - Javascript
He's right. If you want to stay with jQuery you could do this
var ctx = $('#myChart')[0];
ctx.height = 500;
or
var ctx = $('#myChart');
ctx.attr('height',500);
Solution 9 - Javascript
You should use html height attribute for the canvas element as:
<div class="chart">
<canvas id="myChart" height="100"></canvas>
</div>
Solution 10 - Javascript
Set the aspectRatio property of the chart to 0 did the trick for me...
var ctx = $('#myChart');
ctx.height(500);
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
maintainAspectRatio: false,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
myChart.aspectRatio = 0;
Solution 11 - Javascript
Just to add on to the answer given by @numediaweb
In case you're banging your head against the wall because after following the instructions to set maintainAspectRatio=false
: I originally copied my code from an example I got on a website on using Chart.js with Angular 2+:
<div style="display: block">
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[colors]="chartColors"
[chartType]="chartType">
</canvas>
</div>
To make this work correctly you must remove the embedded (and unnecessary) style="display: block"
Instead define a class for the enclosing div, and define its height in CSS.
Once you do that, the chart should have responsive width but fixed height.
Solution 12 - Javascript
Needed the chart to fill the parent element 100%, rather than setting height manually, and the problem was to force parent div to always fill remaining space.
After setting responsive and ratio options (check out related chartjs doc), the following css did the trick:
html
<div class="panel">
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
</div>
scss:
.panel {
display: flex;
.chart-container {
position: relative;
flex-grow: 1;
min-height: 0;
}
}
Solution 13 - Javascript
Setting the Size of a chartjs diagram can be simply achieved by setting the with of a surrounding container:
<div style="width:400px;">
<canvas id="myChart"></canvas>
</div>
But an important detail is, that you may need to resize
your diagram after creation:
var ctx = $('#myChart');
var myChart = new Chart(ctx, {
......
data: {
........
},
options: {
responsive: false,
maintainAspectRatio: true
}
});
// now resize the new chart to fit into the canvas....
myChart.resize();
Solution 14 - Javascript
For react, doing this works:
<Doughnut
data={data}
height="200px"
width="200px"
options={{ maintainAspectRatio: false }}
/>
Solution 15 - Javascript
The problem here is that maintainAspectRatio needs to be inside the options node, not at the same level as in the example.