Javascript callbacks in Typescript. Accessing both class members and javascript 'this' parameter

Question

I am using an Angular wrapper for a library called HighCharts. There is a callback for when I hover over the chart which is a javascript callback. The this parameter of this javascript function provides me with data that I need but I also would like to access my typescript class variables using the typescript this keyboard.

const options: Highcharts.Options = {
  chart: {
    type: 'column'
  },
  title: {
    text: null
  },
  tooltip: {
      borderWidth: 0,
      style: {
          padding: 0
      },
      useHTML: true,
      formatter: function() {
          return '<div style="float:left">' +
        '<small>Hour ' + this.point.x + '</small>' +
        '</div>' +
        '<div style="float:left;">Production: <b>' + this.point.y + '%</b></div>' +
        '<div style="float:left;">Yield: <b>' + this.yieldCurrent + '%</b></div>' +
        '<div style="float:left;">Reject: <b>' + this.rejectCurrent + ' pcs.</b></div>' +
        '<div style="float:left;">Uptime: <b>' + this.uptimeCurrent + '%</b></div>';
      }
   }
}

If I use the funtion() {} I can access the this provided by highcharts.

If I use the fat arrow () => I can access the this provided by my class.

How Can I access both of these parameters inside the callback? I need to access this.point from highcharts and this.yieldCurrent, this.rejectCurrent, this.uptimeCurrent from my class.

Answer 1

You can save the component reference in the chart object and then use it inside tooltip.formatter function.

Save component reference in component constructor:

  constructor() {
    const self = this;

    self.chartCallback = chart => {
      self.chart = chart;
      chart.chartComponent = self;
    };
  }

Use it in the tooltip.formatter:

tooltip: {
  formatter: function() {
    const chart = this.series.chart,
      chartComponent = chart.chartComponent;

    return this.y + " - " + chartComponent.yourProperty;
  }
}

Demo: https://codesandbox.io/s/vmvylr0v2y

Answer 2

You could reference the this object of your class to some variable and then use it inside the formatter funciton.

Initialize a const somewhere on the top or in the constructor like this

const self = this;

Then use it wherever you want it, inside the code where this object has changed.

const options: Highcharts.Options = {
  chart: {
    type: 'column'
  },
  title: {
    text: null
  },
  tooltip: {
      borderWidth: 0,
      style: {
          padding: 0
      },
      useHTML: true,
      formatter: function() {
          return '<div style="float:left">' +
        '<small>Hour ' + this.point.x + '</small>' +
        '</div>' +
        '<div style="float:left;">Production: <b>' + this.point.y + '%</b></div>' +
        '<div style="float:left;">Yield: <b>' + self.yieldCurrent + '%</b></div>' +
        '<div style="float:left;">Reject: <b>' + self.rejectCurrent + ' pcs.</b></div>' +
        '<div style="float:left;">Uptime: <b>' + self.uptimeCurrent + '%</b></div>';
      }
   }
}

Hope this helps