Highcharts yAxis tick interval

1
votes

I have a line chart. The data is always indexed at 100. I want the yAxis to always start at 100. I am setting yAxis as...

yAxis: {min: 0, tickinterval: 100}

which does set my yAxis as {0,100,200,---}. it really does work for most of my data but when the numbers are huge, the tickinterval changes. it goes from {0, 5k, 10k ...}. How should i set up my interval so that 100 is always visible in the yAxis?

3
jqueryhighcharts
Are you saying that you want the yaxis to have 0, 100, 5k, 10k in the 2nd situation? Or do you want it to be 100, 5k, 10k? - Barbara Laird
i would like to have it as 0,100... but starting from 100 would work as well. I just want the number 100 to appear all time . I have found that when the numbers are high..it doesn't show 100.. - siddhipur

3 Answers

1
votes

Setting min to 100 and startOnTick to false for yAxis will work for showing that axis from 100. To ensure that tick for 100 is visible you could use tickPositioner and redefine positions for ticks.

$(function () {
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        yAxis: {
            min: 100,
            startOnTick: false,
            tickPositioner: function() {
                var oldPos = this.tickPositions,
                    len = oldPos.length,
                    pos = [100],
                    i;
                for(i = 0; i<len; i++) {
                    if(oldPos[i] > 100) {
                        pos.push(oldPos[i]);
                    }
                }
                return pos;
            }
        },

        series: [{
            data: [200,400,300, 2000,2500,5000,60000,7e7] 
        }]
    });
});

Example: http://jsfiddle.net/w14kqf4d/

The label will be formatted as 0.1k when large scale is used. To change that you could use labels' format or formatter.

0
votes

I would do this with a second axis, and using the tickPositions property.

Example here:

With higher numbers, the 100 will appear between ticks. When the tick interval is 100, the 100 from the 2nd axis will appear in front of the primary axis label, unnoticed.

Alternatively, you could also set the 2nd y axis to be opposite, and always visible on the right:

And you could also forget about a 2nd y axis, and use a plot line with a label instead:

If none of those examples work for you, you could also take a look at the tickPositioner function, and see if you can work something out with that:

-1
votes

Here is a fiddle

yAxis: {
        min: 100,
    },