I have issues to get the chart.js line chart to be responsive on the height as well as the width.
See example what it should be working like:
Here is my code:
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ['January','February','March','April','May','June','July'],
datasets : [
{
label: 'My First dataset',
labelColor : '#fff',
fontColor : '#fff' ,
backgroundColor : 'rgba(220,220,220,0.2)',
borderColor : 'rgba(220,220,220,1)',
pointBackgroundColor : 'rgba(220,220,220,1)',
pointBorderColor : '#fff',
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
var options = {
maintainAspectRatio: false,
legend: {
display: false,
},
scales: {
xAxes: [{
gridLines: {
display: false,
color: '#03A5C5',
lineWidth: 8,
},
ticks: {
fontColor: "white",
},
}],
yAxes: [{
gridLines: {
display: false,
color: '#03A5C5',
lineWidth: 8,
},
ticks: {
fontColor: "white",
beginAtZero: true,
}
}]
}
};
var ctx = document.getElementById('canvas-1');
var chart = new Chart(ctx, {
responsive: true,
type: 'line',
data: lineChartData,
options: options
});
Chart.js provides a few options to enable responsiveness and control the resize behavior of charts by detecting when the canvas display size changes and update the render size accordingly.
To make chart responsive just set responsive key to true inside lineChartOptions. Also, remember to remove :width and :height properties from the element and make the wrapper element responsive via css/scss.
To set the chart size in ChartJS, we recommend using the responsive option, which makes the Chart fill its container. You must wrap the chart canvas tag in a div in order for responsive to take effect. You cannot set the canvas element size directly with responsive .
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}
<div class="chart-container">
<canvas id="canvas"></canvas>
</div>
maintainAspectRatio
set to false:options: {
maintainAspectRatio: false,
responsive: true,
...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With