Skip to content

fix(charts): scrolling over a chart scrolls the page #568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
samcm merged 1 commit into from
Nov 11, 2026
Merged

fix(charts): scrolling over a chart scrolls the page #568

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/components/Charts/Map2D/Map2D.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import type { Map2DChartProps, PointData, PointNodeData, RouteData } from './Map
const EMPTY_ROUTES: RouteData[] = [];
const EMPTY_POINTS: PointData[] = [];
import { useThemeColors } from '@/hooks/useThemeColors';
import { useCanHover } from '@/hooks/useCanHover';
import { ECHARTS_THEME } from '@/utils/echarts-theme';
import { ClientLogo } from '@/components/Ethereum/ClientLogo';

Expand Down Expand Up @@ -47,6 +48,7 @@ function Map2DChartComponent({
resetKey,
}: Map2DChartProps): React.JSX.Element {
const themeColors = useThemeColors();
const canHover = useCanHover();
const [mapLoaded, setMapLoaded] = useState(false);
const [hoveredPoint, setHoveredPoint] = useState<HoveredPointInfo | null>(null);
const chartRef = useRef<ReactECharts | null>(null);
Expand Down Expand Up @@ -307,7 +309,8 @@ function Map2DChartComponent({
: undefined,
geo: {
map: 'world',
roam: roam,
// A one-finger drag would pan the map instead of scrolling the page, so touch screens only pinch-zoom
roam: roam === true && !canHover ? 'scale' : roam,
silent: false,
center: [20, 20], // Center slightly towards Europe
zoom: 1.2, // Balanced zoom level
Expand Down Expand Up @@ -336,6 +339,7 @@ function Map2DChartComponent({
lineColor,
title,
roam,
canHover,
createScatterSeries,
themeColors.primary,
themeColors.foreground,
Expand Down
2 changes: 0 additions & 2 deletions src/components/Charts/MultiLine/MultiLine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1165,8 +1165,6 @@ export function MultiLineChart({
type: 'inside' as const,
xAxisIndex: 0,
filterMode: 'none' as const,
zoomOnMouseWheel: true,
moveOnMouseWheel: false,
moveOnMouseMove: true,
start: zoomRange.start,
end: zoomRange.end,
Expand Down
18 changes: 18 additions & 0 deletions src/utils/echarts-theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,22 @@ export const ECHARTS_THEME = 'lab';
// Canvas text cannot inherit CSS fonts, so every chart takes the UI typeface from this theme.
registerTheme(ECHARTS_THEME, {
textStyle: { fontFamily: CHART_FONT_FAMILY },
// On touch screens a one-finger swipe over a zoomable chart must scroll the page, not get swallowed
dataZoom: { preventDefaultMouseMove: globalThis.matchMedia?.('(hover: hover)').matches ?? true },

@redpandabot redpandabot Bot Nov 11, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 mobile swipe still pans the dataZoom window while the page scrolls

In ECharts' RoamController _mousemoveHandler (echarts 6.0.0 dist echarts.js ~49230) preventDefaultMouseMove only guards stop(e.event); the pan trigger runs regardless, and touch is routed through the same mousedown/mousemove handlers with moveOnMouseMove: true. So on hover-less devices a one-finger swipe over a MultiLine chart (enableDataZoom) now scrolls the page and shifts the dataZoom range for as many touchmove events as the browser delivers, which the PR's mobile row (only 0px/scrolls measured) doesn't cover. I did not run a browser to see how much drift survives once the scroll gesture cancels the pointer stream.

});

// Scrolling over a chart scrolls the page. ECharts swallows every wheel event over a zoomable or
// roamable chart (inside dataZoom, geo roam, echarts-gl view control), whatever its options say,
// so plain wheel events stop here before they reach any chart. Ctrl+wheel, which trackpad pinch
// also sends, still zooms.
if (typeof window !== 'undefined') {
window.addEventListener(
'wheel',
event => {
if (!event.ctrlKey && event.target instanceof Element && event.target.closest('[_echarts_instance_]')) {
event.stopPropagation();
}
},
{ capture: true, passive: true }
);
}
Loading