click in a series area chart below another series area chart - Javascript highcharts

Javascript examples for highcharts:Chart Series

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

Description

click in a series area chart below another series area 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"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.src.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
var chart = Highcharts.chart('container', {
  chart: {/*from w  ww. j  av a  2s .  c o m*/
    type: 'area'
  },
  plotOptions: {
    area: {
      trackByArea: true,
      events: {
        click: function(e) {
          var chart = this.chart;
          s1 = chart.series[0],
            p1 = s1.points[0],
            p2 = s1.points[1],
            x1 = p1.plotX + chart.plotLeft,
            y1 = p1.plotY + chart.plotTop,
            x2 = p2.plotX + chart.plotLeft,
            y2 = p2.plotY + chart.plotTop,
            eX = e.chartX,
            eY = e.chartY,
            // line equation: y = a*x + b
            a = (y1 - y2) / (x1 - x2),
            b = y1 - a * x1,
            val = (a * eX + b);
          if (eX >= x1 && eX <= x2 && val < eY) {
            console.log('Clicked event over Series1!');
          }
        }
      }
    }
  },
  series: [{
    data: [
      [3, 10],
      [5, 1]
    ]
  }, {
    data: [
      [0, 5],
      [10, 10]
    ]
  }]
});

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

Related Tutorials