Search code examples
javascripthighchartstooltip

How to get multiple series data in tooltip highcharts?


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 )


Solution

  • 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
        },