CODEWITHSUNDEEP
highcharts
ztsv
ztsv

Reputation: 880

Change first tick label on yAxis

I need change first tick label on yAxis. I changed the minimum value on the yAxis:

yAxis: [{
    title : {
        text : 'Position'
    },
    gridLineWidth: 1,
    startOnTick: false, 
    min: 1, //changed min value
    reversed: true,
}]

but the value is not shown in front yAxis. How to sign the first value in the yAxis?

Here's my chart.

if I write:

yAxis: [{
    title : {
    text : 'Позиция'
    },
    startOnTick: false, 
    showFirstLabel: true,
    min: 1,
    reversed: true, 
    tickInterval: 1,
    labels: {
          formatter: function() {
            if (this.value < 1)
                return null;
            else if (this.value == 1)
                return this.value;
            else if (this.value % 2 == 0)
                    return this.value;
        }
    }

}] then scaling yAxis turns bad for my data :( chart

Upvotes: 0

Views: 3890

Answers (2)

Jugal Thakkar
Jugal Thakkar

Reputation: 13482

You can define your own yAxis.tickPositioner to define all positions where you wish a tick should be placed.

Since in your case you don't want to override the entire behavior, but just place a tick at the min position, you can leverage the axis.getLinearTickPositions(interval, min, max) method to get the array of default positions that would be otherwise generate, and then append your additional ticks to this array.

The code below has ticks added on both the min and max of the y-axis

yAxis: {
    showFirstLabel: true,
    showLastLabel: true,
    tickPositioner: function(min, max) {
        // specify an interval for ticks or use max and min to get the interval
        var interval = Math.round((max - min) / 5);
        var dataMin = this.dataMin;
        var dataMax = this.dataMax;
        // push the min value at beginning of array
        var positions = [dataMin];
        var defaultPositions = this.getLinearTickPositions(interval, dataMin, max);
        //push all other values that fall between min and max
        for (var i = 0; i < defaultPositions.length; i++) {
            if (defaultPositions[i] > dataMin && defaultPositions[i] < dataMax) {
                positions.push(defaultPositions[i]);
            }
        }
        // push the max value at the end of the array
        positions.push(dataMax);
        return positions;
    }
}

Show tick on min and max of y axis | Highchart & Highstock @ jsFiddle
Demo of your chart @ jsFiddle

Upvotes: 2

j0nes
j0nes

Reputation: 8109

For me it seems everything is working fine. The minimum value of your reversed chart is 1, which is right on top of the y-Axis. However if you want to show this value on the axis, have a look at this post for a description.

Upvotes: 0

Related Questions