CODEWITHSUNDEEP
highchartslabeltitleseries
夏期劇場
夏期劇場

Reputation: 18325

HighCharts : Shared Tooltip with shared Data LABELS (in Series)

I have a simple HighChart here ----> jsFiddle

By having a Serie like this:

series: [{
    name: 'Cities',
    data: [
        ["Paris", 29.9], 
        ["London", 71.5], 
        ["New York", 106.4]
    ]
},
{
    name: 'Universities',
    data: [
        ["Cambridge", 17.5], 
        ["Oxford", 1.5], 
        ["MIT", 16.4]
    ]
}
]

There a shared Tooltip (a hover tooltip to display both series information in a single box) can only display the TOP NAME of the Series. Instead,

For example, it should show:

----------------------
| • Paris: 29.9     |
| • Cambridge: 17.5 |
----------------------

Or, at least it should show:

------------------------------------
| • Cities: 29.9 (Paris)           |
| • Universities: 17.5 (Cambridge) |
------------------------------------

Some thing like that.

(But now it is just showing the Serie Name)

How to do it please?

Upvotes: 0

Views: 1276

Answers (1)

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

You can use the formatter function of tooltip for this.

http://api.highcharts.com/highcharts#tooltip.formatter

Demo: http://jsfiddle.net/robschmuecker/qSfJw/2/

$(function () {
    $('#container').highcharts({
        tooltip: {
            shared: true,
            formatter: function () {
                console.log(this.points);
                return this.points[0].key + ' : ' + this.points[0].y + '<br/>' + this.points[1].key + ' : ' + this.points[1].y;
            }
        },
        series: [{
            name: 'Cities',
            data: [
                ["Paris", 29.9],
                ["London", 71.5],
                ["New York", 106.4]
            ]
        }, {
            name: 'Universities',
            data: [
                ["Cambridge", 17.5],
                ["Oxford", 1.5],
                ["MIT", 16.4]
            ]
        }]
    });
});

Upvotes: 1

Related Questions