Mouse scroll zoom in Vaadin charts

[JonRaw5]

Describe your motivation

The current implementation of zooming by dragging an area does not allow the user to zoom back out - only reset. If you have both zooming and panning enabled, when the user is trying to zoom to a specific point - any user error such as zooming again or in the wrong place cannot be corrected and therefore the user has to reset and start the process again.

Being able to scroll to zoom in / out makes this process more efficient for the user - especially with time series data.

Describe the solution you'd like

Have the mouse scroll option for zooming in charts - feature exists within Highcharts / Highstock (default) library already.

Example Demo From Highstock: https://www.highcharts.com/demo/stock/data-grouping

Describe alternatives you've considered

Currently working on a Java web app using Vaadin, have had to implement a scroll listener and have a client callable method that manually reduces / increases the xaxis extreme values - although this allows zooming using the scroll wheel it currently does not allow the user to zoom specifically to the pointer location on the chart. More complicated a solution than could be achieved and less robust - considering the functionality already exists in Highcharts

Additional context

No response

[DiegoCardoso]

Note that the feature mentioned has been introduced in the version 11.1.0 of Highcharts (https://www.highcharts.com/blog/changelog/#highcharts-v11.1.0). The mouse wheel behavior is enabled by default for Highcharts Stock charts, and it is also available to the core chart types by importing the mouse-wheel-zoom module.

As we currently use the 9.2.2 version, this option could be only introduced after we also update the HC dependency, which would require a new major.

---

The related API that controls the zooming behavior has been changed since the 9.2.2 version, so we need to address this API change as part of the upgrade:

chart: {
-  pinchType: 'x',
-  zoomType: 'x',
+  zooming: {
+    pinchType: 'x',
+    type: 'x'
+  },
  animation: false,
  width: 600
},

Therefore the Flow API should be changed accordingly:

var chart = new Chart();
var model = chart.getConfiguration().getChart();

// NEW API
var zooming = model.getZooming();
zooming.setType(Dimension.X);
zooming.setPinchType(Dimension.X);