Chartjs-Charts.js chart size it's diferente than container setted size

by

2👍

✅

try to add 2 properties to options object:

responsive: true,
maintainAspectRatio: false

1👍

options: {
    maintainAspectRatio: false,
    responsive: true,
    scales: {
        yAxes: [{
           ticks: {
             beginAtZero: true
            }
        }]
   }
}

This will fix your issue. But it will fix the height. For width, I think you’ve to define width of the parent of canvas element like this. 

<div class="chart">
  <canvas id="myChart" height="250px"></canvas>
</div>

.chart {
  width: 250px;
}

See here for documentation.
https://www.chartjs.org/docs/latest/general/responsive.html

Leave a comment