Chart.js: Zoom/Pan Plugin

Created on 27 Apr 2016 · 6Comments · Source: chartjs/Chart.js

@etimberg created a proof of concept here: https://jsfiddle.net/amd5ne2w/1/

On the Product Hunt page, @aub posted this specific feedback on features he is looking for.

"I need axial zoom like this: https://www.amcharts.com/demos/date-based-data/ (specifically on the X).

(I'm a product designer so take all this fwiw / its free advice :) )
I think the interaction could be achieved with click+drag / pinch for zooming and then double click or double tap to get back out. shift+drag or pan could allow for panning. <- so you might not need much UI for this or users could bind the callback to a button or something for the double-click/double tap reset. (like the first one here http://dygraphs.com/gallery/#g/interaction)"

enhancement

Source

derekperkins

❤1

Most helpful comment

I've created a plugin that extends on the panning idea: Display 2 charts - 1 showing a large data range and 1 showing a smaller window of that data range: https://github.com/AllenJB/chart.window.js

It needs a bit of work (and testing beyond my own simple case) before I'd be ready to create a release, but this may help others trying to achieve the same thing.

AllenJB on 12 May 2016

👍2

All 6 comments

@derekperkins thanks for digging that up. It is really good feedback!

etimberg on 27 Apr 2016

❤1

Initial zoom plugin is https://github.com/chartjs/Chart.Zoom.js

etimberg on 4 May 2016

I've created a plugin that extends on the panning idea: Display 2 charts - 1 showing a large data range and 1 showing a smaller window of that data range: https://github.com/AllenJB/chart.window.js

It needs a bit of work (and testing beyond my own simple case) before I'd be ready to create a release, but this may help others trying to achieve the same thing.

AllenJB on 12 May 2016

👍2

Since this plugin is developed, do we still need to keep this issue open?