I am using highcharts with Angular. The functions that are provided by highcharts use "this" allowing us to access the context of the charts. Since Angular uses Typescript, you can imagine that this conflicts quite a bit because classes are used all over Angular and the "this" keyword is heavily used to access members of a given class. If the class contains a chart then it becomes difficult to use the class properties and members within the highchart function. For example consider this simple example. I am not able to use the "this.getText()" function from the class itself as "this" points to the context of the highchart function. How do I get around this?
Code: Select all
import { Component, Input } from '@angular/core';
import * as Highcharts from 'highcharts';
import { SeriesPieOptions } from 'highcharts';
@Component({
selector: 'pie-chart',
templateUrl: './pie-chart.component.html'
})
export class PieChartComponent {
Highcharts: typeof Highcharts = Highcharts; // required
chartOptions: Highcharts.Options = {
title: {
text: null,
},
chart: {
type: 'pie',
events: {
render: function () {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const chart = this as any;
const textX = chart.plotLeft + chart.series[0].center[0];
const textY = chart.plotTop + chart.series[0].center[1];
if (chart.centerText) chart.centerText.destroy();
// I can not use this here, as it points to the highchart context and not the class object. :(
const text = this.getText(); // <---------------------------------------------- Can not used this --------------------------------------
chart.centerText = chart.renderer
.text('21', textX, textY)
.css({
color: 'teal',
fontSize: 28,
fontWeight: 'bold',
})
.add();
chart.centerText.attr({
x: textX - chart.centerText.getBBox().width / 2,
});
},
},
},
};
private getCount () {
return '100'
};
}