Highcharts: yAxis showing exponential values

Question

A sample of my code is here:

const chart = Highcharts.stockChart('container', {
    rangeSelector: {
        selected: 1,
        inputBoxStyle: {
            right: '80px'
        }
    },
    yAxis: [{
        type: 'logarithmic',
        tickPositioner: function () {        
        let lowestValue = this.dataMin;
        let highestValue = this.dataMax;

        if((highestValue - lowestValue) < 5 ) {
            lowestValue = this.dataMin;
            highestValue = this.dataMax;
        } else {
            lowestValue = Math.floor((this.dataMin));
            highestValue = Math.ceil((this.dataMax));
        }

        let numberOfTicks = 5;
        let positions = [];

        // first and last point are always present
        if(this.isLog) {
            positions.push(Math.log(lowestValue) / Math.log(10));
        } else {
            positions.push(lowestValue);
        }

        for(let i = 1; i < numberOfTicks; i++) {
            let eachPosition = lowestValue + (((highestValue - lowestValue)/numberOfTicks) * i);

            if(this.isLog) {
                let eachPositionAsLog = Math.log(eachPosition) / Math.log(10);

                positions.push(eachPositionAsLog);
            } else {
                // limit max decimal places to just 2
                // There is a bug with most browsers rounding of 1.005. Workaround is to add 0.00001
                eachPosition = Math.round((eachPosition + 0.00001) * 100) / 100;
                positions.push(eachPosition);
            }
        }

        // first and last point are always present
        if(this.isLog) {
            positions.push(Math.log(highestValue) / Math.log(10));
        } else {
            positions.push(highestValue);
        } 
        console.log( positions )
        return positions;
    }
    }],
    series: [{
        name: 'USD to EUR',
        data: usdeur
    }],

    exporting: {
        chartOptions: {
            chart: {
                width: 1024,
                height: 768
            }
        }
    }
});

document.getElementById('button').addEventListener('click', () => {
    chart.exportChart();
});

Here is my code block in a jsFiddle: https://jsfiddle.net/Subhabrata/h59e7qc1/12/

My Desired output should be:

I am using Highcharts/Highstock version 10.1.0. Please someone help me out. I am not able to find out what is the issue.

After my analysis I find out. Its breaking somewhere inside the highstock.js the custom tick positioner is populating correct points but its not populating in labels.

Hi @Subhabrata Banerjee, it seems that you shouldn't use `logarithmic` axis type: https://jsfiddle.net/BlackLabel/6Ljpdb52/ Could you tell me more about how the labels should behave? — ppotaczek, Jun 07 '22 at 14:30

score 1 · Accepted Answer · answered Jun 07 '22 at 21:54

Attribute isLog is no longer available. Instead use attribute logarithmic which will not be null when logarithmic turned on.

Solution:

Replace this.isLog => this.logarithmic

I fixed your fiddle. Check it out here

https://jsfiddle.net/jvinjamoori/mh5s8Ln1/

Highcharts: yAxis showing exponential values

1 Answers1