Hide / Unhide Dataseries of Multiple Charts from Single Legend | CanvasJS JavaScript Charts

Hide / Unhide Dataseries of Multiple Charts from Single Legend | CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer1" style="height: 200px; width: 100%;"></div>
<div id="chartContainer2" style="height: 200px; width: 100%;"></div>
<div id="chartContainer3" style="height: 200px; width: 100%;"></div>

JavaScript

var dps = [
  { 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 }
];

var chart1 = new CanvasJS.Chart("chartContainer1", {
  title: {
    text: "Hiding / Unhiding DataSeries of Multiple Charts from Single Legend",
    fontFamily: "Verdana"
  },
  subtitles: [{
    text: "Click on legend item to hide/unhide dataseries",
    fontFamily: "Verdana"
  }],
  data: [{
    type: "splineArea",
    dataPoints: dps
  }]
});
chart1.render();

var chart2 = new CanvasJS.Chart("chartContainer2", {
  data: [{
    type: "spline",
    dataPoints: dps
  }]
});
chart2.render();

var chart3 = new CanvasJS.Chart("chartContainer3", {	
  legend: {
    cursor: "pointer",
    itemclick: function (e) {
      for(var i = 0; i < charts.length; i++){
        for(var j = 0; j < charts[i].data.length; j++){
          if (typeof (charts[i].data[j].visible) === "undefined" || charts[i].data[j].visible) {
            charts[i].options.data[j].visible = false;
          } else {
            charts[i].options.data[j].visible = true;
          }          
        }
        charts[i].render();
      }      
    }
  },
  data: [{
    type: "area",
    showInLegend: true,
    dataPoints: dps
  }]
});
chart3.render();

var charts = [chart1, chart2, chart3];