Chartjs-Y axis limit in Chart JS Bar chart?

by

0👍

✅

There is no limit on the y-axis (except possibly the javascript limit on the number type)

However, what you are possibly seeing might be a LOSS of precision above 9007199254740992 – which not so coincidentally is a 17 digit number (see What is JavaScript's highest integer value that a Number can go to without losing precision? and the associated problems

Chart.js uses the value range to figure out how to scale the bars. It does this by subtracting the min from the max and using the difference.

Now, if all values are same, Chart.js adds a small number (0.5) to make a difference and proceeds with this difference.

All is well and good if adding this 0.5 actually produces a difference – however if the result is above 9007199254740992, it will mostly get swallowed up by the precision limit giving a 0 difference and messing up Chart.js’s y axis calculations.

The same issue happens when the numbers are above 9007199254740992 and their difference is not large enough (they basically round up the same number -> they are treated as a set of equal values -> 0.5 is added -> it mostly get swallowed up by the precision limit)

Here’s a quick sample of values and why it will work / not work

// works because there is a (small) difference and the numbers are < 9007199254740992
var a = [9007199254740991, 9007199254740992];

// won't work because there is no difference and the numbers are > 9007199254740992 - 0.5
var b = [9007199254740992, 9007199254740992];

// won't work because there is no difference and the numbers are = 9007199254740992 - 0.5
var c = [9007199254740991.5, 9007199254740991.5];

// works because there is no difference and the numbers are < 9007199254740992 - 0.5
var d = [9007199254740991.4, 9007199254740991.4];

// works because there is a significant difference even though the numbers are > 9007199254740992
var e = [12345678901234567890, 12345678901434567891];

// works because there is a significant difference even though the numbers are > 9007199254740992
var f = [0, 12345678901434567891];

// won't work because there is only a small difference and the numbers are > 9007199254740992
var g = [9007199254740992, 9007199254740993];

In short, your bar is not rendering because you have a set of values that are same (or do not significantly differ) AND are 9007199254740992 – 0.5 or above.

You could just add a dummy value of 0 to force it to render (or possibly add another dummy series of 0 values) by making sure there is a significant difference – or if all your values are going to be in the 17 digit range and very close to each other, just plot the offset i.e. say you have 1701 and 1705… plot 1 and 5 and put in the 170 as a value prefix in the tooltip.

Leave a comment