How to get multiple series data in tooltip highcharts?

Question

I want to display multiple series Data in tooltip on every column

tooltip: {
    formatter: function() {
        return '<span style="color:#D31B22;font-weight:bold;">' +this.series.name +': '+ this.y +'<br/>'+
               '<b style="color:#D31B22;font-weight:bold;">'+this.x +'</b><span>';
    }
},

and Data

series: [{
    showInLegend: false,
    name: 'Total Click',
    data: [3000,200,50,4000],
    color: '#9D9D9D'
}, {
    showInLegend: false,
    name: 'Total View',
    data: [100,2000,3000,4000],
    color: '#D8D8D8'
}]

I am using like this but in tool tip only one series data is showing at a time. I want to display Data like this (Total View:100 and Total Click:3000 )

hey, mohit please check my code i think this is what you need jsfiddle.net/pintu31/AcNUM/2 — Pragnesh Chauhan
– Pragnesh Chauhan, Commented Oct 11, 2013 at 10:05
Is there a way to do this without setting backgroundColor to null? This be default removes the pointer arrow stackoverflow.com/questions/42772038/… — es3735746
– es3735746, Commented Mar 13, 2017 at 20:47

Pragnesh Chauhan · Accepted Answer · 2013-10-11 10:01:34Z

35

please try using this code

updated DEMO

tooltip: {
        formatter: function() {
            var s = [];

            $.each(this.points, function(i, point) {
                s.push('<span style="color:#D31B22;font-weight:bold;">'+ point.series.name +' : '+
                    point.y +'<span>');
            });

            return s.join(' and ');
        },
        shared: true
    },

edited Oct 11, 2013 at 10:01

answered Oct 11, 2013 at 9:46

Pragnesh Chauhan

8,49410 gold badges46 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

grantiago Over a year ago

s.push('<span style="color:" '+ point.series.color +' ";font-weight:bold;">'

Sebastian Bochan · Accepted Answer · 2013-10-11 08:51:16Z

13

You need to use shared parameter http://api.highcharts.com/highcharts#tooltip.shared and then in formater iterate on each point.

answered Oct 11, 2013 at 8:51

Sebastian Bochan

37.6k3 gold badges51 silver badges75 bronze badges

Comments

Eric · Accepted Answer · 2015-10-13 04:15:42Z

3

If anybody looking for scatterplot, here is solution to show shared tooltip.

formatter: function(args) {
    var this_point_index = this.series.data.indexOf( this.point );
    var this_series_index = this.series.index;
    var that_series_index = this.series.index == 0 ? 1 : 0; // assuming 2 series
    var that_series = args.chart.series[that_series_index];
    var that_point = that_series.data[this_point_index];
    return 'Client: ' + this.point.name +
           '<br/>Client Health: ' + this.x +
           '<br/>' + this.series.name + ' Bandwidth: ' + this.y + 'Kbps' +
           '<br/>' + that_series.name + ' Bandwidth: ' + that_point.y + 'Kbps';
}

Jsfiddle link to Solution

edited Oct 13, 2015 at 4:15

Eric

6,3936 gold badges50 silver badges72 bronze badges

answered Jun 12, 2014 at 6:44

drj

3012 silver badges6 bronze badges

1 Comment

es3735746 Over a year ago

Is there a solution like this for column sharts?

Collectives™ on Stack Overflow

How to get multiple series data in tooltip highcharts?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related