Interactions

EliteChart's interaction model has to handle three input modalities (mouse, trackpad, touch) and four reference frames (chart canvas, price axis, time axis, drawing handles). This page is the exhaustive vocabulary.

Quick example

'use client';
import { EliteChart } from '@elitechart/elitechart';
import '@elitechart/elitechart/styles.css';

export default function Page() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <EliteChart symbol="BTCUSD" timeframe="1h" />
    </div>
  );
}

How it works

Every gesture is dispatched through a central pointer-event router so the same code path handles a mouse, a trackpad, and a finger. Pinch is detected on pointerdown count; momentum scrolling is computed from the last 100 ms of pointer velocity at pointerup.

Chart canvas

Price axis (right edge)

Time axis (bottom edge)

Drawings

Variations

Disable pan on the chart

Phase 1b — the interactions prop will gate pan/zoom/right-click independently. For now, intercept at the wrapper:

<div onPointerDown={(e) => e.stopPropagation()}>
  <EliteChart />
</div>

Snap drawings to the nearest OHLC value

Toggle magnet from the left toolbar or:

import { useChartStore } from '@elitechart/elitechart';
useChartStore.getState().setMagnetEnabled(true);

Reduced motion

Every animation respects prefers-reduced-motion: reduce. When set, pan/zoom transitions instantaneously rather than easing.

Related

• Chart area
• Keyboard shortcuts
• Mobile layout recipe