Highcharts Maps initializing Question about highcharts-vue HOT 6 CLOSED

Hi,

You're right!

If you take a look at line 52 of highcharts-vue/src/component.js you'll find that 2 additional arguments are passed to chart.update(config, true, true).

As you can read in the API (https://api.highcharts.com/class-reference/Highcharts.Chart#update), the third argument is oneToOne which determines if the series is updated from the config passed to chart.update or not. The Highcharts-Vue wrapper makes all updates based on props changes with oneToOne = true

Here's how it works for a normal chart: https://jsfiddle.net/BlackLabel/pwnm93gj/

However, I've taken a closer look to what happens to mapChart and you're right - it seems to be a bug. I've reported it here: highcharts/highcharts#18648

So until it gets solved, I would recommend you use series.mapData instead of chart.map when you perform an update on the chart. Here's a demo: https://jsfiddle.net/BlackLabel/6gtxfrz9/

Let me know if you have any more questions!

from highcharts-vue.

Hi,

Thanks for the question!

I understand your question, but it is not related to the Highcharts-Vue wrapper, it's just how Highcharts works.

It doesn't seem to work in with Vanilla JS in either normal charts: https://jsfiddle.net/BlackLabel/xny05arq/ nor map charts: https://jsfiddle.net/BlackLabel/ekbm2qnh/

As you can read in the API (https://api.highcharts.com/class-reference/Highcharts.Chart#update):

A special case is configuration objects that take arrays, for example xAxis, yAxis or series.

So chart.update works for updating the chart config, but does not work for adding/modifying series. That's why nothing shows up in your demo.

I'd recommend you use chart.addSeries() to add a new series to the chart on mounted().

Demo for a standard chart: https://jsfiddle.net/BlackLabel/bv59r8ze/
Demo for a map chart: https://jsfiddle.net/BlackLabel/3a756quz/

Let me know if that helps!

from highcharts-vue.

Hi,

It's interesting, the vanilla js demos you provided match the below concept

So chart.update works for updating the chart config, but does not work for adding/modifying series. That's why nothing shows up in your demo.

and seems it also matches the explanation for the special cases from https://api.highcharts.com/class-reference/Highcharts.Chart#update

Then, a new question, is the chart updating logic behind highcharts-vue wrapper <highcharts></highcharts> completely equal to Highchart.chart.update() when the :options prop is changed?
I will give it a question mark for now, coz I got a few 'highcharts-vue' wrapper-based demos to show you.

Here are the links
1.https://codesandbox.io/s/cranky-mclaren-dts4ju?file=/src/components/Chart.vue:0-419 (line chart)
2.https://codesandbox.io/s/intelligent-ardinghelli-v630i3?file=/src/components/Chart.vue:0-458 (pie chart)
3.https://codesandbox.io/s/determined-snow-rso769?file=/src/components/Chart.vue (stock chart)
For these demos, they all have a chartOptions state with the default value - chartOptions: { }, and after loading/fetching in the mounted(), a new non-empty chart option will be assigned to the state, basically the same logic to the first failed map demo I showed above (https://codesandbox.io/s/sweet-sammet-s42sp1?file=/src/components/Chart.vue), but they all have the expected charts showed instead of failed rendering.

So I feel the test results have some conflicts with the concept you mentioned, and it only happens to the map chart.
What's your opinion on this?

from highcharts-vue.

Closed as it will be solved within the Highcharts repo.

from highcharts-vue.

Hi,

Thank you for your response and recommendation.

What I wanted was to share some of my findings that might confuse highchart-vue users when they're using this wrapper to create a mapChart. With the above demos and our discussion, I think highchart-vue users will have a better understanding of creating mapChart via this wrapper when they find this issue content.

I also found another alternative which is different to your recommendation. I will share it here.
https://codesandbox.io/s/nice-silence-lepkj6?file=/src/components/Chart.vue

Anyone who is interested in it could compare it with the above failed one (https://codesandbox.io/s/sweet-sammet-s42sp1?file=/src/components/Chart.vue).

from highcharts-vue.

Thank you for your detailed descriptions!

We appreciate that.

Feel free to post any questions on our forum or GitHub if they arise.

from highcharts-vue.