Y-axis on large negative and small positive values in High Charts

Question

At first my data serie values is completely dynamic it can contain any range of values so tickAmounts or tickInterval doesn't work out for me and also adding multiple y-axis for single data series didn't help.
In my scenario issue occurred when there is some small positive values relative to large negative value so the tickInterval for y-axis is so large that small positive value does't appear on chart I have to zoom it to see values.

Here is JSFiddle link to see issue in details

Here is sample dataSerie

series: [{
        name: 'Series 1',
        data: [-348957349855, 23984323, 2938234, 7823479, 2293023]
    }]

Is there any solution to resolve this problem.

Answer 1

A solution could be to use a different yAxis type. The API show an example with negative logarithmic value. For your example :

yAxis: {
    type:'logarithmic',
    title: {
        text: 'Values'
    }
},

Fiddle

Edit : For Angular integration

nb : I'm not an Angular user, maybe this will not work

main.ts

...
import * as Highcharts from 'highcharts';

// Now add the function
(function (H) {
    // Pass error messages
    H.Axis.prototype.allowNegativeLog = true;

    // Override conversions
    H.Axis.prototype.log2lin = function (num) {
        var isNegative = num < 0,
            adjustedNum = Math.abs(num),
            result;
        if (adjustedNum < 10) {
            adjustedNum += (10 - adjustedNum) / 10;
        }
        result = Math.log(adjustedNum) / Math.LN10;
        return isNegative ? -result : result;
    };
    H.Axis.prototype.lin2log = function (num) {
        var isNegative = num < 0,
            absNum = Math.abs(num),
            result = Math.pow(10, absNum);
        if (result < 10) {
            result = (10 * (result - 1)) / (10 - 1);
        }
        return isNegative ? -result : result;
    };
}(Highcharts));
...