Highcharts Demo

author(s): Torstein Hønsi

by Nhi Nguyen

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>

<div id="container"></div>

CSS

.chart {
  min-width: 320px;
  max-width: 800px;
  height: 220px;
  margin: 0 auto;
}

JavaScript

/*
The purpose of this demo is to demonstrate how multiple charts on the same page
can be linked through DOM and Highcharts events and API methods. It takes a
standard Highcharts config with a small variation for each data set, and a
mouse/touch event handler to bind the charts together.
*/



var pick = Highcharts.pick,
  each = Highcharts.each,
  splat = Highcharts.splat;

/**
 * In order to synchronize tooltips and crosshairs, override the
 * built-in events with handlers defined on the parent element.
 */
$('#container').bind('mousemove touchmove touchstart', function(e) {
  var chart,
    point,
    i,
    event;

  for (i = 0; i < Highcharts.charts.length; i = i + 1) {
    chart = Highcharts.charts[i];
    var points = [];
    // Find coordinates within the chart
    event = chart.pointer.normalize(e.originalEvent);
    // Get the hovered point
    for (var j = 0; j < chart.series.length; j++) {
      point = chart.series[j].searchPoint(event, true);
      points.push(point);
    }
    
    
    // provide a logic for filtering points
    if(points[0] && points[1].x > 0) {
    	points.pop();
    }

    points.forEach(function(point_) {
      if (point_) {
        point_.highlight(e);
      }
    }, this);

    chart.tooltip.refresh(points);

  }
});

$('#container').bind('mouseout', function(e) {
  Highcharts.charts.forEach(function(chart) {
    chart.tooltip.hide();
    // undo point highlight
    chart.series.forEach(function(series) {
    	series.points.forEach((point) => point.setState(''));
    });
  });
});


/**
 * Override the reset function, we don't need to hide the tooltips and
 * crosshairs.
 */
Highcharts.Pointer.prototype.reset = function() {
  return undefined;
};

/**
 * Highlight a point by showing tooltip, setting hover state and draw crosshair
 */
Highcharts.Point.prototype.highlight = function(event) {
  event = this.series.chart.pointer.normalize(event);
  this.onMouseOver(); // Show the hover marker
 ...