[Bug]: Multichart in same page only loads one

[DanyDes]

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

I've been working with the library and when I needed to show multiple charts it did't work. I was using the 4.0.4 version then downgraded it to the version 4.0.3 and worked perfectly.

I just wanted to report it.

Reproduction

https://codesandbox.io/s/optimistic-hill-nc0h95?file=/src/App.vue

chart.js version

3.7.1

vue-chartjs version

4.0.4

Possible solution

No response

[edwardsph]

Thank you for raising this. I just upgraded from 3.5.1 to 4.0.4 and had the same problem. I would never have guessed to downgrade to 4.0.3.

[thabarbados]

@DanyDes @edwardsph fixed in 4.0.5
You can check here

[akhchan99]

If you make the chart data reactive, then only the last chart will update and shown (with 4.0.5)

[tttaisgt]

@thabarbados

    "chart.js": "^3.7.1",
    "vue": "^2.6.14",
    "vue-chartjs": "^4.0.5",

it works perfectly in the first render, but when I change the data of one chart, the rest charts will disappear, like this:

😢

[thabarbados]

@tttaisgt Can you repo this bug on the sandbox?

[tttaisgt]

@thabarbados
I have no experience with the sandbox environment 😓 , I tried to reproduce it but the phenomenon of

If you make the chart data reactive, then only the last chart will update and shown (with 4.0.5)

occurs
the sandbox URL: https://codesandbox.io/s/pedantic-tharp-moi7lj?file=/src/App.vue

In my case, the code is similar to the URL above, the phenomenon of chart disappearing occurs, please see the video:

Screen.Recording.2022-04-10.at.00.27.37.mov

[hoduyquang75]

@thabarbados
Cc: @tttaisgt
I have the same problem as above. 😢 😭

[thabarbados]

@akhchan99 @tttaisgt @hoduyquang75 I am trying to fix this bug. Until I do this, you can downgrade to version 4.0.3.

[ShacharMeir007]

@thabarbados I think I have a solution for this bug, at least it worked when I tested it. Is there a way for me to push my changes?

[thabarbados]

@ShacharMeir007 Sounds great!
You can fork the project, make changes and create a PR. Or you can put your code on codesandbox and send the link here.

[thabarbados]

Fixed in release 4.0.6, except for using Vue 2 and chartjs-plugin-annotation simultaneously.
Added a paragraph about this to the docs