Drawing Tools

Select a tool below, then click and drag on the chart to draw. Click the active tool again to deactivate it.

Setup

import {
  Chart, CandlePanel,
  HorizontalRay, TrendLine, FibonacciRetracement,
  Rectangle, ParallelChannel,
} from 'chartgpu';

const chart = new Chart('#chart', { candles, timeframe: '1m' });
chart.addPanel(new CandlePanel());

const trendLine = new TrendLine();
const fib       = new FibonacciRetracement();
const rect      = new Rectangle();
const chan      = new ParallelChannel();
const hray      = new HorizontalRay();

chart.addTool(trendLine).addTool(fib).addTool(rect).addTool(chan).addTool(hray);

Activating a tool

Only one drawing tool can be active at a time. Pass a tool instance to activateTool, or null to deactivate:

chart.activateTool(trendLine); // click to start drawing
chart.activateTool(null);       // deactivate (pointer mode)

Available tools

Class	Description
HorizontalRay	Infinite horizontal price level
TrendLine	Line between two price/time points
FibonacciRetracement	Fib levels from high to low
Rectangle	Price range box
ParallelChannel	Two parallel trend lines

Clearing drawings

chart.clearDrawings(); // removes all drawn objects

Persisting drawings

Each tool exposes its drawn objects via getDrawings(). You can serialise them to JSON and restore them later:

// Save
const saved = chart.getTools().flatMap(t => t.getDrawings());
localStorage.setItem('drawings', JSON.stringify(saved));

// Restore
const stored = JSON.parse(localStorage.getItem('drawings') ?? '[]');
chart.loadDrawings(stored);