Chart.js: Zoom In/Out options in bar charts using Chart.JS

[chinnaKoti]

Hey,
I am using chart JS for drawing chart in my website. I was wondering if there is any option to zoom the chart? Like in the line graph for bar charts, is there option like that? It's very urgency for me. Thanks in advance.

[sweetgoals]

It's really more about just scaling the values of your chart in fractions. So if you had a value of 100 and then you wanted it to be 50% the size then you would create a new value with 1/2 the size of the original.

Can you give an example of what you want? One before its zoomed and one after?

[JamesWilsonNovel]

For what it's worth I'll quickly describe my solution.

1. Create a new chart type (via extend)
2. Add 2 arrays (hiddenLeft = [], hiddenRight = [])
3. Add a function called Zoom to your new chart type
4. For Zoom In: Shift points off of the chart's dataset array and push them into the hiddenLeft array. Likewise pop points off the chart's dataset array and push them into the hiddenRight array.
5. For Zoom Out: Pop points off the hiddenLeft array and unshift them onto the chart's dataset array. Pop points off the hiddenRight array and push them onto the chart's dataset array.
6. Don't forget to call the update function after you are done.

I've noticed that even with many data points chartjs performs pretty darn well!

[Jedarc]

JamesWilsonNovel I'm using ChartJS and would that the user rotate the mouse wheel on the chart, it is capable of zooming. As in this example: http://c3js.org/samples/interaction_zoom.html
What you said is what I need, you have an example? See my chart, please: http://jsfiddle.net/jedarc/y4trpr15/

[djwagner-cbc]

I tried to do something like @JamesWilsonNovel but then I tried google charts. It has pan/zoom, but is limited. Google also forces you to call their API, so code is not self-contained. See this for an example, but it only works on a pc with chrome or firefox:
https://plnkr.co/E2b7SLdjN1LTvjbRzEKR

[ajhalls]

This thread seems to be the place to talk about zoom / scroll / pan issues since all the other issues are closed referencing this thread, but there doesn't seem to be any solution if someone wanted to create a chart like this:
https://www.amcharts.com/demos/line-chart-with-scroll-and-zoom/
http://www.highcharts.com/stock/demo/basic-line
http://www.zingchart.com/gallery/chart/#!zoomable-stock-custom-tokens
http://dygraphs.com/gallery/#g/range-selector

here is zoom and pan, but without preview:
http://canvasjs.com/docs/charts/basics-of-creating-html5-chart/zooming-panning/

I love Chart.js, but it seems odd to have such a large feature missing that is in so many other libraries. Seems we could look at this library as a starting point https://github.com/jkronz/historange (I only did a cursory glance at it so far) but am considering going with something like HighCharts / HighStock to get that feature, though I would love to keep using Chart.js

[etimberg]

@ajhalls we are much closer to this in v2. From the perspective of the chart, zooming is essentially 2 things:

1. Changing the min and max of the scales
2. Making sure that drawing outside the max limits is clipped.

Point 1 is already possible. Point 2 is not yet possible.

In terms of triggering zoom, I don't know how much we'd put into the core. I think we would create an extension that would add that functionality. The extension could have dependencies like HammerJS for gesture support and other advanced things that we don't necessarily want in the core.

[ajhalls]

@etimberg That sounds great, I had no idea a v2 was underway, it might be nice for @nnnick to mention that somewhere on http://www.chartjs.org/docs/#notes-bugs-&-issues along with some of the things that are changing.

While I know you, and others, are always expanding it and improving it, when trying to decide on which library to use it would be handy to have a changelog with some dates to see a timeline of features that have been added so they can project into the future that maybe within a short period what they want would be supported. That could entice extra users, which could mean extra contributors as well.

As it stands now, I would have to dig through a graphical chart on github hovering over a bunch of different things trying to decipher what has been added in a timeframe. Not the worst, but maybe not as helpful as a changelog with a "coming soon" in v2 section.

[timesqueezer]

I really like Chart.js and would love to have this feature, so I thought I'll give it a try myself.
As I'm new to this project maybe you guys could provide some feedback on my way of integrating the timeline into the infrastructure. As you mentioned you don't want the core lib to be too cluttered with stuff that's not used very often, so I thought about creating the timeline as a plugin. Unfortunately I needed some places of the core to change (handleEvent method for example).

[etimberg]

Wrote an initial zoom plugin: https://github.com/chartjs/Chart.Zoom.js

[TheQuantumPhysicist]

So guys? Now I see version 2. Is this supported now? I would really appreciate an example of panning and zooming a plot.

Thanks.

[sasos90]

Panning means dragging (changing the x scale values)? I am not able to get it running. Zoom works, but it zoom only the numbers instead of a string labels.
Does someone know what could be the issue?

Thanks

[panzarino]

Can this be closed? A suitable solution has been presented with the Chart.Zoom.js plugin.

[etimberg]

I think it can be closed

[ssmulders]

Have you tried the demo? http://codepen.io/pen/PGabEK
When panning/zooming with a touchpad, it's not working. It keeps sending the wrong event which leads to just being able to zoom in, not out.

Seems to be a Hammertime compatibility issue: https://github.com/hammerjs/hammer.js/issues/968