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.js"></script>

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

CSS

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

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

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

</style> <!-- http: //doc.jsfiddle.net/use/hacks.html#css-panel-hack -->
<meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

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.
*/

function highlightPoints(e) {
  const container = this;
  const charts = Highcharts.charts.slice();
  const chartIndex = charts.findIndex(chart => chart.renderTo === container);
  
  if (chartIndex > -1) {
    const chart = charts.splice(chartIndex, 1)[0];
    
    const event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
    const point = chart.series[0].searchPoint(event, true); // Get the hovered point
    
    if (point) {
      const x = point.x;
      point.highlight(e);
      
      charts.forEach(chart => {
        const points = chart.series[0].points;
        for (let i = 0; i < points.length; i = i + 1) {
          if (points[i].x === x) {
            points[i].highlight(e);
            break;
          }
        }
      })
    }
  }
}



/**
 * 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) {
  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
};

/**
 * Synchronize zooming through the setExtremes event handler.
 */
function syncExtremes(e) {
  var thisChart = this.chart;

  if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
    Highcharts.each(Highcharts.charts, function(chart) {
      if (chart !== thisChart) {
        if (chart.xAxis[0].setExtremes) { // It is null while updating
          chart.xAxis[0].setExtremes(e.min, e.max,...