CODEWITHSUNDEEP
highcharts
supertrue
supertrue

Reputation: 2099

Highcharts - append % to first axis label?

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?

Upvotes: 1

Views: 4466

Answers (4)

Ajhar Shaikh
Ajhar Shaikh

Reputation: 1124

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;
        }
    }
}

Upvotes: 2

Paweł Fus
Paweł Fus

Reputation: 45079

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.

Upvotes: 0

dgw
dgw

Reputation: 13656

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

Upvotes: 0

Rahul
Rahul

Reputation: 478

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..

Upvotes: 3

Related Questions