[Chartjs]-Strange "padding" at chart area after updating chart.js (2.8.0 -> 3.4.1)

by

1👍

✅

This behaviour comes from the offset options, this option is in the scale so bars dont render on the gridLines but they show nicely between them. As the documentation states bar charts automatically set this option to true while by default it is false:https://www.chartjs.org/docs/master/axes/cartesian/#common-options-to-all-cartesian-axes

You can manually override this to be false but then the first and last bar in that chart will look weird since they get rendered at half width:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'red',
        backgroundColor: 'red'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        type: 'bar',
        backgroundColor: 'blue'
      }
    ]
  },
  options: {
    scales: {
      x: {
        offset: false
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>

Leave a comment