У меня есть гистограмма, сгенерированная библиотекой chartJs. Где в этой таблице у меня есть три набора значений. Однако последняя строка справа не отображается. Что я могу сделать не так?
<div class="col-12">
<div class="card">
<canvas id="chartAvgDailyConsumReport" width="100" height="40"></canvas>
</div>
</div>

Уже пытались отключить опцию отзывчивости, отрегулируйте размер графика. Тем не менее, ни один из этих вариантов не удалось.
function setChartReportAvgDailyConsum(data){
var ctx = document.getElementById("chartAvgDailyConsumReport");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: data[0].date,
datasets: [{
data: data[0].value,
label: "Ambiente 1",
backgroundColor: 'rgba(148, 151, 247, 0.6)',
borderColor: 'rgba(148, 151, 247, 1)'
},{
data: data[1].value,
label: "Ambiente 2",
backgroundColor: 'rgba(89, 179, 102, 0.6)',
borderColor: 'rgba(89, 179, 102, 1)'
},{
data: data[2].value,
label: "Ambiente 3",
backgroundColor: 'rgba(230, 137, 83, 0.6)',
borderColor: 'rgba(230, 137, 83, 1)'
},{
data: data[3].value,
label: "Ambiente 4",
backgroundColor: 'rgba(243, 119, 171, 0.6)',
borderColor: 'rgba(243, 119, 171, 1)'
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Consumo (watts)'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Histórico do consumo médio diário dos últimos 30 dias'
},
type: 'time',
time: {
unit: 'day',
round: 'day',
displayFormats: {
day: 'D MMM'
}
}
}]
}
}
});
}