HighCharts Stacked Column Adding Onclick Event to the chart

debugcn Published at Dev

user6734960

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?

Barbara Laird

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

Collected from the Internet

Please contact [email protected] to delete if infringement.