itshchen commented on issue #18735:
URL: https://github.com/apache/echarts/issues/18735#issuecomment-2921926472
Hello,
I'd like to share a solid and extensible solution to the problem described
in this issue — namely, the inconsistent behavior of the **Zoom Reset** button
in grouped ECharts instances (`echarts.connect`), and the undesired side
effects of using `restore()`.
## Problem Summary
Based on the issue and discussion, the core problem can be summarized as
follows:
When zoom is applied via the toolbox on one chart in a connected group
(echarts.connect), the zoom itself is synchronized across all linked charts
(typically via shared xAxis).
However, the Zoom Reset button becomes active and functional only on the
chart where the zoom action was initially performed.
Attempts to use a single shared toolbox for all charts often lead to UX
issues or unexpected behavior — users lose the ability to interact with charts
independently while maintaining synchronization.
Using the embedded dataZoom (type "inside") offers synchronized zoom and
reset functionality, but it lacks visual UI elements and is inconvenient for
charts with dense data.
The restore action resets the chart to its original state, but it also
removes dynamically added data such as real-time points, annotations (markLine,
markPoint), or runtime-injected series — making it unsuitable for interactive
or live dashboards.
## My Solution
This implementation provides a **global zoom reset mechanism** for all
charts connected via `echarts.connect()` — while fully preserving dynamic chart
state and real-time data.
### Key Aspects:
1. **Charts are grouped** using `echarts.connect('group1')` to enable
synchronized zooming and tooltips.
2. Each chart includes a standard toolbox with the `dataZoom` feature — no
customization or overriding is required.
3. A custom `bindZoomReset()` function listens to native canvas click events
and detects clicks on the built-in **Zoom Reset** button (`__title === "Zoom
Reset"`).
4. When detected, the function dispatches a `dataZoom` action **to all
charts in the group**, applying a predefined zoom range (e.g. `start: 0, end:
100`).
5. Crucially, this avoids using `restore()` — so dynamically appended data
(e.g. via live updates) remains untouched.
## Minimal Example
```js
function bindZoomReset(charts, minX = 0, maxX = 100) {
charts.forEach(chart => {
chart.getZr().on('click', event => {
if (event.target?.__title === 'Zoom Reset') {
charts.forEach(c => {
c.dispatchAction({
type: 'dataZoom',
start: minX,
end: maxX
});
});
}
});
});
}
// Basic usage with two connected charts
bindZoomReset([chart1, chart2]);
```
## Full Example Overview
In the live demo, a slightly more scalable version is used:
```js
const charts = [
{ chart: chart1, gen: i => [i, i, i] },
{ chart: chart2, gen: i => [i, i ** 2] }
];
bindZoomReset(charts.map(c => c.chart));
```
This pattern:
- Cleanly separates chart logic from reset logic
- Enables adding/removing charts without changing the function
- Supports real-time updates by pairing each chart with a data generator
- Keeps all charts responsive via a shared container (`flexbox` layout)
## Live Demo
[CodePen: Synchronized Zoom Reset
Demo](https://codepen.io/ITShchen/pen/gbpaydX)
## Outcome
- All connected charts reset zoom in sync when **any** chart’s Zoom Reset is
clicked
- Dynamic/live data is preserved (no use of `restore()`)
- Modular, extensible approach that works with any number of charts
- Responsive layout ready for dashboards and embedded contexts
## Final Note
I hope this solution addresses the challenge described by @ragava28 and
offers a practical workaround for others encountering similar issues with zoom
reset behavior in connected ECharts instances.
@Ovilia — if you find this approach reasonable, perhaps it could be
considered for inclusion in the official documentation or utility layer. I'd be
happy to collaborate further or polish it into a reusable plugin or example.
Thanks for your time and consideration!
Feel free to reach out via my GitHub profile if you'd like to discuss this
further.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
