Highcharts Bar Click Test

author(s): Canh Quang Nguyen

by quangcanh2975

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

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

JavaScript

const chart = Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  plotOptions: {
    column: {
      dataLabels: {
        enabled: true,
        crop: false,
        formatter: function() {
          return this.y.toFixed(0);
        },
        overflow: 'none'
      },
      cursor: 'pointer',
      pointPadding: 0.1,
      borderWidth: 0,
      colorByPoint: true,
      events: {
        click: function(event) {
          console.log(event.point.category);
        },
      },
    },
    series: {
      //allowPointSelect: true
    }
  },
  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]
  }]
});

document.getElementById('button').addEventListener('click', () => {
  const selectedPoints = chart.getSelectedPoints();

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