1. 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?
• Need to allow people to configure the auto-scaling behavior. e.g. highcharts, ag charts. Today done with https://next.mui.com/x/react-charts/zoom-and-pan/#zoom-filtering

Related:

• [Slider] Support track dragging with range sliders material-ui#17228 we likely want the slider to be draggeable, and to be built on Base UI Slider

Tasks:

• Basic implementation: [charts] Add zoom slider #17496
• Design review: [charts] Update zoom slider design #17682
• Range selection: [charts-pro] Add range selection to zoom slider #17949
• Show zoom range while dragging slider: [charts] Add zoom slider tooltip #17733
• Customize when zoom tooltip is shown: [charts-pro] Allow configuring zoom slider tooltip #18030
• Implement preview: [charts-pro] Add chart zoom preview #18267

Further improvements:

• [charts] Zoom slider tooltip improvements #18022

2. Mini map

For clarity mini map got moved in a dedicated issue: #17965