wplong11 opened a new issue, #21627: URL: https://github.com/apache/echarts/issues/21627
### Version 5.5.0 ### Link to Minimal Reproduction https://gist.github.com/wplong11/d7a302b63901548cb64c84e9cdabf89b (Single HTML file — download and open locally, or view the source in the gist) ### Steps to Reproduce 1. Open the reproduction link above — it shows two vertically stacked grids (Grid 0: line, Grid 1: candlestick), with a y-axis `dataZoom` (start: 30, end: 70) on Grid 1 and `filterMode: 'none'`. 2. Observe that **candlestick wicks from Grid 1 bleed upward into Grid 0's area**, even though both series have `clip: true`. 3. Click **"Toggle filterMode"** to switch to `filterMode: 'empty'` — the bleed disappears immediately. 4. Click **"Toggle y-axis zoom"** to reset the y-axis zoom to full range — no bleed either. ### Current Behavior Candlestick wicks extend beyond Grid 1's boundary and render into Grid 0's area. Setting `clip: true` on the candlestick series has no effect in normal (non-large) rendering mode. This happens because `CandlestickView.render()` unconditionally calls `group.removeClipPath()` ([CandlestickView.ts:52](https://github.com/apache/echarts/blob/v5.5.0/src/chart/candlestick/CandlestickView.ts#L52)), and then relies solely on a per-item `isNormalBoxClipped()` check ([CandlestickView.ts:276-286](https://github.com/apache/echarts/blob/v5.5.0/src/chart/candlestick/CandlestickView.ts#L276-L286)). That check uses `clipArea.contain()` against each of the candlestick's `ends` points — if **any** point is inside the grid, the **entire** candlestick is rendered without pixel-level clipping. So a candle whose body is inside the grid but whose wick extends beyond passes the check and draws outside the grid boundary. By contrast, `LineView` and `BarView` both apply `group.setClipPath()` in normal mode: - [LineView.ts:744, 775](https://github.com/apache/echarts/blob/v5.5.0/src/chart/line/LineView.ts#L744) — canvas-level clip - [BarView.ts:222-273](https://github.com/apache/echarts/blob/v5.5.0/src/chart/bar/BarView.ts#L222) — layout clipping + canvas clip This inconsistency means candlestick is the only standard series type where `clip: true` does not actually clip rendering to the grid in normal mode. ### Expected Behavior Candlestick wicks and bodies should be clipped at the grid boundary when `clip: true` is set, consistent with how line and bar series behave. In the reproduction, Grid 1's candles should never render pixels outside Grid 1's area. ### Environment ```markdown - OS: macOS Sequoia 15.5 - Browser: Chrome 137 - Framework: N/A (vanilla HTML, also reproduced in React Native WebView) ``` ### Any additional comments? **Root cause summary** | What | File (v5.5.0) | Line | |---|---|---| | Normal mode removes clip path | `CandlestickView.ts` | [52](https://github.com/apache/echarts/blob/v5.5.0/src/chart/candlestick/CandlestickView.ts#L52) | | Per-item contain check (show-or-hide, not pixel clip) | `CandlestickView.ts` | [276-286](https://github.com/apache/echarts/blob/v5.5.0/src/chart/candlestick/CandlestickView.ts#L276-L286) | | Large mode **does** apply `setClipPath` | `CandlestickView.ts` | [174-179](https://github.com/apache/echarts/blob/v5.5.0/src/chart/candlestick/CandlestickView.ts#L174-L179) | | Grid clip rect helper | `createClipPathFromCoordSys.ts` | [32-105](https://github.com/apache/echarts/blob/v5.5.0/src/chart/helper/createClipPathFromCoordSys.ts#L32-L105) | **Workaround** Setting `dataZoom.filterMode: 'empty'` instead of `'none'` on the y-axis works around the issue. In `'empty'` mode, `AxisProxy` converts out-of-range data to NaN ([AxisProxy.ts:333-338](https://github.com/apache/echarts/blob/v5.5.0/src/component/dataZoom/AxisProxy.ts#L333-L338)), which causes the `data.hasValue()` check to skip those items entirely. However, this changes data semantics and may not always be acceptable. **Suggested fix** Apply `group.setClipPath(createClipPathFromCoordSys(...))` in candlestick normal mode when `clip: true`, the same way `LineView` and `BarView` do. The per-item `isNormalBoxClipped` check could be kept as an optimization to avoid rendering items that are entirely outside the clip area, but the canvas-level clip path is needed to handle partial overflow (body inside, wick outside). **Related issues** - #11010 — candle chart issue with `dataZoom.filterMode='none'` (v4, closed via #11529 which added the per-item check but not canvas clip) - #17858 — bar charts not clipped with `filterMode: 'none'` - #11240 — `clip` option tracking (candlestick not listed) - #21523 — candlestick overlaps Y axis -- 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]
