"Zoom" action shouldn't escape the "Pan" range bounds
See original GitHub issueI’m currently working to implement a chart with chartjs-plugin-streaming
and chartjs-plugin-zoom
to show real time data from a remote source, but I’m having a few issues with the zoom and pan side of my chart…
I’ve created a JSFiddle inspired by the chart inside my app, showing the behaviour I’m having trouble with. to summarise the configuration:
- my app has a buffer with 5 minutes’ worth of data
- this is shown in datasets linked to the
realtime
X-axis provided by the streaming plugin - I have the zoom plugin’s
pan.rangeMin
set to0
andpan.rangeMax
set to5 * 60 * 1000
(matching the buffer duration) - I’m only using pan and zoom on the X-axis, with Y-axis scaling controlled automatically by Chart.js
when I zoom my chart out, the chart zooms central to the point it was zoomed from (as expected), but if either the left or right bound of the “zoom” range extends past the bounds of the “pan” range, the chart retains that visible range.
at the point, trying to pan either left or right, only then is the pan location updated to fall within it’s defined bounds.
I feel like this is an issue in the zooming plugin though, because I would expect the “zoom” action to stay within the “pan” bounds of the chart.
Issue Analytics
- State:
- Created 4 years ago
- Comments:6
Can you set
zoom.rangeMin = pan.rangeMin
andzoom.rangeMax = pan.rangeMax
?You chart sounds cool! I’d love to see it if it’s publicly available to share!
so, [looks at the date] I finally got a chance to get back to this… anyways, I got my desired behaviour working, my solution is two-fold:
0
and a “sensible max delay” that I’m recalculating based on currently rendered chart data.I implemented this in my hybrid mobile project and it’s working pretty damn well, so I’ve updated my original JSFiddle example to share it back here again. 😃