Setting up Zoom with react-chartjs-2
See original GitHub issueWhat is the proper way to setup zoom plugin with react-chartjs-2? Is it compatible?
I just ran npm install chartjs-plugin-zoom
which installed the plugin and its hammerjs
dependency and started configuring my chart options:
pan: {
enabled: true,
mode: 'x'
},
zoom: {
enabled: true,
mode: 'xy'
},
However this is not working. Am I skipping any step? I searched for react-chartjs-2 specific issues but found nothing. Thanks!
Issue Analytics
- State:
- Created 7 years ago
- Reactions:2
- Comments:9
Top Results From Across the Web
Zoom and Pan in react-chartjs-2 - Stack Overflow
One way to zoom as an example (at least for Mac), you can move your mouse pointer into the chart area, and then...
Read more >chartjs-plugin-zoom examples - CodeSandbox
Learn how to use chartjs-plugin-zoom by viewing and forking example apps that make use of chartjs-plugin-zoom on CodeSandbox. ; Latest version2.0.0. LicenseMIT.
Read more >chartjs-plugin-zoom - npm
chartjs -plugin-zoom ... For Chart.js 2.6.0 to 2.9.x support, use version 0.7.7 of this plugin. Panning can be done via the mouse or...
Read more >chartjs-plugin-zoom - CodePen
P Create New Pen. S Save. ⇧ S Save As Private PRO. I Info Panel (if owned). CodePen requires JavaScript to render the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Solved: I don’t know if this is the proper way to do this, but I just imported the plugin in my chart component file:
import * as zoom from 'chartjs-plugin-zoom'
and the pan and zoom options started working. If there is no better approach, I think the issue can be closed! 😃
it has been a few years but if someone else want to do a reset button when using react (like @junbinku was asking) :
in your render you need to get the component reference, for example with a
<Line>
: