HighCharts Stacked Column Adding Onclick Event to the chart

Question

I am working on a Highchart column chart.

I need to add an onclick event to it so I can get data back when I click on the different columns.

Here is my current full code.

var chart;

    $(function () {

      $.ajax({

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

                themainData = result;

            }
      });


      var mainData = [themainData];
      var chList=[];
      var voList=[];
      var coList=[];

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

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

        var chlst = obj.name;
        var vl = obj.st.vo;
        var cl = obj.st.co;

        chList.push(chlst);
        voList.push(vl); 
        coList.push(cl); 

      }

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

       var title = {
          text: 'Vo and Co'   
       };    

       var xAxis = {
          categories: chList
       };

       var yAxis ={
          min: 0,
          title: {
            text: 'Ch'
          },
          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: 'Vo',
                data: voList
            }, {
                name: 'Co',
                data: coList    
       }];     

       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);


    });

Where do I add the onclick event here?

Answer 1

You can add the click event on the chart, series, or point. I think it makes sense in your case to add the click event to the series.

 var series= [{
        name: 'Vo',
        data: voList
        events: {
            click: function (event) {}
        }
    }, {
        name: 'Co',
        data: coList    
   }];  

event.point is the point that is clicked on. See http://api.highcharts.com/highcharts/series%3Cbar%3E.events.click

Answer 2

This works for me,

  chart: {
    type: "bar",
  },
  title: {
    text: "Stacked bar chart",
  },
  xAxis: {
    categories: ["Apples", "Oranges", "Pears", "Grapes", "Bananas"],
  },
  yAxis: {
    min: 0,
    title: {
      text: "Total fruit consumption",
    },
  },
  legend: {
    reversed: true,
  },
  plotOptions: {
    series: {
      cursor: 'pointer',
      stacking: "normal",
      events: {
        click: function(event) {
          alert(
            this.name + ' clicked\n' +
            'Alt: ' + event.altKey + '\n' +
            'Control: ' + event.ctrlKey + '\n' +
            'Meta: ' + event.metaKey + '\n' +
            'Shift: ' + event.shiftKey
          );
        }
      }
    },
  },
  series: [{
      name: "John",
      data: [5, 3, 4, 7, 2],
    },
    {
      name: "Jane",
      data: [2, 2, 3, 2, 1],
    },
    {
      name: "Joe",
      data: [3, 4, 4, 2, 5],
    },
  ],
});```