[charts] Allow to zoom on data

[joserodolfofreitas]

We can currently zoom with axis properties min/max. But this kind of feature still requires:

• Add a min/max behavior on 'band' scale such that bar charts could also get it
• Add event listener and visualization to select zoom area
• define a DX to enable/disable/customize the zooming and scrolling

DX

Zoom behavior

Allows to choos if the axis interact together (see #12083) this is well defined in the section "How dataZoom components operates axes and data" https://echarts.apache.org/en/option.html#dataZoom

Display

Inside zoom

Allow to modify the zoom state by mousse interaction inside the chart

• select x/y ranges
• drag chart zoom with mouse move
• define how to swich from select to drag
• zoom +/- with the mouse wheel

https://echarts.apache.org/en/option.html#dataZoom-inside https://api.highcharts.com/highcharts/chart.zooming.mouseWheel

Slider zoom

Allow to modify the zoom state with sliders

• select x/y ranges
• drag zoom range

https://echarts.apache.org/en/option.html#dataZoom-slider https://api.highcharts.com/highstock/navigator

Search keywords:

[siseko]

This would be a pretty sweet feature

[JCQuintas]

Zoom Behaviour

Zoom & Pan Gestures

Allows users to zoom and pan using mouse/touch events. Seems to be the most straight forward for allowing users to interact with your data.

Will need customisation to allow which axis can be zoomed.

Examples: echarts, victory, visx, scichart

Takes:

• 🟢 More intuitive
• 🟡 Requires different handlers for touch & mouse
• 🟡 Harder to implement, zoom need to be on correct coordinates

Zoom with Click & Drag

It allows the user to "select" an area they want to zoom by "click & dragging" in the chart container. If the user wants to "zoom out" we need a different behaviour or button to handle that.

It doesn't feel as intuitive as Zoom & Pan Gestures, but could be helpful if you don't want users zooming in while scrolling. scichart actually allows it together with Zoom & Pan Gestures, by using different patterns for each behaviour.

Examples: highcharts, recharts, apexcharts

Takes:

• 🟢 Easier to implement
• 🟢 Mouse position can easily be extrapolated to new "axis min/max"
• 🟡 Not so intuitive to use
• 🟡 Requires a "reset zoom" button + translations?

[JCQuintas]

Visualisation / Overview

Slider

Is a helper component that allows the visualisation of the current zoom state. Usually shown as a Slider which is often called a Brush as well. It works good for line charts and series data, is a bit odd for scatter data, but can work as well if the axis are properly formatted.

Examples: echarts, visx brush, victory, scichart

Takes:

• 🟢 Allows for easy visualisation of zoomed data
• 🟡 Not so great for scatter, but sufficient as a first effort
• 🟡 Will require "drag and drop" implementation, maybe use from other packages?

Area Overview

Works better on non linear data, like scatter charts, but would require a different implementation.

Examples: visx zoom

• 🟢 Specialised for scattered data
• 🔴 Specialised for scattered data 🙃
  • We should probably skip it for now and implement if necessary only

[JCQuintas]

Axis Binding

The scichart library allows zooming to be bound to two different axis. Same for Echart by providing the xAxisIndex

Takes:

• 🟢 We already allow for multiple axis, this could build on top of that.

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@joserodolfofreitas: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.