Error rendering empty pie charts after upgrading to 8.1.1

[pablolmedorado]

Expected behaviour

An empty pie chart renders without errors.

Actual behaviour

An error appears:
ReferenceError: Highcharts is not defined

highcharts/js/parts/PieSeries.js

Line 789 in decfc3a

d: Highcharts.SVGRenderer.prototype.symbols.arc(centerX, centerY, this.center[2] / 2, 0, {

Live demo with steps to reproduce

https://codesandbox.io/s/highcharts-vue-demo-ye65e

Product version

8.1.1

Affected browser(s)

All

[clemeno]

All the dynamic pie charts that are initialised empty and filled later with data, asynchronously, are broken by updating from 8.1.0 to 8.1.1

[Denyllon]

Hi @pablolmedorado and @clemeno
Thank you for reporting the issue!

It looks like the problem is with the latest version only and related with all of the wrappers. Actually it is already fixed on master branch though, because after putting the latest build from master into the codesandbox example, and replacing Highcharts versions, looks like the problem disappears.
In sum, we need to release new version in upcoming days, and this problem will be automatically resolved.

Live example: https://codesandbox.io/s/highcharts-vue-demo-61e0v

Kind regards!

[bazineta]

This issue appears to still be present in the released version of 8.1.2, at least in the one published to npm.

[pawelfus]

Reopening issue.

@bre1470 - could you check it? #13681 is closed, but it seems Highcharts namespace is used also in the core, not only in modules. Demo: https://codesandbox.io/s/highcharts-vue-demo-5o9qu?file=/package.json

[Crocsx]

Confirm this is still an issue for me too in 8.1.2

https://stackblitz.com/edit/angular-ivy-udtk3a?file=package.json

[jitension]

In two scenario it is reproduced:

1. When series.data is blank
2. When all y axis in data is 0

[kennyjwilli]

Curious about workarounds until a fix is out. Using @pawelfus's repro link and modifying highcharts version to 8.1.0 appears to fix this issue. Is this the suggested workaround for now?

[bazineta]

Curious about workarounds until a fix is out. Using @pawelfus's repro link and modifying highcharts version to 8.1.0 appears to fix this issue. Is this the suggested workaround for now?

In our case, the problem was triggered by creating a chart without data, then adding the data later. As it happened, we had the data already at that point, and thus could create the chart with data, thus avoiding the problem. If that's an option for you, it's worth a look.

[goransle]

@kennyjwilli If there are changes since 8.1.0 you wish to take advantage of, you can also wrap the drawEmpty method like this:

// Workaround for https://github.com/highcharts/highcharts/issues/13710
(function(H) {
  H.seriesTypes.pie.prototype.drawEmpty = function() {
    var centerX,
      centerY,
      start = this.startAngleRad,
      end = this.endAngleRad,
      options = this.options;
    // Draw auxiliary graph if there're no visible points.
    if (this.total === 0) {
      centerX = this.center[0];
      centerY = this.center[1];
      if (!this.graph) {
        this.graph = this.chart.renderer
          .arc(centerX, centerY, this.center[1] / 2, 0, start, end)
          .addClass("highcharts-empty-series")
          .add(this.group);
      }
      this.graph.attr({
        d: H.SVGRenderer.prototype.symbols.arc(
          centerX,
          centerY,
          this.center[2] / 2,
          0,
          {
            start: start,
            end: end,
            innerR: this.center[3] / 2
          }
        )
      });
      if (!this.chart.styledMode) {
        this.graph.attr({
          "stroke-width": options.borderWidth,
          fill: options.fillColor || "none",
          stroke: options.color || "#cccccc"
        });
      }
    } else if (this.graph) {
      // Destroy the graph object.
      this.graph = this.graph.destroy();
    }
  }
})(Highcharts);

Working example on codesandbox.io

Otherwise we suggest using 8.1.0 for now.

[shashank1010]

Guess the fix #13770 doesn't address #13722

Have provided a demo to reproduce the issue in #13722
The following line is the source of this issue.

highcharts/js/parts/ColumnSeries.js

Line 571 in c7e1976

Highcharts.objectEach(this.yAxis.stacking && this.yAxis.stacking.stacks, function (stack) {

[Crocsx]

This is still happening to me in 2.7.0

https://stackblitz.com/edit/angular-ivy-2zlkmm

[pawelfus]

Hi @Crocsx - this fix is not released. Next release is scheduled next month. For now you need to either downgrade or use workaorund posted here: #13710 (comment)

PS: Current Highcharts version is v8.1.2

[Crocsx]

ah right my bad sorry, I confused with highchart-angular update, didn't see this highchart was still in 8.1.2, sorry

[felipemfp]

Hi @Crocsx - this fix is not released. Next release is scheduled next month. For now you need to either downgrade or use workaorund posted here: #13710 (comment)

PS: Current Highcharts version is v8.1.2

@pawelfus do you have a date for the next release?

[pawelfus]

We target next week @felipemfp

[the-gc]

I encountered a similar problem. After clicking legend, the other data was 0.Thanks!
"highcharts": "^8.2.0",

[pawelfus]

Hi @the-gc - I'm unable to recreate the issue in v8.2.0, take a look: https://jsfiddle.net/BlackLabel/ncpL97eq/ - could you update my demo? Thanks!

[hitautodestruct]

I can confirm that updating to highcharts 8.2.0 has fixed the issue for us.

Thanks!

[Crocsx]

Same here, works nicely

[the-gc]

Hi @pawelfus - The project was rebuilt today and the problem has been solved, thank you very much!

[pawelfus]

Thanks for confirmation!

[thril]

This was happening for me as well because there were multiple versions of highcharts in my yarn.lock file. Once consolidating (on 8.2.0), the crash went away.