Chart.js stepSize not working with min

Question

min is not considered for StepSize.

including fiddle - https://jsfiddle.net/4p93aew7/10/

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 23, 15, 32, 33],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [17, 11, 25, 18, 13, 37],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 5,
          max: 40,
          stepSize: 8
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

canvas {
  background-color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

In the example, step size is 8 and min is 5, so each step should be 8 starting from 5 but it clearly isn't. How do I fix this?

Edit: For those who wants to follow this issue. Here is a github link

This looks like a typo. In your snippet you have `stepSize: 8`. Change it to `stepSize: 7` and the scale works correctly. — timclutton, Jul 20 '18 at 08:30
@KarthikNarayan Your fiddle also has a `stepSize: 8`. Again, changing it to `stepSize: 7` fixes the issue. See your [updated fiddle](https://jsfiddle.net/4p93aew7/17/). — timclutton, Jul 20 '18 at 12:20
@timclutton why is it not working for stepsize 8? I guess only 7 is working correctly. — Karthik Narayan, Jul 20 '18 at 12:25
Does this answer your question? [Chart.js yAxes Ticks stepSize not working (fiddle)](https://stackoverflow.com/questions/62897653/chart-js-yaxes-ticks-stepsize-not-working-fiddle) — GalAbra, Jul 15 '20 at 04:58

score 1 · Answer 1 · answered Jul 20 '18 at 12:35

You're forcing a min, a max, and a stepSize that don't work together. The auto-scaling algorithm is doing its best achieve what you ask, but something has to give.

If you really want it work cleanly you need to ensure the range (max-min) is cleanly divisible by the stepSize. E.g.:

40-5 = 35
35/7 = 5

5 is a whole number, so the scale will work.

35/8 = 4.375

4.375 isn't a whole number so the scale won't work.

If you make max 45 then

45-5 = 40
40/8 = 5

Again, 5 is a whole number and the scale will work.

Chart.js stepSize not working with min

1 Answers1

Linked