Highcharts Highlight columns on click

by Sayham Chowdhury

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

$(function() {
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'column',
      events: {
        click: function() {
          $.each(chart.series[0].data, function(i, point) {
            point.update({
              color: '#7cb5ec'
            }, true, false);
          });
        }
      }
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
      series: {
        cursor: 'pointer',
        point: {
          events: {
            click: function() {
              for (var i = 0; i < this.series.data.length; i++) {
                this.series.data[i].update({
                  color: '#ECB631'
                }, true, false);
              }
              this.update({
                color: 'Green'}, true, false);
            }
          }
        }
      }
    },

    series: [{
      data: [239.9, 171.5, 136.4, 124.2, 245.0, 34.0, 127.6, 132.5, 34.4, 177.1, 200.6, 212.4]
    }]
  });
});