Highchart event click runtime error in Ionic

Question

I am new on Ionic and integrated a Highchart sdk for graph. But i'm unable to click the highchart events.

My typescript file is:

import * as HighCharts from 'highcharts';

HighCharts.chart('hzdTypeTrend', {
      chart: {
        margin: [30, 0, 85, 30],
        spacingTop: 0,
        spacingBottom: 0,
        spacingLeft: 0,
        spacingRight: 0,
        type: 'line'
      },
      title: {
        text: 'Type of Hazard Trend'
      },
      legend: {
        layout: 'horizontal',
        //align: 'right',
        x: 0,
        verticalAlign: 'buttom',
        y: 90,
        floating: true,
        backgroundColor: '#FFFFFF'
      },
      credits: {
        enabled: false
      },
      xAxis: {
        categories: [this.beforeMonth, this.previousMonth, this.currentMonth]
      },
      plotOptions: {
        line: {
          dataLabels: {
            enabled: true
          },
        }
      },
      colors: [
        '#5B9BD5',
        '#5CB85C',
        '#A5A5A5',
        '#CCA300',
      ],

      series: [{
        name: 'Physical',
        data: this.haztypetrend.physical,
        cursor: 'pointer',
        point: {
          events: {
            click: function () {
              var month = this.category;
              this.filterHzdlisting('hzrdtrend', month, 66);

            }
          }
        }
      },{
        name: 'Human Factor',
        data: this.haztypetrend.humanfactor,
        cursor: 'pointer',
        point: {
          events: {
            click: function () {
            }
          }
        }
      }]
    });

public filterHzdlisting(obsGraphType: string, mnth: any, statusId_: string) {
    this.showChartView = false;
    this.showListView = true;
    console.log("statusId====== " + statusId_);
  }

When i click the highchart series events click function, i'm getting the below Runtime error,

ERROR
TypeError: this.filterHzdlisting is not a function. (In 'this.filterHzdlisting('hzrdtrend', month, 66)', 'this.filterHzdlisting' is undefined)
click — main.js:6539
(anonymous function) — vendor.js:57714:449
forEach
each — vendor.js:57712
fireEvent — vendor.js:57714:250
firePointEvent — vendor.js:57971:495
onContainerClick — vendor.js:57898:237
onclick — vendor.js:57899
H — polyfills.js:3:23956
onInvokeTask — vendor.js:5114
runTask — polyfills.js:3:10845
invokeTask — polyfills.js:3:16802
p — polyfills.js:2:27655
v — polyfills.js:2:27895

If i bind the function inside click() then it is working but unable to get the exact month. Month value is showing undefined.

Wojciech Chmiel · Accepted Answer · 2019-09-10 07:22:07Z

1

The issue is related to Highcharts callback functions. Inside click callback this points to chart series, not component object.

Try this solution:

point: {
  events: {
    click: (function(self) {
      return function() {
        // this as Highcharts series
        var month = this.category;

        // self - reference to the component object
        self.filterHzdlisting('hzrdtrend', month, 66);
      }
    })(this)
  }
}

answered Sep 10, 2019 at 7:22

Wojciech Chmiel

7,4071 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pb123 Over a year ago

Thanks for the perfect logic...its working fine dude

Collectives™ on Stack Overflow

Highchart event click runtime error in Ionic

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related