我有一个由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,1)'
            },{
                data: data[1].value,label: "Ambiente 2",backgroundColor: 'rgba(89,179,102,borderColor: 'rgba(89,{
                data: data[2].value,label: "Ambiente 3",backgroundColor: 'rgba(230,137,83,borderColor: 'rgba(230,{
                data: data[3].value,label: "Ambiente 4",backgroundColor: 'rgba(243,119,171,borderColor: 'rgba(243,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'
                        }
                    }
                }]
            }
        }
    });
}