show extra data in tooltips of Highchart.

Hightchart_show_extra_data.js

//live testing on http://jsfiddle.net/yqtted/9xKuR/
//shared tooltip version on http://jsfiddle.net/yqtted/WUMfB/
$(function () {
    $('#container').highcharts({
    
        series: [{
            name: "line1",
            composition: {
                "data1": [129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]
            },
            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]
        }, {
            name: "line2",
            composition: {
                "data1": [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: [129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]
        }],
        tooltip: {
            shared: false,
            formatter: function() {
                var serie = this.series;
                //NOTE: may cause efficiency issue when we got lots of points, data in series
                //should be change from [x, y] to {"x": x, "y": y, "index": index}
                var index = this.series.data.indexOf(this.point);
                var s = '<b>' + this.x + '</b><br>';
                s += '<span style="color:' + serie.color + '">' + serie.options.name + '</span>: <b>' + this.y + '</b><br/>';
                $.each(serie.options.composition, function(name, value) {
                    s += '<b>' + name + ':</b> ' + value[index] + '<br>';
                });
                return s;
            }
        }
    });
});

Exactly what I was looking for ... thanks

you are awesome , thank you very much