Synchronizing Axis Crosshair & Tooltip across Multiple Charts in a Page | CanvasJS JavaScript Charts

Synchronizing Axis Crosshair & Tooltip across Multiple Charts in a Page | CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<center><h3>Move Mouse Over any Chart</h3></center>
<div id="chartContainer1" style="width: 49%; height: 275px;display: inline-block;"></div>
<div id="chartContainer2" style="width: 49%; height: 275px;display: inline-block;"></div>
<div id="chartContainer3" style="width: 49%; height: 275px;display: inline-block;"></div>
<div id="chartContainer4" style="width: 49%; height: 275px;display: inline-block;"></div>

JavaScript

var charts = [],
  axisX = {
    crosshair: {
      enabled: true,
      updated: onCrosshairUpdated,
      hidden: onCrosshairHidden
    }
  },
  toolTip = {
    shared: true,
    updated: onToolTipUpdated,
    hidden: onToolTipHidden
  };
var chart1 = new CanvasJS.Chart("chartContainer1", {
  title: {
    text: "Chart 1"
  },
  axisX: axisX,
  toolTip: toolTip,
  data: [{        
    type: "column",
    name: "Chart 1",
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55 },
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
      { x: 70, y: 28 },
      { x: 80, y: 34 },
      { x: 90, y: 14 }
    ]
  }]
});
chart1.render();
charts.push(chart1);

var chart2 = new CanvasJS.Chart("chartContainer2", {
  title: {
    text: "Chart 2"
  },
  axisX: axisX,
  toolTip: toolTip,
  data: [{        
    type: "line",
    name: "Chart 2",
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55 },
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
      { x: 70, y: 28 },
      { x: 80, y: 34 },
      { x: 90, y: 14 }
    ]
  }]
});
chart2.render();
charts.push(chart2);

var chart3 = new CanvasJS.Chart("chartContainer3", {
  title: {
    text: "Chart 3"
  },
  axisX: axisX,
  toolTip: toolTip,
  data: [{        
    type: "bar",
    name: "Chart 3",
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55 },
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
      { x: 70, y: 28 },
      { x: 80, y: 34 },
      { x: 90, y: 14 }
    ]
  }]
});
chart3.render();
charts.push(chart3);

var chart4 = new CanvasJS.Chart("chartContainer4", {
  title: {
    text: "Chart 4"
  },
  axisX: axisX,
  toolTip: toolTip,
  data: [{        
    type: "area",
    name: "Chart 4",
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55 },
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
...