Upgrade causes error when using multiple addSeriesAsDrilldown()

[pthomasjoby]

For general tech support, please see www.highcharts.com/support.
Please report only issues about highcharts-angular wrapper or content of this repository.
For general issues with Highcharts and TypeScript the correct repository to report such issues is main Highcharts repository.

Describe the bug

As part of the Angular tech stack upgrade, due to dependency to Ivy, I was forced to upgrade the Highcharts and Highcharts-Angular as follows:
highcharts: 6.2.0 >> 9.3.3
highcharts-angular: 2.10.0 >> 3.1.2
This resulted in a bug which does not allow calling addSeriesAsDrilldown() multiple times in a look. It worked in the previous version.

Expected behavior

Expected the drill down continue to work with multiple series.

Demo

Please provide live demo of the problem or provide any other way to recreate the problem.

Steps required to recreate the problem in the demo:

1. ...

Setup used

• NodeJS version ...
• Angular version ...
• TypeScript version ...
  etc.

[pthomasjoby]

[pthomasjoby]

See the Highcharts definition:
`
this.chartOptions = {
chart: {
type: "column",
events: {
drilldown: function (e) {
componentContext.prepareDrilldownData(e.point.series.name);
componentContext.isDrilldown = true;
this.addAxis(componentContext.yearMonths);
componentContext.chartName = "Expense by Expenditure Type";
this.hideLoading();
for (let i = 0; i < componentContext.chartExpTypesCurrent.length; i++) {
// console.log(componentContext.chartExpTypesCurrent[i]);
// THIS IS WHERE THE ERROR HAPPENS
// ERROR WHEN THE SECOND TIME THE FOLLOWING CODE EXECUTES.
this.addSeriesAsDrilldown(e.point, componentContext.chartExpTypesCurrent[i]);
}
highChartContext = this;
this.setTitle({ text: componentContext.chartName });
},
drillup: function (e) {
componentContext.isDrilldown = false;
componentContext.chartName = "Monthly Expense by Expenditure Category";
this.setTitle({ text: componentContext.chartName });
}
},
zoomType: "x",
panKey: "shift",
},
title: {
text: "Expense Title",
},
xAxis: {
categories: this.yearMonths,
},
yAxis: {
title: {
text: "Dollars",
},
stackLabels: {
enabled: true,
style: {
fontWeight: "bold",
color:
(Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color) ||
"black",
},
formatter: function () {
return Math.round(this.total).toLocaleString();
},
},
},
legend: {
align: "center",
x: -30,
verticalAlign: "bottom",
y: 15,
floating: false,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || "white",
borderColor: "#CCC",
borderWidth: 1,
shadow: false,
},
tooltip: {
headerFormat: "{point.x}
",
pointFormat:
'● {series.name}: {point.y:,.0f}
● Total: {point.stackTotal:,.0f}',
style: {
color: "black",
},
valueDecimals: 0,
},
plotOptions: {
column: {
stacking: "normal",
events: {
legendItemClick: () => {
// console.log("Clicked...");
this.zone.run(() => {
this.selection = "Selection";
});
},
},
},
},
series: this.chartExpCats as Highcharts.SeriesOptionsType[],
};

`

[karolkolodziej]

Hi @pthomasjoby!
There are a few things missing and I'm not able to recreate it. Could you please update the demo with your config so I can work on it?

[pthomasjoby]

