Skip to content

Drawing Tools

Interactive trendlines, horizontal lines, rectangles, Fibonacci retracements, the measure tool, and undo/redo.

Drag to draw — the shape previews under the cursor and commits on release, then pan returns. Two clicks also work for trendline / rectangle / fibonacci / measure. The measure tool shows the price change and % (green up, red down). Magnet snaps to candle O/H/L/C.

Code

typescript
import { PluginDrawingTools, PluginKeyboard } from 'velo-plot/trading'

await chart.use(PluginDrawingTools({
  color: '#38bdf8',
  magnet: true, // snap points to candle O/H/L/C
}))
await chart.use(PluginKeyboard())
chart.setDrawingMode('fibonacci')

Measure tool

Drag between two prices to measure the range. The box is green when price rises and red when it falls, with a label showing the absolute change, percentage change, and number of bars spanned.

typescript
await chart.use(PluginDrawingTools({
  magnet: true,
  measureUpColor: '#26a69a',   // optional, default green
  measureDownColor: '#ef5350', // optional, default red
}))

chart.setDrawingMode('measure')

Released under the MIT License.