[Chartjs]-Chart.js – add 1 more tick step to an axis

3👍

✅

You can make use of the grace option like so:

var options = {
  type: 'bubble',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [{
        x: 0,
        y: 3,
        r: 4
      }, {
        x: -3,
        y: 1,
        r: 38
      }, {
        x: 16,
        y: -4,
        r: 18
      }],
      backgroundColor: 'pink'
    }]
  },
  options: {
    scales: {
      x: {
        grace: 1
      },
      y: {
        grace: 1
      }
    }
  }
}

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>

Grace documentation: https://www.chartjs.org/docs/master/axes/cartesian/linear.html#grace