Line chart y-axis range is not computed correctly if the data point values are large numbers with small differences

[chihiroxc]

Expected behavior

Data points [238863224762451, 238863224762452, 238863224762453, 238863224762453] can be shown correctly.

Actual behaviour

Only the first data point is shown.

Live demo with steps to reproduce

http://jsfiddle.net/6dam1fjr/

Product version

Highcharts JS v9.2.2 (2021-08-24)

Affected browser(s)

Can be repro on Chrome/Edge, other browsers should be affected too.

[raf18seb]

Hi @chihiroxc, thanks for reporting the problem. Seems like a bug.

A little bit simpler demo: https://jsfiddle.net/BlackLabel/skx6frtj/

[KacperMadej]

The default precision is 14 and the numbers used are beyond the supported number precision.
Axis min and max are rounded to the same number - 238863224762450.
There needs to be some room for the default tick positioner logic calulations so 14 is used instead of the JavaScipt Number precision limit.

If you need to work with numbers that big you might consider using tickPositions array or maybe a different axis type would work better. Some examples:

• categories: http://jsfiddle.net/BlackLabel/w7s4xgpt/
• label format: http://jsfiddle.net/BlackLabel/w7s4xgpt/1/

I am not sure if this is a bug in Highcharts because this is based on the JavaScript Number precision limit.
@TorsteinHonsi ?

[TorsteinHonsi]

@KacperMadej If I understand the issue correctly, this happens because we set 14 as the number precision in the correctFloat function? That means that we should probably not do this operation for numbers larger than a certain threshold, as it will correct the floats wrongly and basically throw out the baby with the bathwater.

Current code:

highcharts/ts/Core/Utilities.ts

Lines 1142 to 1146 in ddb0bcb

	function correctFloat(num: number, prec?: number): number {
	return parseFloat(
	num.toPrecision(prec || 14)
	);
	}

Suggested fix:

function correctFloat(num: number, prec?: number): number {
    return num > 1e14 ? num : parseFloat(
        num.toPrecision(prec || 14)
    );
}

[chihiroxc]

@KacperMadej Thanks for providing the workaround. But the workaround doesn't suit us very well. We are using highcharts to display customers' data and it's not a very good solution to do such workaround in our product codes. The data points [238863224762451, 238863224762452, 238863224762453, 238863224762453] are all JavaScript safe numbers, it's weird that highcharts can't compute y-axis correctly, if I change one of the numbers to a bigger one the issue is gone. Like http://jsfiddle.net/wmce259g/

[TorsteinHonsi]

@chihiroxc Here's a drop-in patch that you can use until we get the bug fix into next release:

// Drop-in fix for #16275
(function(H) {
    const {
        Axis,
        correctFloat
    } = H;
    Axis.prototype.getLinearTickPositions = function(
        tickInterval,
        min,
        max
    ) {
        const tickPositions = [];

        let pos,
            lastPos,
            precision,
            roundedMin = correctFloat(Math.floor(min / tickInterval) * tickInterval),
            roundedMax = correctFloat(Math.ceil(max / tickInterval) * tickInterval);

        // When the precision is higher than what we filter out in
        // correctFloat, skip it (#6183).
        if (correctFloat(roundedMin + tickInterval) === roundedMin) {
            precision = 20;
            roundedMin = correctFloat(Math.floor(min / tickInterval) * tickInterval, precision);
            roundedMax = correctFloat(Math.ceil(max / tickInterval) * tickInterval, precision);
        }

        // For single points, add a tick regardless of the relative position
        // (#2662, #6274)
        if (this.single) {
            return [min];
        }

        // Populate the intermediate values
        pos = roundedMin;
        while (pos <= roundedMax) {

            // Place the tick on the rounded value
            tickPositions.push(pos);

            // Always add the raw tickInterval, not the corrected one.
            pos = correctFloat(
                pos + tickInterval,
                precision
            );

            // If the interval is not big enough in the current min - max range
            // to actually increase the loop variable, we need to break out to
            // prevent endless loop. Issue #619
            if (pos === lastPos) {
                break;
            }

            // Record the last value
            lastPos = pos;
        }
        return tickPositions;
    }
}(Highcharts));

View it live: https://jsfiddle.net/highcharts/bk57wv1t/

[chihiroxc]

@TorsteinHonsi Thank you!