CODEWITHSUNDEEP
highcharts
John Smith
John Smith

Reputation: 25

How to attach click event function in Highcharts

I am using Pie Highchart, I want to call a function on click event. I don't want to write this function logic as below. Is it possible to call a external function here.

      plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: false
                                },
                                showInLegend: true,
                               point:{
                                  events:{
                                      click: function(oEvent){
                                        alert(oEvent.point.name);

                                      }
                                  }
                               }
                            }
                        },

This call back function will have many lines of code, so I want to define it somewhere else and call it in plotoptions. Let me know, how to achieve it

Upvotes: 2

Views: 4669

Answers (2)

User one
User one

Reputation: 21

Heading ##I have done it by using this way

plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: this.barClickedFun.bind(this)
                        }
                    }
                }

Outside function:-

 barClickedFun(data) {
       console.log(data.point.index);//data of click event, One can found point's value or index
    }

Upvotes: 2

Deep 3015
Deep 3015

Reputation: 10075

It done following way

Fiddle

 plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
        style: {
          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
        }
      },
      point: {
        events: {
          click: function(oEvent) {
            callExternalFunction(oEvent.point.name); //call function  with arguments
          }
        }
      }
    }
  },
function callExternalFunction(obj){
    console.log(obj);
}

Upvotes: 3

Related Questions