Issue with flamechart in Vue
jjaramillom opened this issue · comments
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
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.
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.
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.
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.