apache / apache/echarts

[Feature] Allow drag-to-zoom even when toolbox.feature.dataZoom.show is false

Open
#21,367 4 comments 0 reactions 0 assignees View on GitHub
en new-feature pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?

**Summary**

Currently, the rectangle drag-to-zoom gesture seems to be tied to the toolbox dataZoom feature. If I hide the toolbox button (toolbox.feature.dataZoom.show = false), I can still zoom with the mouse wheel via dataZoom: [{ type: 'inside' }], but I cannot drag-select a range to zoom. I’d like to enable the same drag-to-zoom gesture without showing the toolbox button.

**Use cases**

Clean/minimal UI where we don’t want any toolbar buttons.

Kiosk or embedded dashboards where gestures (wheel/drag) are preferred to visible controls.

Custom toolbars that control zoom state, while keeping ECharts’ native drag-zoom gesture.

**Current behavior**

dataZoom: [{ type: 'inside' }] enables wheel/pinch zoom and panning, but there is no built-in rectangle drag gesture unless the toolbox dataZoom button is visible and toggled.

**Desired behavior**

Provide a config to enable drag-to-zoom gesture independently of the toolbox visibility.

Example: users can hold a modifier key (e.g., Shift) and drag to select a window to zoom, or simply drag without a modifier (configurable).

**Live demo (CodeSandbox)**

Minimal repro: https://codesandbox.io/p/sandbox/dmwjy9

### What does the proposed API look like?

dataZoom: [{
type: 'inside',
dragToZoom: true, // NEW: enable rectangle drag zoom
dragModifierKey: 'shift', // 'none' | 'shift' | 'ctrl' | 'alt' (optional)
dragDirection: 'auto', // 'x' | 'y' | 'auto'
}]

(or) expose this via a new top-level interaction option:

interaction: {
dragZoom: { enable: true, modifierKey: 'shift', axis: 'x' }
}

Workarounds tried

dataZoom: [{ type: 'inside' }] → wheel zoom works, but no rectangle drag.

brush component can draw rectangles, but doesn’t behave like a smooth zoom gesture and needs additional glue code.

Custom pointer handlers → re-implementing zoom logic becomes non-trivial (coord transforms, axis sync, etc.).

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.