1

I have created a line chart with these options for the yAxis:

yAxes: [{
    ticks: {
        precision: 1,
        stepSize: 18.1,
        min: 148.5,
        max: 220.9
    }
}]

I would like, therefore, the yAxis scales to be like this:

220.9
202.8
184.7
166.6
148.5

However, when I provide this code, I am getting this data.

enter image description here

Please see this fiddle for an example: https://jsfiddle.net/wxLzdrcm/

How can I make the yAxis ticks add up like I have described?

GalAbra
  • 5,048
  • 4
  • 23
  • 42
Ridge Robinson
  • 738
  • 1
  • 8
  • 19
  • 1
    The issue I see is your stepSize is not consistent with max and min, that's why you are seeing some clip at the top, try `suggestedMin` & `suggestedMax` though with this stepSize won't be effective so you need to choose between any of those `the min and max settings set explicit ends to the axes. When these are set, some data points may not be visible.` – Narkhede Tushar Jul 14 '20 at 14:46

1 Answers1

1

This question was asked at least twice (1, 2).

The solution is to use min and max values so that stepSize is a factor of max - min, allowing the chart to actually use the specified stepSize:

yAxes: [{
  ticks: {
    maxTicksLimit: 5,
    min: 144.8, // 18.1 * 8
    max: 235.3, // 18.1 * 13
    stepSize: 18.1,
  },
}]

enter image description here

An alternative would be using suggestedMin and suggestedMax rather than min and max, which allows Chart.js to calculate its own min and max:

In your case, you just need to apply:

yAxes: [{
  ticks: {
    maxTicksLimit: 5,
    suggestedMin: 148.5,
    suggestedMax: 220.9,
    stepSize: 18.1,
  },
}]
GalAbra
  • 5,048
  • 4
  • 23
  • 42
  • 1
    I had researched many questions before posting, and definitely tried some things that had helped get to this point so far -- however, I have missed the point that was described in your first SO link about how the stepSize needs to divide cleanly into the increments. Our native applications are able to use the same data, and show it fine; but it doesn't seem like an out-of-the-box solution will work from chart.js with a non-cleanly divisible stepSize – Ridge Robinson Jul 14 '20 at 15:27
  • 1
    I totally agree this is a non-intuitive behaviour of Chart.js – GalAbra Jul 15 '20 at 05:00