Highcharts: Display last values from stacked chart in legend

Question

I'm implementing a stacked area chart from Highcharts. This chart has a legend which also displays the values of the different data where the mouse is. Here is my code:

$(function () {
    Highcharts.getOptions().colors[0] = "#2f7ed8";
    $('#container').highcharts({
        chart: {
            type: 'area',
            zoomType: 'x',
            marginRight: 200
        },
        title: {
            text: 'ITEMS'
        },
        xAxis: {
            type: 'datetime',
            maxZoom: 14 * 24 * 3600000, // fourteen days
            title: {
                text: null
            }
        },
        yAxis: {
            title: {
                text: 'Nombre'
            },
        },
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            labelFormat: '<span style="color:{color}">{name}</span>: <b>{point.y}</b> </n>'
        },
        plotOptions: {
            area: {
                stacking: 'normal',
                states: {
                    hover: {
                        lineWidth: 5
                    }
                },
                marker: {
                    enabled: false
                }
            }
        },
        credits: {
            enabled: false
        },

        series: [{
            pointInterval: 24 * 3600 * 1000,
            pointStart: Date.UTC(2013, 10, 08),
            name: 'ITEM1',
            color: 'rgb(0,115,174)',
            data: [301, 309, 312, 312, 312, 312, 334, 334, 335, 342, 342, 342, 343, 351, 357, 360, 363, 363, 363, 372, 379, 383, 386, 388, 388, 388, 391, 393, 396, 400, 401, 401, 401, 402, 406, 409, 409, 411, 411, 411, 416, 420, 422, 424, 425, 425, 425, 427, 428, 428, 428, 430, 430, 430, 433, 437, 437, 442, 445, 445, 445, 447, 453, 456, 460, 465, 465, 465, 470, 473, 478, 478, 481, 481, 481, 484, 486, 488, 497, 498, 498, 498, 505, 509, 512, 514, 517, 517, 517, 521, 526, 530, 532, 535, 535, 535, 543, 548, 550, 555, 559, 559, 559, 560, 564, 572, 575, 577, 577, 577, 582, 585, 590, 596, 597, 597, 597, 599, 601, 606, 608, 617, 617, 617, 623, 625, 628, 629, 630, 630, 630, 632, 633, 635, 635, 639, 639, 639, 643, 649, 651, 660, 668, 668, 668, 696, 701, 704, 708, 711, 711, 711, 717, 734, 749, 756, 768, 768, 768, 785, 801, 809, 816, 822, 822, 822, 822, 829, 840, 853, 874, 874, 874, 887, 895, 889, 889, 880, 880, 880, 904, 964]
        }, {
            pointInterval: 24 * 3600 * 1000,
            pointStart: Date.UTC(2013, 10, 08),
            name: 'ITEM2',
            color: 'rgb(249,193,8)',
            data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8, 8, 8, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 10, 14, 14, 14, 14, 15, 15, 17, 19, 19, 19, 17, 18, 20, 20, 20, 20, 20, 22, 22]
        }, {
            pointInterval: 24 * 3600 * 1000,
            pointStart: Date.UTC(2013, 10, 08),
            name: 'ITEM3',
            color: 'rgb(35,173,202)',
            data: [57, 57, 60, 60, 60, 60, 60, 60, 61, 61, 61, 61, 61, 62, 62, 62, 62, 62, 62, 63, 64, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 66, 66, 66, 66, 66, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 67, 68, 68, 68, 68, 68, 68, 68, 69, 69, 69, 69, 69, 69, 70, 71, 73, 77, 78, 78, 78, 79, 79, 79, 80, 80, 80, 80, 83, 84, 84, 85, 88, 88, 88, 88, 89, 93, 94, 94, 94, 94, 97, 98, 98, 100, 100, 100, 100, 100, 102, 102, 105, 107, 107, 107, 108, 110, 113, 113, 114, 114, 114, 115, 115, 115, 115, 117, 117, 117, 117, 119, 120, 124, 127, 127, 127, 132, 132, 132, 133, 134, 134, 134, 134, 136, 136, 136, 137, 137, 137, 137, 137, 140, 140, 141, 141, 141, 142, 147, 149, 149, 153, 153, 153, 155, 159, 163, 166, 170, 170, 170, 170, 172, 178, 185, 194, 194, 194, 189, 196, 206, 206, 211, 211, 211, 229, 231]
        }]
    });
});

I'd like the legend to display only the last values from the stacked area chart. For instance, I made a fiddle and I'd like the legend to display ITEM1: 964 ITEM2: 22 ITEM3: 231

Answer 1

This is doable using the labelFormatter.

    labelFormatter: function() {
        var lastVal = this.yData[this.yData.length - 1];
            return '<span style="color:' + this.color + '">' + this.name + ':</span> <b>' + lastVal + '</b> </n>';
    }

You have access to this which refers to the series that is going to be added to the legend. So, to get the last value you find out how many elements are in your data, then pull out that y-value and append to your formatter. This is undocumented and you could probably also do this.options.data instead. Note that if you have x/y/property formatted data (like time/value, etc) you need to explicitly tell it which data[index].XXXXXX to pick out.

DEMO.