CODEWITHSUNDEEP
javascriptchartshighchartstooltippie-chart
Wim Wisselink
Wim Wisselink

Reputation: 241

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

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/

Upvotes: 0

Views: 788

Answers (1)

morganfree
morganfree

Reputation: 12472

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, e.g. 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

Upvotes: 2

Related Questions