how to get last value shown yAxis highcharts

Question

I'm eager to find out if its possible to place last value in series to yAxis in highcharts.

It supposed to be simple label with last point value shown on the right side of the charts, dinamically chanhing when we add points to the chart.

thanks!

Answer 1

There are probably several methods. One that I would use can be seen in this example:

http://jsfiddle.net/jlbriggs/zXLZA/

data: [7,12,16,32,{y:64,dataLabels:{enabled:true}}]

This makes use of the datalabels, which are enabled only for the last data point.

The downside to this is that you need to specify that in your data. Not hard to do, but may not fit your needs.

Another way would be to use a second y axis, and the tickPositions property:

http://jsfiddle.net/jlbriggs/zXLZA/4/

Answer 2

we can make use of formatter for this

here is an example to display the last value http://jsfiddle.net/kgNy4/1/

here is an example to display maximum value http://jsfiddle.net/kgNy4/

In the example I have put

dataLabels: { enabled: true }

so that formatter function will be executed

I hope this will be useful for you

Answer 3

to get the highest value in any axis and series, use the function getExtreme(). It will find you the extreme value (highest or lowest depending of the argument you put behind). Select the chart, the axis and the series before.

here's an example: (whith your chart associated to the variable 'yourChart')

var highestValue = yourChart.yAxis[0].getExtremes().dataMax;

It will return the highest value of the first Y-axis' associated series.

While this below will return the lowest of the second X-axis' associated series:

var lowestValue = yourChart.xAxis[1].getExtremes().dataMin;

Answer 4

Another possible solution is to use tickPositioner with second yAxis. In such case with dynamic data, everything will be computed itself, see: http://jsfiddle.net/3c4tU/

tickPositioner: function(min,max){
    var data = this.chart.yAxis[0].series[0].processedYData;
    //last point
    return [data[data.length-1]];
} 

Answer 5

My recommended solution:

    plotOptions: {
        areaspline: {
            fillOpacity: 0.2,
            dataLabels: {
                enabled: true,
                borderRadius: 5,
              backgroundColor: 'rgba(252, 255, 197, 0.7)',
              borderWidth: 1,
              borderColor: '#AAA',
              y: -6,
                formatter: function() {
                    if (this.x == this.series.data[this.series.data.length-1].x) {
                        return this.series.name + ': '+this.y;
                    } else {
                        return null;
                    }
                }
            }
        }
     }