Chart disappears (height and width set to 0) when responsive is true and chart is dragged

[LovelyAndy]

Expected Behavior

The chart is responsive and is able to be dragged around the wrapping component like normal.

Current Behavior

When responsive = true and you drag the chart, it's height and width are set to 0 and the chart disappears.

Possible Solution

I am not able to figure out why the chart's height and width are set to 0, so perhaps a min value for each would be a quick fix. It would obviously undo a lot of the responsiveness, but in my usecase that would be very helpful, as you wouldn't want a chart to be, say, 4rem x 4rem anyway.

Another possible solution I've been tinkering with, and can be seen partially in my CodeSandbox, is a toggle for responsiveness. I could make a toggle that triggers when the draggable library initial event is fired, which removes responsiveness, allowing the chart to move, then toggling back on when released. That's quite a lot of work and code for a potentially easy fix

Steps to Reproduce

Here is the link to my CodeSandbox. Currently responsive is on and the chart bug will happen upon dragging. You can uncheck the box and make it no longer responsive (also, checking and unchecking will re-render the chart if it disappears).

Here is a gif showing the bug:

Context

I am trying to create a user dashboard that will render several charts on the page. I want it to be dynamic and movable so the drag and drop ability is necessary. Of course it also needs to be responsively sized. So my charts disappear when attempting to utilize one of the main features is an issue.

Environment

• vue.js version:
• vue-chart-3: <0.5.11>
• chart.js version: <3.6.0>
• npm version: <6.14.14>
  CodeSandbox

[kurkle]

@LovelyAndy would you be able to test #9876 out in your project? I'm not able to test it in a similar env currently.

[LovelyAndy]

@kurkle Thanks for the comment! I've never seen this syntax before, but I'll give it a go

[kurkle]

@LovelyAndy I think you need to do something like this:

• clone Chart.js repository locally (gh repo clone chartjs/Chart.js with github cli)

then in the repository directory

• check out the pr (gh pr checkout 9876 with github cli)

npm ci
npm run build
npm link 

and then
npm link chart.js in your project and test if it works

[rajatdangat07]

I am having the same issue. I am using charjs inside react-dnd. After dragging the charts, their height and width are set to 0.

[LovelyAndy]

@kurkle I've put this into my project and all of my charts disappear (the visible thing is just a bunch of nested components, not chartjs).
This is the error I get in the console:
chart.esm.js:4872 Uncaught (in promise) Error: "line" is not a registered controller.

Perhaps it's something to do with the vue-chart-3 syntax? But I'm not entirely sure.

[rajatdangat07]

@kurkle PR #9876 is working for me.

[kurkle]

@LovelyAndy sounds like you did not register Line controller?

[LovelyAndy]

@kurkle I did registerables like this in my project:
import { Chart, ChartData, ChartOptions, registerables } from "chart.js";

Chart.register(...registerables);

[kurkle]

@kurkle I did registerables like this in my project: import { Chart, ChartData, ChartOptions, registerables } from "chart.js";

Chart.register(...registerables);

Maybe there are 2 instances of Chart.js somehow? Did you change anything other than npm link chart.js?

[LovelyAndy]

@kurkle Hey Kurkle, Thanks for all of you help so far, but I was not able to get this working. Could you take a second to check out my project please?
I made a zip just fo you with mimimal production on my chart usage so far (almost the same as the codesandbox).

Thanks again, I really appreciate it.

https://www.dropbox.com/s/a0vwccjeygc8w1p/ChartsForKurkle.zip?dl=0

[kurkle]

@LovelyAndy did not realize it was a Vite thing. Vite has some issues with linked packages, and I'm not going to try solving those now (I've never used Vite).

The fix seems quite obvious though and the fact that the issue is fixed with react-dnd makes confident it will be fixed for your case too.

[LovelyAndy]

@kurkle Ahh, yeah this is my first project with Vite and I'm not that familar with it either. Thanks for all of the help though; I really appreciate it.
Glad someone got some help through this though!

[LovelyAndy]

@kurkle Hey, I installed my own fork from your fork and it worked! Let's get this PR merged released and then I can go back to using chartjs normally 🥳
Thanks again for all the help!

[LovelyAndy]

@kurkle Does this being closed now mean that this PR was merged? Cheers again!