Chart.js - add 1 more tick step to an axis

I am drawing a bubble plot with Chart.js. Sometimes the big bubbles happen to be near the edge of the plot and get truncated. Therefore I've tried to extend the axis limit beyond the data range. The idea is like this

min_x_axis = min_x_data - (max_x_data - min_x_data) * 0.1
max_x_axis = max_x_data + (max_x_data - min_x_data) * 0.1

I do the same for the y axis. In general it works but by extending the axis 10% in each direction, the plot looks ugly. For example, before the ticks of x axis are 1,2,3. After I extend the axis, the ticks are something like this 0.87, 1, 2, 3, 3.12 which makes the plot look kind of ugly due to unevenly spaced gridline. Is there any way I can extend the tick of an axis 1 step in each direction, in this case the ticks will be 0,1,2,3,4.

The range of this plot's data changes dramatically depending on the user input so there is no way to know the tick step beforehand.

Solution

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