Angular Highchart multiple values in tooltip

Question

Im working on a highchart. The array for series looks something like this:

graphData = [{name:"Thunder", data:[['11PM',3726],['5PM',2344]]},
             {name:"Hurricane", data:[['11PM',5736].['5PM',5244]]}]

For the tooltip, if I hover over lets say 11PM on either line, i want to show data from both Thunder and Hurricane. Right now, it only shows data from the corresponding graph line.

tootlip:{
pointFormat: "{point.series.name}: {point.y:0f}"
}
series: this.graphData

Suggestions? Thanks!

ppotaczek · Accepted Answer · 2021-04-09 14:48:09Z

1

You need to enable shared tooltip:

    tooltip: {
        shared: true
    }

Live demo: http://jsfiddle.net/BlackLabel/hpkLgjbs/

API Reference: https://api.highcharts.com/highcharts/tooltip.shared

answered Apr 9, 2021 at 14:48

ppotaczek

39.3k2 gold badges20 silver badges30 bronze badges

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

4 Comments

saiftg Over a year ago

That was it. Thank you

saiftg Over a year ago

Quick ad-on question: How do I get the difference between the data (data1 - data2 for eg) and display in the shared tooltip?

ppotaczek Over a year ago

Hi @user11968622, You can use pointFormat or pointFormatter function for an individual series. Example: jsfiddle.net/BlackLabel/u152ezas

saiftg Over a year ago

Thanks friend! Much appreciated

Collectives™ on Stack Overflow

Angular Highchart multiple values in tooltip

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related