I'm using a highchart map in angular with custom map data and drilldown functionality. I'm capturing the drilldown event and use the addSeriesAsDrilldown function to drilldown to the next level.
Code: Select all
private handleDrilldown(event: Highcharts.DrilldownEventObject): void {
let drilldown: Map | undefined = this.maps.filter(map => map.id === (event.point as any).drilldown)[0];
if (!this.chart || !drilldown) { return; }
this.chart.currentDrilldownLevel = 1 + (this.chart.currentDrilldownLevel ?? 0);
this.chart.setTitle(null, { text: drilldown.name });
this.chart.addSeriesAsDrilldown(event.point, drilldown.series[0]);
// I'm using a custom drillup button with angular material, which is why I disable the original one here and enable my custom one.
this.chart.drillUpButton.destroy();
this.chart.drillUpButton = undefined;
this.disableDrillUp = false;
}
If I drilldown a level, then drill back up the animation works fine, however, if I drill up another time, the animation then starts at position 0,0 instead of where the country actually is set. I assume by drilling down a second time, the starting position for the drill up animation for the first drilldown is overwritten and thus reset to the default.
I've created a gif to illustrate the issue. How can I fix this?