Ensure to update the code by replacing arrow functions with regular functions.
In the updated code, the assignment of chart options has been moved inside a function called init(){}, where var that = this; is declared. Additionally, the arrow function syntax ()=>{} has been replaced with function().
You can view the updated stackblitz demo Here
import { Component, OnInit, ElementRef, ViewChild} from '@angular/core';
import { Chart } from 'angular-highcharts';
import { HighchartsService } from './highcharts.service.ts'
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
@ViewChild('charts') public chartEl: ElementRef;
myOptions={};
constructor(private highcharts: HighchartsService) { }
ngOnInit(){
this.init();
this.highcharts.createChart(this.chartEl.nativeElement, this.myOptions);
}
init(){
var that = this;
this.myOptions = {
chart: {
type: 'bar',
events: {
load: function(){
var chart : any = this;
for (var j in chart.series) {
var series = chart.series[j];
for (var i in series.data) {
((i) =>{
var point = series.data[i];
if (point.graphic) {
point.graphic.on('click',(e)=>that.openDialog()
);
}
})(i)
}
}
}
},
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
};
}
public openDialog(){
console.log('open dialog, hey this works here')
}
}