Interactions & accessibility

Every live demo on this site is fully interactive — the points below apply to all of them.

Mouse

• Wheel — zoom both axes around the cursor.
• Drag the plot — pan left/right (time) and up/down (price).
• Drag the price axis — rescale price; drag the time axis — rescale bar spacing.
• Double-click — reset scale (fit content + autoscale).
• Hover a draggable order line — the cursor switches to ns-resize, the line thickens and its pill brightens; the cancel × and DOM-ladder rows show a pointer cursor. Dragging shows a dimmed ghost at the pre-drag price (see On-chart trading).

Time navigator (hover-revealed zoom controls)

Move the pointer near the bottom of the chart and a small control strip fades in just above the time axis — - + to zoom, ‹ › to step one bar at a time. It stays invisible otherwise, so a clean chart stays clean.

The buttons run the same commands as the keyboard shortcuts, so the two can never drift apart, and each tooltip shows the combo currently bound to that command — rebind zoomIn and the tooltip follows.

createChart(el);                              // on by default
createChart(el, { timeNavigator: false });    // drop it entirely
createChart(el, {                             // or restyle
  timeNavigator: { size: 30, revealHeight: 90, fadeSeconds: 0.2, showTooltip: false },
});

The controls live on the bottom pane and follow it when panes are added or removed. While hidden they hit-test to nothing, so they never steal a click from the chart underneath.

Touch

Touch works out of the box (touch-action: none on the container):

• single-finger drag pans,
• two-finger pinch zooms,
• two-finger drag pans both axes.

Keyboard & accessibility

The container is focusable (role="application", tabindex=0, an aria-label you can override) with a polite aria-live summary (bar count + latest price) that updates on data changes. When focused:

const chart = createChart(el, { ariaLabel: 'RELIANCE 5-minute candlestick chart' });

Screenshots & grid

const canvas = chart.takeScreenshot();           // composites all panes + overlays → canvas
chart.downloadScreenshot('reliance-5m.png');     // same composite, downloaded as a PNG
chart.setGridOptions({ vertLines: false });      // toggle grid lines at runtime