HighCharts synchronisation tooltip effect other chart

Question

I'm using multiple highChart in a dashboard page e.g linearea, spline, pie and synchronisation of multiple charts

Set tooltip synchronisation for prototype

Highcharts.Pointer.prototype.reset = function () {
    return undefined;
};

Highcharts.Point.prototype.highlight = function (event) {
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};

But above function effect all highchart e.g linearea and spline chart etc. what I want to apply on synchronisation only

Kamil Kulig Kamil Kulig · Accepted Answer · 2017-11-28T09:59:43

Refer to this live demo: http://jsfiddle.net/kkulig/eec3mg9t/

I put every chart to a separate container - it's easier to manipulate them then. class="sync" indicates that chart should be synchronized:

<div id="container0"></div>
<div id="container1" class="sync"></div>
<div id="container2" class="sync"></div>

Then I set common events using this class:

$('.sync').bind('mousemove touchmove touchstart', function(e) {
   (...)

I applied wrapping instead of overwriting for Highcharts.Pointer.prototype.reset function so that the default action fires for unsynchronized charts.

  // Custom wrap
  Highcharts.wrap(Highcharts.Pointer.prototype, 'reset', function(proceed, allowMove, delay) {
    if (!this.chart.options.chart.isSynchronized) {
      proceed.apply(this, allowMove, delay);
    }
  });

HighCharts synchronisation tooltip effect other chart

1 Answers