Plot area disappearing or getting squashed

[MCSmit27]

Hi, I'm not sure if I'm doing something wrong or if it's with the Highcharts library of with the grouping library. I have 2 charts that load after a user makes a selection in a drop down list, and for some charts it seems like the charts load correctly, but for most I noticed this morning that the plot area seems to be getting squashed.

Two examples:
https://stackblitz.com/edit/angular-ivy-cz2dhy?file=src%2Fapp%2Fapp.component.ts
https://stackblitz.com/edit/angular-groupedcolumnchart?file=src%2Fapp%2Fapp.component.ts

On both examples, when I refresh the browser bit, the charts load correctly, but if I add a space and save in the code section and it auto compiles and refreshed the browser, then the plot area is completely squashed.

[mateuszkornecki]

@MCSmit27 Thanks for reporting the issue!

I think that it is caused by the stack blitz reload system rather than a highcharts-grouped-category itself. I was trying to reproduce it on my local project and everything was working correctly. The problem is also not related to the angular, the same behavior is happening while working with the vanilla js. https://stackblitz.com/edit/js-zm3xf5?file=index.js

Could you tell me if you noticed the problem somewhere else than on the stackblitz?

[MCSmit27]

Hi,
Yes I first saw it in my local angular project. Then I copied over the code to StackBlitz to raise the issue on the HighCharts forum.

[pawelfus]

That error means grouped-categories plugin is loaded twice. I don't know why it works that way in stackblitz, let's consider this demo: https://stackblitz.com/edit/js-pbe91b?file=index.js

In the console, for the first time you can see This should be undefined: undefined. But when you add an empty line, or a space, and wait for project to auto-reload, the same sentence says: This should be undefined: true. This is incorrect.

Workaround: Load grouping-categories plugin only once, example protection:

if (!Highcharts.myPluginLoaded) {
  require("highcharts-grouped-categories")(Highcharts);
  Highcharts.myPluginLoaded = true;
}

Demo: https://stackblitz.com/edit/js-fpigev?file=index.js
And OP's demo: https://stackblitz.com/edit/angular-ivy-kjeuia?file=src%2Fapp%2Fapp.component.ts

[MCSmit27]

Hi Pawel,

Thank you so much, that seems to have sorted out my charts perfectly! I never would have guessed that.