Question

I have a spline chart with a datetime X-axis. I would like to show on the chart the most recent/last Y-axis value, by default.

All my values are currently set to be shown in a tooltip on hover, and I have no idea how to achieve this. This is a statistics per-day chart and it is updated on a daily basis, so it would be nice if the users could see quickly the most recent value on the Y-axis.

Any tips or solutions will be greatly appreciated!

Answer 1

Okay, so I’ve managed to do this using the dataLabels attribute and its formatter.

The important part is the dataLabels option. You first must set it to enabled, and then make a formatter to return the point value only when it’s the last point of your series.
The x and y values for the labels must also be edited to suit your needs (depends on the width/height of your chart container, etc.) In the example I just tried to make it readable.

Here’s the snippet :

var chart = new Highcharts.Chart({

chart: {
    renderTo: 'container'
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

plotOptions: {
    series: {
       dataLabels : {
                enabled : true,
                align : 'left',
                x : 3,
                y : 9,
                formatter : function() {
                    if (this.point.x == this.series.data[this.series.data.length - 1].x) {
                        return this.y;
                    } else {
                        return null;
                    }
                }
            }
    }
},

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
    data: [106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5]
}]

});

I’ve also made a fiddle of this solution : http://jsfiddle.net/tzEdX/