Highcharts - append % to first axis label?

Question

When styling a chart axis, a common style in publications is to include the unit or percentage sign only on the topmost label of the Y-axis. I am trying to figure out how to do this in Highcharts.

I know I can hard-code a number, like this:

 yAxis: {
    labels: {
        formatter: function() {
            if ( this.value == 12 ) {
               return this.value + "%";
            } else {
               return this.value;
            }
        }
    },

But this is not a very flexible solution.

Is there a way to test for the first (or nth) value displayed? Is there a way to get the index of a value within the formatter function?

2013 Update

This works in most circumstances:

if ( this.value == this.axis.getExtremes().max )
    return this.value + '%';
else 
    return this.value;

However, it does not work if you have yAxis.endOnTick set to false—because in that case the maximum value of the axis is not the same as the highest label on the axis.

Is there a way to get that highest label from within the formatter function?

Answer 1

As far as I know, it isn't possible to find the 'nth' item on an axis, but first and last can be dome using the properties this.isFirst and this.isLast' in stead of checkingthis.value`

If you want to, you can also access the axis itself directly using this.axis, so you should be able to run whatever complex logic you want on the axis itself..

Answer 2

With 4.2.x version of highchart I have achieved it with following code

labels: {
    formatter: function () {
        if(this.isFirst)
            return this.value + "%";
        else
            return this.value;
        }
    }
}

Answer 3

You could also add [%] to the name of the yAxis. Then you wouldn't have to tamper with the ticks.

Answer 4

You can draw at max value plotLine and after extremes are changed - remove and add new one). Then label for that plotLine you can set as '%' and move to the left side.

Another solution is to use axis title - set it to top and remove rotation.

The last solutions (or rather workaround) is to use second yAxis, and set there min and max(or tickPositions), and show only last label, and first hide.