click on one data point highlight the other data points in another chart - Javascript highcharts

Javascript examples for highcharts:Chart Data

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Data

Description

click on one data point highlight the other data points in another chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container1,//from w  ww .ja v  a2s  .com
#container2 {
   width: 400px;
   float: left;
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container1"></div> 
      <div id="container2"></div> 
      <script type="text/javascript">
Highcharts.setOptions({
  chart: {
    type: 'column'
  },
  plotOptions: {
    column: {
      cursor: 'pointer',
      allowPointSelect: true
    }
  }
});
var chart1 = Highcharts.chart('container1', {
  series: [{
    color: Highcharts.getOptions().colors[0],
    point: {
      events: {
        select: function() {
          chart2.series[0].points[this.index].select();
        }
      }
    },
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});
var chart2 = Highcharts.chart('container2', {
  series: [{
    color: Highcharts.getOptions().colors[1],
    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
  }]
});

      </script>  
   </body>
</html>

Related Tutorials