While working on my Angular project with the Highcharts API, I encountered a situation where I needed to pass a state code to a class level method after drilling down to a specific map location.
Below is the snippet of my current code:
ngOnInit() {
this.chartOptions = {
chart: {
height: (8 / 16) * 100 + '%',
events: {
drilldown(e) {
// ERROR Error: this.getVendorProductStatsByStateCode is not a function
this.getVendorProductStatsByStateCode(e.point.drilldown);
const chart = this as any;
const mapKey = 'countries/ca/' + e.point.drilldown + '-all';
const mapData = require(`@highcharts/map-collection/countries/ca/ca-on-all.geo.json`);
const provinceData = Highcharts.geojson(mapData);
provinceData.forEach((el: any, i) => {
el.value = i;
});
chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: provinceData,
dataLabels: {
enabled: true
}
});
chart.setTitle(null, { text: e.point.name });
},
drillup() {
const chart = this as any;
}
}
},
title: {
text: ''
},
colorAxis: {
min: 0,
minColor: '#E6E7E8',
maxColor: '#417BCC'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
states: {
hover: {
color: '#F8BA03'
}
}
}
},
series: [
{
name: 'Canada',
data: caMap
}
],
drilldown: {}
};
}
getVendorProductStatsByStateCode(mapstateCode) {
console.log(mapstateCode);
}
Here is the live example on StackBlitz
When invoking the drilldown function, I aim to access
this.getVendorProductStatsByStateCode