Chartjs-plugin-zoom not working with multiple charts? about chartjs-plugin-zoom HOT 9 CLOSED

@darshg9 do you have a link to a page which shows this behaviour so that we can debug?

from chartjs-plugin-zoom.

Unfortunately I'm in the middle of a vocational training (I'm a beginner developer) and this is a protected project for the society in wich I'm making an internship, so I can't give you a link. I can make a screenshot after hiding sensitive datas, though. And of course answer to your questions as best as I can.

PS: I'm french and though my english is relatively good, it still can be perfected, so please excuse me if I sometimes don't make myself totally clear

from chartjs-plugin-zoom.

@darshg9 if it's possible, would you be able to give us a jsfiddle with 2 graphs that reproduces the issue? You can probably use the chart.js sample graphs to avoid leaking any of your data

from chartjs-plugin-zoom.

Here are some screenshots.

The page contains several small cards with "quick view" charts (the background), each wich can be clicked to open the pop-up wich contains even more charts organized in two tabs. The zoom plugin applies only to the first of the two bubble charts wich are in the second tab. I think it's trying to apply to the other charts, though, since the page scrolling is "disabled" when hovering any of it.
What bugs me most is that the chart wich works isn't the first one of the page nor the last one, wich could makes sense. At the moment, I have no idea why the working one is this one and not any of the others.

from chartjs-plugin-zoom.

I have multiple charts working with zoom on the same page, so I'm guessing there's something wrong with your setup. Check the browser console for Javascript errors, double-check (triple-check if you have to) your syntax, and setting up a jsfiddle or codepen is a good way to isolate where the problem is. If you can get that working, then you can systematically start comparing the differences to find the problem, or if you can't get it working, we'll have something to work with to identify the bug.

Also note that your chart types may be affecting the zoom plugin somehow, try changing them all to line charts and see what happens.

from chartjs-plugin-zoom.

As I said, I'm still a beginner so I expected it to probably have to do with an error I made.
I'll first try to change all my charts to line charts and then eventually try to reproduce my issue in a jsfiddle/codepen.

from chartjs-plugin-zoom.

Since converting my bubble charts to line charts implied to completely redefine their datasets structure, I tried to simply temporarily disable them (and all references to them, canvases included) as comments and switch all the other charts to line type. Now, all the remaining charts are line types and the zoom applies to none of them.
I'll try to reproduce all of this in a jsfiddle/codepen.

PS: This will be a way simplier version of the original code though. For my project I do several requests for datas via an intern API, do some calculations with it and then inject it into the associated charts. All of this is dispatched in several files to reduce their sizes.

from chartjs-plugin-zoom.

Ok, I finally found the the origin of my issue: I'm a retard. After wasting a day and a half arranging my code to make a codepen I could show you, I realized I simply added the options associated to the zoom plugin to only one of my charts when I was sure did it for each one... I knew I was tired, but didn't thought it was this bad. After two and a half month of good work (as my boss said), making such a stupid mistake just before the end of my internship makes my quite mad...

In conclusion, there is no problem with multiple charts at all, sorry for wasting your time.

from chartjs-plugin-zoom.

Don't be so hard on yourself, it happens to the best of us, I promise :) Glad you found the problem.

from chartjs-plugin-zoom.