Highcharts Demo

author(s): Torstein Hønsi

by Alain Dumesny

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>



<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Get selected points</button>

JavaScript

(function(H) {
  H.wrap(H.Point.prototype, 'select', function(proceed, realSelected, accumulate) {
  	var point = this,
    	selected = H.pick(realSelected, !point.selected);
    // proceed
    proceed.apply(point, [].slice.call(arguments, 1));
    // add event
    point.firePointEvent('afterSelectionChanged', {
      selected: selected,
      accumulate: accumulate
    });
  });
}(Highcharts))

function show_label(selectedPoints) {
  if (chart.lbl) {
    chart.lbl.destroy();
  }
  chart.lbl = chart.renderer.label(selectedPoints, 100, 60)
    .attr({
      padding: 10,
      r: 5,
      fill: Highcharts.getOptions().colors[1],
      zIndex: 5
    })
    .css({
      color: 'white'
    })
    .add();
}


var chart = Highcharts.chart('container', {
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  plotOptions: {
    series: {
      allowPointSelect: true,
      point: {
        events: {
         select: function(e) {
            console.log('select index ' + e.target.index);
            return e.target.index !== 0; // all but first point
          },
          afterSelectionChanged: function(options) {
            show_label((options.selected ? 'select' : 'unselect') + ': ' + chart.getSelectedPoints().length);
            console.log('after size: ' + chart.getSelectedPoints().length);
          }
        }
      }
    }
  },
  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]
  }]
});


// the button action
$('#button').click(function() {
  var selectedPoints = chart.getSelectedPoints();
  show_label(selectedPoints.length)
});