Chart.js stepSize not working with min

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/51427649/chart-js-stepsize-not-working-with-min

标签

chart.js