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.
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;
}
}