A helpful guide on invoking a TypeScript function within a Highcharts click event

Question

A helpful guide on invoking a TypeScript function within a Highcharts click event

MyCustomHighChart.ts

export class MyCustomHighChart {
    highchartsConfiguration: any = {
        chart: {
            events: {
                click(event) {
                    if (!($(event.target)[0].textContent)) {
                        console.log('clicked'); //this message is being displayed
                        this.callDrillDown(); // Is it possible to invoke a TypeScript function here?
                    }
                },
            },
        }
    };  

    callDrillDown() {
      console.log('calling drill down method');
    }
}

Is there a way to trigger a typescript function within a high charts click event?

I encountered the following error

Error Stack : TypeError: this.callDrillDown is not a function

angular typescript charts highcharts this

Answer 1

Answer №1

For maintaining the same context (this) in the click handler, it is necessary to use an arrow function.

The code snippet would appear as follows:

export class MyHighChartComponent {
    highchartsConfiguration: any = {
        chart: {
            events: {
                click : (e) => {
                    if (!($(event.target)[0].textContent)) {
                        console.log('clicked'); //this is printing
                        this.drillDown(); // how to call typescript function here?
                    }
                },
            },
        }
    };  

    drillDown() {
      console.log('drill down method called');
    }
}

If you require access to both the chart context and the class context, you can manually store the class context in a variable (like you did before arrow functions existed).

class MyHighChartComponent {
  public highchartsConfig() {
    var that = this; // store this in a variable to use later
    return {
      chart: {
        events: {
          click: function(e) {
            if (!($(event.target)[0].textContent)) {
              console.log('clicked');
              // this variable now stores the chart
              // call methods on class using the that variable
              that.drillDown();
            }
          },
        },
      }
    };

  }
  public drillDown() {}
}

Answer 2

For maintaining the same context (this) in the click handler, it is necessary to use an arrow function.

The code snippet would appear as follows:

export class MyHighChartComponent {
    highchartsConfiguration: any = {
        chart: {
            events: {
                click : (e) => {
                    if (!($(event.target)[0].textContent)) {
                        console.log('clicked'); //this is printing
                        this.drillDown(); // how to call typescript function here?
                    }
                },
            },
        }
    };  

    drillDown() {
      console.log('drill down method called');
    }
}

If you require access to both the chart context and the class context, you can manually store the class context in a variable (like you did before arrow functions existed).

class MyHighChartComponent {
  public highchartsConfig() {
    var that = this; // store this in a variable to use later
    return {
      chart: {
        events: {
          click: function(e) {
            if (!($(event.target)[0].textContent)) {
              console.log('clicked');
              // this variable now stores the chart
              // call methods on class using the that variable
              that.drillDown();
            }
          },
        },
      }
    };

  }
  public drillDown() {}
}

A helpful guide on invoking a TypeScript function within a Highcharts click event

Answer №1

Similar questions

Implementing a Set polyfill in webpack fails to address the issues

Is there a way to conceal 'private' methods using JSDoc TypeScript declarations?

Strict mode error occurs when attempting to assign a value to ngComponentOutlet that is incompatible with the type of the lazy-loaded component

Angular2/TypeScript Coding Guidelines

Securing JWT signatures for both server-side and client-side environments

Incorporating essential npm packages into an Angular2 project

Create various Angular applications using PowerShell for efficient development

`How can I eliminate all duplicate entries from an array of objects in Angular?`

How to Manually Update the Angular Release Version in your environment.ts File using the CLI

The Type X is lacking essential properties found in Type Y, including length, pop, push, concat, and an additional 26 more properties. Code: [2740]

Refining strings to enum keys in TypeScript

Enforcing Type Safety on String Enums in Typescript Using the 'const' Assertion

Issue encountered while attempting to run an Angular project using the CLI: "Module not found - Unable to resolve 'AngularProjectPath' in 'AngularProjectPath'"

Setting up Angular 2 for Highcharts: A Comprehensive Guide

Issue encountered in Angular 7 regarding event handling in the parent component

Transform React class components into function components

What is the process of declaring a method within a subclass and then retrieving it from a method within the parent class using Typescript?

Disabling flow control to test an Angular app in Protractor results in an error being generated

Please indicate the generator title (for example, nx generate @nrwl/workspace:library) specifically for Angular

Incorporate TypeScript into your React projects for improved type