CODEWITHSUNDEEP
angulartypescripthighchartsangular2-highcharts
s.stkvc
s.stkvc

Reputation: 147

Highcharts - not enough space for all tooltips - how to display only tooltip of hovered series? Or how to make enough room for all tooltips?

The problem is, that not all of my tooltips are currently shown on hover - see the picture of it. (the tooltip of the green series is not shown)

enter image description here

I did some research and found out, that highcharts cant show all tooltips because there is not enough space on the chart. (https://www.highcharts.com/forum/viewtopic.php?f=9&t=46219)

How do I only display the tooltip of one series at a time? for example Id like to hover over the yellow one and see only that ones tooltip. (current case is that all tooltips are being shown)

Or is there a way to make more room for the tooltips?

thanks in advance

Upvotes: 0

Views: 304

Answers (1)

Foxlab
Foxlab

Reputation: 932

FIrst check this shared parameter that should be false in order to have a tooltip for each series : https://api.highcharts.com/highcharts/tooltip.shared

You can use the tooltip attribute : outside = true In that way the html of the tooltip is built outside of the highcharts container (in fact it will be inserted at the end of your html body), then the tooltip will not be constraint by the container. (https://api.highcharts.com/highcharts/tooltip.outside)

Also if you built yourself a custom tooltip using the formatter function (https://api.highcharts.com/highcharts/tooltip.formatter) you have access to the points object and you should be able to show/hide what ever you want according to the data available.

Finally you can use useHtml = true on the tooltip options (https://api.highcharts.com/highcharts/tooltip.useHTML) in order to add class in the html returned by the tooltip formatter and depending on data. You can then manipulate the tooltip design with CSS.

Upvotes: 1

Related Questions