Issue with flamechart in Vue

[jjaramillom]

I wasn't sure where to open the issue, so I also opened one in Highcharts repo

Expected behaviour

A chart with the provided data

Actual behaviour

No chart. If I inspect the HTML elements I see an <svg/> element but with no actual content.

Live demo with steps to reproduce

Working version with vanilla JS Failing version with Vue

Product version

Highcharts 11.4.0

Affected browser(s)

Chrome

[jszuminski]

Thanks for reporting!

The difference between the working example and the one reproduced in Vue is that you have not added appropriate modules in the latter one.

If you import and apply the highcharts-more module (and, potentially sunburst if you need it somewhere), you will get a non-empty, working chart: https://codesandbox.io/p/sandbox/lively-fire-pznhp5?file=%2Fsrc%2Fcomponents%2FFlamechart.vue

Here's a section in the docs about this: https://github.com/highcharts/highcharts-vue?tab=readme-ov-file#importing-highcharts-modules

Please let me know if importing & applying modules solved it for you.

[jjaramillom]

Thanks @jszuminski. Somehow when I tried it it didn't work, maybe some env issue (I even had it commented out in my demo). Now it's working fine. I'm just wondering, in my actual project it was working kind of flaky. Any idea why would this be?

Anyway, thanks a lot.

[jszuminski]

I'm glad that it works now.

Could you please elaborate on the flakiness? What exactly is not working as it should? Could you reproduce it in an online code editor?

I'm afraid that I'm going to need more details before proceeding with this.

[jjaramillom]

The chart we have was being rendered sometimes, while sometimes it wasn't being rendered (in a random fashion), I just wanted to know if this is a known behavior or not. Anyway, the issue is solved now, so nothing to worry about.