AntonS
Posts: 3
Joined: Wed Nov 27, 2019 12:55 pm

Split of tooltip with inverted axis

Hi,

A question on Highcharts cloud, even if I my question is more related to the custom code itself.
I've managed to build a 'Population pyramid', with age classes on the vertical axis, but I'm stuck on a problem related to tooltips: I'd like to use a splited tooltip, like I did in several previous charts, to display 2 tooltips at the same time. But apparently it doesn't work in this case: only a single tootlip is displayed.

After several tries, it seems that, like here, when axes of a chart are inverted (chart: {inverted: true}), the split of the tooltip ( tooltip: {split: true}) doesn't work.
But if I set the inversion to False, my tooltip is splitted as expected. However, if I try to use the share of the tooltip instead (shared: true) it works.
Is-it a known issue? Is-there a way to overcome this?

Many thanks in advance.
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Split of tooltip with inverted axis

Hello, Anton!

Welcome to our forum, and thanks for contacting us!

The problem is that pyramid charts don’t support split tooltip functionality. Pyramid chart has not x or yAxis and because split tooltip needs those values it is impossible to make it work. The same problem comes with inverted property - according to the Highcharts API „Inverting the chart doesn’t have an effect if there are no cartesian series in the chart”.
API References: https://api.highcharts.com/highcharts/chart.inverted

Feel free to ask any further questions.

Best regards!
Mateusz Kornecki
Highcharts Developer
AntonS
Posts: 3
Joined: Wed Nov 27, 2019 12:55 pm

Re: Split of tooltip with inverted axis

Many thanks for your reply. But I probably were not clear enough and I apologize for that.

By 'Population pyramid' I mean this kind of chart (see picture attached). A horizontal bar chart with 2 series opposed: one with positive values (in pink), the other with negative data (in blue). Then a format is applied to the X axis labels to present only absolute value, so that the blue serie seems also positive.

Here you can see that only 1 tooltip is displayed, despite the split parameter of the tooltip set to 'true'.
Pyramid ages.png
Pyramid ages.png (22.83 KiB) Viewed 6081 times

However, if I just not 'invert' the same chart (chart: {inverted: false}), so that my bar chart becomes a column chart, you can see that both tooltips are displayed. Is-it more clear?
Pyramid ages 2.png
Pyramid ages 2.png (39.76 KiB) Viewed 6081 times
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Split of tooltip with inverted axis

Hi,

I’m sorry that I misunderstood you.

Unfortunately, this is happening because tooltip.split is not implemented for inverted charts. Have you tried tooltip.shared? It is working with an inverted chart, and it will let you display all data in one tooltip.
API References: https://api.highcharts.com/highcharts/tooltip.shared
Live demo: https://jsfiddle.net/BlackLabel/drj56kp7/

If you want us to add split tooltip in the future releases of the Highcharts you can report it here: https://highcharts.uservoice.com/

Let me know if you have any further questions!

Best regards.
Mateusz Kornecki
Highcharts Developer
AntonS
Posts: 3
Joined: Wed Nov 27, 2019 12:55 pm

Re: Split of tooltip with inverted axis

Thanks for this explanation.
Yes I already tried the tooltip.shared but in my current project presenting 2 pyramids in the same container (see below), the tooltip seems a bit crowded with the 4 series. I'll try to arrange this with the 'formatter: function' but I would prefer 4 separate tooltips.

So I'll probably follow your link and will request to implement the tooltip.split for inverted charts.
Thanks again.

Best regards,
Pyramid.jpg
Pyramid.jpg (89.4 KiB) Viewed 6075 times

Return to “Highcharts Cloud”