Highcharts Demo

author(s): Torstein Hønsi

HTML

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

JavaScript

colorizeSeries = function(series, color) {
  console.log(series);
  series.color = color;
  series.graph.attr({
    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]
      }]
    });
});