Unequal amounts of zooming when using mouse wheel

[hemmoleg]

Zooming in using the mouse wheel zooms in more then zooming out with the mouse wheel.

If you just add

wheel: {
  enabled: true
}

and then zoom in on step, the zoomLevel is 1.11, when you then zoom out on step, the zoomLevel is 1.01. This means that you always have to zoom out once more then what you zoomed in if you want to go back to zoomLevel 1. Also setting the speed property on the wheel object doesnt fix this.

You can try this for yourself by putting this

const config = {
  type: 'scatter',
  data: data,
  options: {
    scales: scales,
    plugins:{
      zoom:{
        zoom:{
          wheel:{
            enabled: true
          }
        }
      }
    }
  }
};

in the config of the demo chart here https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/api.html. Then zoom in once using the mouse wheel, zoom out once using the mouse wheel. After that if you now click on the 'Reset zoom' button you will notice that the chart zooms out just a tiny bit more.

[nicofunke]

I think the problem in that case is that the zoom factors are incorrect. The demo uses chart.zoom(1.1) and chart.zoom(0.9) for zooming in and out. But if we want to have a stepwise zoom which results in the same values after zooming in and out again we would need to calculate the zoom factors differently:

const ZOOM_STEP = 0.1;
const zoomInFactor = 1 + ZOOM_STEP;
const zoomOutFactor = 2 - 1 / (1 - ZOOM_STEP);

Usingthose values, stepwise zooming in and out can be achieved by calling chart.zoom(zoomInFactor ) and chart.zoom(zoomOutFactor).

E.g. in the api sample, the value should be 0.88888888... instead of 0.9