Chart.js is always increasing height on chart.resize() - charts

Question

I added chart.resize() inside of addData and removeData function, but it is always increasing height and it is never decreasing!
I am updating the chart when the user click on item of the menu. Some items have more than 100 datas e some others items have only 2 data and when have few data, the chart is always increasing height:
horizontalBar
Why is this happening?
<canvas id="chart"></canvas>
var chartData = {
labels: [<?php echo '"'.implode('","', $chart_labels ).'"' ?>],
datasets: [
{
data: [<?php echo implode(',', $chart_numbers ) ?>],
backgroundColor: '#184b8f',
hoverBackgroundColor: '#ef3e42'
}
]
};
var barOptions = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
enabled: false
},
hover: {
animationDuration: 0
},
legend: {
display: false
},
scales : {
xAxes : [{
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
color: '#cfcfcf'
}
} ],
yAxes : [ {
gridLines : {
display: false
},
ticks: {
fontSize: 13,
fontFamily: "'Open Sans'",
fontWeight: 600,
}
}]
},
animation: {
duration: 500,
easing: "easeOutQuart",
}
};
function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.resize();
chart.update();
}
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.resize();
chart.update();
}
var ctx = document.getElementById("chart").getContext("2d");
var myBar = new Chart(ctx, {
type: 'horizontalBar',
data: chartData,
options: barOptions
});

Answer 1

I had the same thing. You have to put an empty div around the canvas.

Answer 2

I've found some users had the same issue in this post: https://github.com/jtblin/angular-chart.js/issues/84
The solution for me was to change the chart's options to maintainAspectRatio: false.
myChart.setOptions({
responsive: true,
maintainAspectRatio: false
});

Answer 3

In laravel livewire i fixed adding wire:ignore to wrapper div
<div wire:ignore>
<div class="chart-container" style="height: 80vh; width: 80vh;">
<canvas id="bar-chart" height="800" width="1500"></canvas>
</div>
</div>

Answer 4

I was having the same issue in a Bulma tile.
The fix was to set
responsive: false in the Chart.js script options area.