@karolkolodziej I have tried to create the stackblitz based on my component with the stack that you had created for me (https://stackblitz.com/edit/highcharts-angular-line-u8rfrs):
Angular 16, "highcharts": "^11.2.0", "highcharts-angular": "^4.0.0". Please click on the Load Data button at the top of the page to load the data.
For some reason the drilldown does not work (click event is not registering). Also, error (Property 'addSeriesAsDrilldown' does not exist on type 'Chart'.) is shown when trying to add the following line within the drilldown event:
this.addSeriesAsDrilldown(e.point, componentContext.chartExpTypesCurrent[i]);
Please note, I am in the version
Angular 16 "highcharts": "^9.3.3", "highcharts-angular": "^3.1.2"

It worked like a charm in the following version:
Angular 13 "highcharts": "^6.2.0", "highcharts-angular": "^2.10.0"

[karolkolodziej]

I simplified your demo and it turned out that you are not using highcharts-angular package.
Nevertheless, I cannot see any error when clicking the point.
See the demo.

[pthomasjoby]

HighChartBug3.mov

[pthomasjoby]

@karolkolodziej Thank you for refactoring the code. I have updated the dataset to add one more sub series to the top series "54000 INTERDEPARTMENTAL". They are "54051 User Credits" and "54051 User Credits1". So, when you click on the top series "54000 INTERDEPARTMENTAL" the chart should drilldown to another stacked column with two series "54051 User Credits" and "54051 User Credits1". However the second series is failed to add. See the attached video and the code - https://stackblitz.com/edit/highcharts-angular-line-4m6yxp

[pthomasjoby]

@karolkolodziej This functionality worked like a charm in the following version:

• Angular 13
• highcharts: "^6.2.0"
• highcharts-angular: "^2.10.0"

[karolkolodziej]

@pthomasjoby I checked that with 6.2.0 and it works the same. Also there is a lot of custom code and it's difficult for me to go through it.
Please ensure you use the correct series in the addSeriesAsDrilldown method.
If possible please simplify it and recreate without Angular, you can start from the demo.

[pthomasjoby]

@karolkolodziej I have recreated the issue based on your template:
https://jsfiddle.net/jobythomas/Lwam849t/83/
When you click on 'Animals', it is only adding 'Elephant' series and does not add 'Horse Series'. Same with 'Birds' series.

[karolkolodziej]

Your data isn't declared properly, there should be only one series for each category (animals and fruits) and the data inside it should contain all the points- see demo.

            drilldowns = {
              Animals: {
                name: 'Animals',
                data: [
                  ['Cows', 2],
                  ['Sheep', 3]
                ]
              },
              Fruits: {
                name: 'Fruits',
                data: [
                  ['Apples', 5],
                  ['Oranges', 7],
                ]
              },
            },

[pthomasjoby]

@karolkolodziej well, my need is to have multiple series in each category. Having the ability to call multiple times "addSeriesAsDrilldown()" enabled this functionality in version (Angular 13, highcharts: "^6.2.0", highcharts-angular: "^2.10.0"). When upgraded the ability to add multiple series was blocked thus causing this regression (functionally). I dont know what goes into the code, but I lost a key functionality with this upgrade (Angular 16 "highcharts": "^9.3.3", "highcharts-angular": "^3.1.2")

[pthomasjoby]

@karolkolodziej I am using this for timeseries chart (y-axis is time) with drilldown (Category [multiple] >> Types [multiple]). The application is broken after the upgrade.

[karolkolodziej]

I'm not sure if I follow your use case. Could you please create a working demo with the version of Highcharts that works?
I'll check what has changed and if we can work around it.

[pthomasjoby]

@karolkolodziej can you please advise, how can I use previous versions in jfiddle?

DOES NOT WORK
Angular 16 "highcharts": "^9.3.3", "highcharts-angular": "^3.1.2"

WORKS:
Angular 13 "highcharts": "^6.2.0", "highcharts-angular": "^2.10.0"

If possible, please scaffold a a jfidddle project for me with the version there this functionality works?

Please see attached the screenshot of Jfiddle

Thanks, Joby

[karolkolodziej]

Here is v9: https://jsfiddle.net/BlackLabel/yw36t097/
Here is v6: https://jsfiddle.net/BlackLabel/9t51mxj3/

But as far as I see it behaves the same in both examples. But I didn't adjust the demo

[pthomasjoby]

@karolkolodziej I tried with 6.2.2 vs 9.3.3 and adding multiple series does not work in either versions. However, I noticed that in a loop in the drilldown callback, only the first record is printed whereas the second and on the records are not printed when the call chart.addSeriesAsDrilldown(e.point, drilldown[i]); is made suggesting that an exception is raised and exiting the loop (I added a try catch but no error is raised). On the other hand, if the call chart.addSeriesAsDrilldown(e.point, drilldown[i]); is NOT made then the loop continues until all the records are printed.

Separately, I am wondering if the wrapper angular component "highcharts-angular" is making a difference. In the working version, I have "highcharts-angular": "^2.10.0" whereas in the non-working version I have "highcharts-angular": "^3.1.2". I am still trying to nail it down as to what is causing the regression at my end.

Is it possible to create jsfiddle with the above versions of "highcharts-angular" to figure it out?

[pthomasjoby]

@karolkolodziej found a workaround (not neat, but works). Instead of calling chart.addSeriesAsDrilldown(e.point, drilldown[i]); for each sub-series, I called it once for the first element and then used addSeries for the remaining elements as follows:
for (let i = 0; i < newList.length;i++) { if (i == 0) { chart.addSeriesAsDrilldown(e.point, newList[i]); } else { chart.addSeries(newList[i]); } }
On the back with drillup, I had to reset the chart (looses context with this, ok for now)

Working prototype is avaialble here - https://jsfiddle.net/jobythomas/Lwam849t/132/