In the onZoom/onPan callbacks, how can I detect if chart is currently zoomed/panned?

[MrJohz]

I have some charts where I want it to be possible to zoom and pan, and have a button available for resetting that zoom. Specifically, I want that button to only be visible if the chart is currently zoomed or panned — i.e. only if a reset is possible.

I can use chart.getZoomLevel() for zoom, but I have not found a good way to determine if the pan has changed. I have found the chart.scales[...].start and chart.scales[...].end attributes, which always show the current pan, but I don't know where to find the initial pan values.

Do you have any suggestions for how I could determine if the chart is currently zoomed or panned inside the onZoom/onPan callbacks? Thanks!

[LeeLenaleee]

You can just look up the original values in your source data, if the min/max values are out of the range that is shown the chart is panned/zoomed. Only works if you dont hardcap the scale limits

[MrJohz]

That doesn't work if the user zooms out, or if they zoom in but the data doesn't lie exactly between the scale limits (e.g. because of a suggestedMax/suggestedMin value), and so they don't zoom in "enough".

It also doesn't work brilliantly for my use-case, where I'm trying to create a Vue-specific wrapper around Chart.js that hooks it into the framework, but also has a sort of standard toolbox that users of our app can always access. One of those tools should be the ability to reset the zoom. So because this is a wrapper, I don't necessarily know what the bounds of the data are inside the wrapper.

Basically, I figure there's something in Chart.js that knows what the default scale and zoom values are, because I can call resetZoom() and it resets to those values. So my question is whether there's anyway to access those values from a callback and determine whether the chart is currently in the same place that it would be if I called resetZoom().

[kurkle]

Transferred this discussion to correct repository.

The zoom plugin stores the initial scale limits internally, and currently that information is not exposed. I'm not against adding a method to detect if the chart was panned though.

For now, you could hook into the onPan or onPanComplete hook and set a flag there.

[MrJohz]

I would really appreciate an easier way to access that information, if that's possible, and I'd be happy to put together an MR for that if that's helpful. (If my company wants this, they should probably pay a bit for the work time involved... 😉)

What I'm doing in the meantime is setting a "dirty" flag whenever the onPan or onZoom hooks are called, and resetting it in the onZoom hook if getZoomLevel() equals 1. It's not perfect, and occasionally you get the "reset" button showing at weird times, but it's working for now.

Thanks for moving this to the other repo, sorry about creating it in the wrong place. Thanks for your help!

[MrJohz]

I went ahead and created a pull request: #585 (Ask forgiveness not permission and all that!)