mouse position within a range for area chart - Javascript highcharts

Javascript examples for highcharts:Area Chart

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

Description

mouse position within a range for 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"> 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
colorizeSeries = function(series, color) {
  console.log(series);
  series.color = color;
  series.graph.attr({//www  . ja  v a 2s . c om
    stroke: color
  });
  series.chart.legend.colorizeItem(series, series.visible);
}
  $(function() {
    function addCircle() {
      var chart = this;
      var circle = chart.renderer.circle(0, 0, 5).attr({
          fill: 'blue',
          stroke: 'black',
          'stroke-width': 1
        }).add()
        .toFront()
        .hide();
      $(chart.container).mousemove(function(event) {
        var normalizedEvent = chart.pointer.normalize(event);
        if (normalizedEvent.chartX > chart.series[0].data[5].plotX + chart.plotLeft) {
          circle.attr({
            x: normalizedEvent.chartX,
            y: normalizedEvent.chartY
          }).show();
        } else {
          circle.hide();
        }
      });
    }
    var chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'area',
        events: {
          load: addCircle
        }
      },
      series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
      }, {
        data: [71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 20]
      }]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials