Multiple pie charts in 1 graph with split tooltip Highcharts.js

Question

Currently I'm trying to create a single Highchart graph with 3 pie charts. (All charts contain exactly the same amount of datapoints). When I hover over a piece of the pie I want 3 tooltips appear on all 3 pie charts at the same given point.

I tried using

{
    tooltip: { split: true} 
} 

but throws a JavaScript error and doesn't seem to work on pie charts. I can't seem to be able to get this to work properly. I also tried redefining Highcharts.Tooltip.prototype.renderSplit but couldn't get it to work either.

I have the following: https://jsfiddle.net/Visualq/4o1uyazr/13/

Answer 1

You can create multiple tooltips on chart load event and manage them on point mouse over event.

1. Create for each series one tooltip

    Highcharts.chart('container', { chart: { type: 'pie', events: { load() { this.tooltips = this.series.slice(1).map( series => new Highcharts.Tooltip( this, Highcharts.merge(this.options.tooltip) ) ) } } }, 

2. On mouse over call tooltip.refresh(point) where point is the point which should be hovered. I call for the points with the same names.

    plotOptions: { series: { point: { events: { mouseOver(e) { const otherSeries = this.series.chart.series.filter( series => series !== this.series ) const otherPoints = otherSeries.map( series => series.points.find( point => point.name === this.name ) ) this.series.chart.tooltips.forEach((tooltip, i) => { tooltip.refresh(otherPoints[i]) }) } } } } }, 

3. Wrap tooltip's hide method so all tooltips will be hidden simultaneously.

    Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function(p, delay) { if (this === this.chart.tooltip) { p.call(this, delay) this.chart.tooltips.forEach(tooltip => { p.call(tooltip, delay) }) } }) 

live example: https://jsfiddle.net/8w30m3o8/

If you do not want tooltips to swap between series, you should assign a tooltip to a specific series, eg the main tooltip should be refreshed only with the points from the first series, the second tooltip with the points from the second series, and so on.

---

Possibly easier solution would be to use 3 charts and synchronise tooltips similarly as it is done in this example: https://www.highcharts.com/demo/synchronized-charts