HighCharts onClick get column data on Stacked Column Chart

Question

I have a stacked Column chart which gives my a list of columns. Each column has a name.

What I need to is is to get the name of the column that has been clicked on.

I have a couple of alerts in the series section which is where I want to data to be called from.

Here is the code:

var chart;

$(function () {


  $.ajax({
        url: 'url here',
        method: 'GET',
        async: false,
        success: function(result) { 

            themainData = result;

        }
  });


  var mainData = [themainData];
  var chlist=[];
  var votList=[];
  var comList=[];

  for (var i = 0; i < mainData[0].cha.length; i++) {

    var obj = mainData[0].cha[i];

    var chlst = obj.name;
    var vl = obj.sta.vot;
    var cl = obj.sta.com;

    chlist.push(chlst);
    votList.push(vl); 
    comList.push(cl); 

  }


  //var chlist = ['Ch 1', 'Ch 2', 'Ch 3', 'Ch 4'];
  ////var votList = [10, 9, 8, 7];
  //var comList = [10, 9, 8, 7];

  var chart = {
      type: 'column',
   };

   var title = {
      text: 'vot and com'   
   };    

   var xAxis = {
      categories: chlist
   };

   var yAxis ={
      min: 0,
      title: {
        text: 'cha'
      },
      stackLabels: {
        enabled: true,
        style: {
           fontWeight: 'bold',
           color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
   };

   var legend = {
      align: 'right',
      x: -30,
      verticalAlign: 'top',
      y: 25,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
   }; 

   var tooltip = {
      formatter: function () {
         return '<b>' + this.x + '</b><br/>' +
            this.series.name + ': ' + this.y + '<br/>' +
            'Total: ' + this.point.stackTotal;
      }
   };

   var plotOptions = {
      column: {
         stacking: 'normal',
         dataLabels: {
            enabled: true,
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
            style: {
               textShadow: '0 0 3px black'
            }
         }
      }
   };

   var credits = {
      enabled: false
   };


   var series= [{
        name: 'vot',
        data: votList,
        events: {
            click: function (event) {

              alert('vot Here'); 
              alert ('show: '+ this.cha +', value: '+ this.y);




            }
        }
    }, {
        name: 'com',
        data: comList,
        events: {
            click: function (event) {

              alert('com Here'); 
              alert ('show: '+ this.cha +', value: '+ this.y);



            }
        }  
   }];     

   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;
   json.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;

   $('#container').highcharts(json);

  //end

});

How can I do this?

Answer 1

You can add column.point.click event callback function and inside this function alert points name using alert(this.name)

plotOptions: {
  column: {
    stacking: 'normal',
    keys: ['x', 'y', 'name'],
    point: {
      events: {
        click: function() {
          alert(this.name)
        }
      }
    }
  }
},

Here you can find an example how it can work: http://jsfiddle.net/grz4zaLc/1/