[Bug] Brush not working on mobile

[acj97]

Version

6

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=candlestick-brush

Steps to Reproduce

1. right click to inspect element
2. enable toggle device emulation
3. try to drag the brush

Current Behavior

when drag the brush it's doing the page scroll

Expected Behavior

when drag the brush, the brush moved

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

https://echarts.apache.org/examples/en/editor.html?c=candlestick-brush

i'm doing implementation using brush, my current issue is the brush is not working when we click and drag on the mobile. I also check the example it's also the same. Is there a way to make the brush works on mobile?
desktop:
https://github.com/user-attachments/assets/fdb832f1-de73-4cdb-9c74-e1c327f62165
mobile:
https://github.com/user-attachments/assets/ecd710fb-01f4-411b-8ca8-6b0a27448242

[helgasoft]

try with brush.brushStyle:{borderWidth:9}, you may be able to grab the border on mobile

[acj97]

try with brush.brushStyle:{borderWidth:9}, you may be able to grab the border on mobile

https://github.com/user-attachments/assets/90e6fb4a-9fff-481d-894c-0d0d2505acf2
i tried with borderWidth: 9 and borderWidth: 15 i still can't grab the border on mobile

[acj97]

i tried with real device it's working, but when using dev tools it's not working...

[helgasoft]

I checked with device toolbar in DevTools and it works for all phone dimensions.

[suii2210]

Hey, I’d like to pick this issue up.

I tested the example on both a real phone and DevTools. On an actual device the brush works fine, but in DevTools mobile mode the drag sometimes triggers page scrolling instead of moving the brush.

My plan is pretty simple:

When the user starts dragging the brush, I’ll temporarily set touch-action: none on the chart’s DOM so the browser doesn’t try to scroll the page.

When the drag ends, I’ll reset it back.

And for environments that don’t respect touch-action, I’ll add a non-passive touchmove/pointermove listener with preventDefault() only while the brush is active.

This keeps normal scrolling intact and only blocks it during the actual brush drag, so it’s safe.

If this approach looks good, I’ll start working on the PR.