Диаграмма размера элемента холста JS не соответствует ожидаемой

Question

Я создаю диаграмму, как показано ниже, используя диаграмму JS.

Я пытаюсь установить ширину холста равной 1000 пикселей, чтобы соответствовать ширине изображений диаграммы. Но есть большой разрыв слева и справа (красная область) внутри диаграммы div. Холст рисуется с шириной 1000 пикселей, а изображения - нет.

Мне неясно, почему это происходит

Пожалуйста, см. Изображение ниже.

    var graphPercentageArray = <?php echo json_encode($graphPercentageArray); ?>;

   var gasPattern = ctx.createPattern(imgGas, 'repeat-y');
   var biomassPattern = ctx.createPattern(imgBiomass, 'repeat-y');
   var windPattern = ctx.createPattern(imgWind, 'repeat-y');
   var hydroPattern = ctx.createPattern(imgHydro, 'repeat-y');
   var coalPattern = ctx.createPattern(imgCoal, 'repeat-y');
   var solarPattern = ctx.createPattern(imgSolar, 'repeat-y');
   var nuclearPattern = ctx.createPattern(imgNuclear, 'repeat-y');

var barChartData = {
            labels: ['Battery'
            ],
               datasets: [{
                label: 'Coal',
                backgroundColor: coalPattern,
                data: [coalPercentage]
            },
            {
                label: 'Gas',
                backgroundColor: gasPattern,
                data: [gasPercentage]
            },
               {
                label: 'Biomass',
                backgroundColor: biomassPattern,
                data: [biomassPercentage]
            },
               {
                label: 'Nuclear',
                backgroundColor: nuclearPattern,
                data: [nuclearPercentage]
            },
               {
                label: 'Solar',
                backgroundColor: solarPattern,
                data: [solarPercentage]
            },
               {
                label: 'Hydro',
                backgroundColor: hydroPattern,
                data: [hydroPercentage]
            },
               {
                label: 'Wind',
                backgroundColor: windPattern,
                data: [windPercentage]
            }]

        };

       var barChart = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {

                legend: {
            display: false
        },

                animation: {
                duration: 0
                }, 

                title: {
                display: false,
                },

                legendCallback: function(chart) {
  var text = [];
  text.push('<ul class="' + chart.id + '-legend">');
  for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
    text.push('<li><span style="background-color:' + 
    chart.data.datasets[0].backgroundColor[i] + '">');
      if (chart.data.labels[i]) {
      text.push(chart.data.labels[i]);
    }
    text.push('</span></li>');
  }
  text.push('</ul>');
  return text.join("");
},


                responsive: true,
                maintainAspectRatio: false,

        events: ['null'],
                    tooltips: {
                        enabled: false
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{

                               display: false,
                            stacked: true,
                           gridLines: {
                display:false
            }
                        }],
                        yAxes: [{
                             display: false,
                            stacked: true,

        gridLines: {
                display:false
            }
                        }]
                    }
                }
            });

   document.getElementById('chart-legends').innerHTML = barChart.generateLegend();

         };

CSS

 body.chart {
        background-color: rgb(255,255,0);
        font-family: avenir;
        line-height: 1.0;
        font-size: 28px;
        color: rgb(153,153,153);
        width: 1200px;
    }

#batterytop {
    background-color: rgb(0,0,0);
    width: 333px;
    padding-top: 50px;
}

#chart {
    background-color: rgb(255,0,0);
    width: 1000px;
    height: 1700px;
    padding: 0px;
    margin: 0px;
}

#chart-legends {
    float: right;
    width: 200px;
    background-color: rgb(0,255,0);
}


#canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}