ChartJS charts width and height set to 0 when responsive and dragged. Any ideas as to why?

202 Views Asked by At

I am in the process of building a dashboard with multiple charts on it. For a chart library I've landed on VueChartJS, with the vue-chart-3 wrapper and for a drag n drop library I'm using vue-draggable-next.

The issue I'm having is that if the charts have the responsive option as true and you drag them, their height and width are set to 0. I added a toggle to prove that it's an issue with the responsive feature, but is there anything else I can do to remedy this issue?

Right now I'm wondering if I need to make some invisible toggle that activates every time you click the chart to drag it around and then toggles off when you are done dragging, but that seems like a lot of potential code and time to impliment this feature and wonder if there's not just a better way to do this?

Any advice or help would be greatly appreciated!

I've made a CodeSandbox to show the issue and there is a gif below as well showing what is happening.

enter image description here

0

There are 0 best solutions below