[Vue warn]: Error in callback for watcher "options": "TypeError: Cannot read property 'update' of undefined"

[Billusuryaputra]

Hello, i am new vue Highchart. I got the problem "[Vue warn]: Error in callback for watcher "options": "TypeError: Cannot read property 'update' of undefined". I used data form Vue Store then i pass it through props to my Highchart component.

That problem appears when i go back to my page that use Highchart. It seems the data on the options is not cleared when i go access my page again. Is there any Highchart method/ properties that i need to clear every time i go back to my page?

Thank You,

[Denyllon]

Thank you for reporting your issue.
Could you try to reproduce the problem using one of the most popular sandboxes, e.g CodeSandbox or Stackblitz? In order to find out what's happening, we need to take a closer look on the code and investigate it.
Could you also tell me which version of wrapper are you running?

[andrescellini]

@Billusuryaputra ey, have you figured out? i am facing a similar problem. thks!

[zedee]

@andrescellini @Denyllon I figured out! :)

As @Billusuryaputra hasn't been able to reproduce the problem, I tried to do by myself, because this issue happened to me as well while doing a dynamic selector of charts.

This is my best reproduction of the issue. Is not verbatim from my project's code, as mine is more complex (with Vuex state management among other stuff), but it reproduces the same situation. I added some other charts to isolate a bit the cause of the problem which is on the data property of series array.

Reproduction of the issue on CodeSandbox (Check console on chart 3)

This seems to happen when chart is of type pie and all values of the datum are zero.

For some reason (haven't gone that deep), the component breaks on the mounted() hook when happens all data pair values have a zero [['string', 0], ['string', 0]] , or [0, 0, ...., 0].

[pawelfus]

Your issue @zedee sounds like bug in Highcharts v8.1.1 and v8.1.2, see: highcharts/highcharts#13710 (will be fixed in the next release). v8.1.0 works fine: https://codesandbox.io/s/elegant-wu-150cp?file=/package.json

[zedee]

Oh nice @pawelfus ! Thanks, we will downgrade meanwhile :)

This issue can be closed.

[jounger]

I have same issue with datatable :(

[pawelfus]

Please, provide live demo :) We will check it

[jounger]

I use watcher {immediate: true} with options (v-data-table) then got this message:
"[Vue warn]: Error in callback for watcher "options": "TypeError: Cannot read property 'page' of undefined".
I try with Vue.nextTick but got the same issue.
This message only happen when I use {immediate: true}.

[Denyllon]

Hi @jounger ,

As Paweł mentioned above, we need to investigate the problem on any live demo, so could you provide us with it?
You can start from here: https://codesandbox.io/s/highcharts-vue-demo-ttner

Kind regards!

[hemanth-sp]

I can reproduce using if i add event

chart: {
        zoomType: 'x',

        events: {
            load: function () {
                const label = this.renderer.label('Chart loaded', 100, 120)
                    .attr({
                        fill: this.getOptions().colors[0],
                        padding: 10,
                        r: 5,
                        zIndex: 8
                    })
                    .css({
                        color: '#FFFFFF'
                    })
                    .add();

                setTimeout(function () {
                    label.fadeOut();
                }, 1000);
            }
        }
    },

[Denyllon]

Hi @hemanth-sp ,

The code snippet you pasted above is probably not enough to get the error, because it does not update anything. Could you provide me with the demo example, where the error would be caught in the console?