Drawing Tools (Overlays)

Built-in drawing tools for lines, shapes, Fibonacci tools, wave patterns, and annotations. Add them via the left bar or API.

Usage

1. Select a tool from the left bar.
2. Click and drag on the chart to draw (multi-point tools: click each point, double-click or Enter to finish).
3. Right-click a drawing to edit colors, line style, width, and opacity.
4. In the Object Tree, toggle visibility, lock/unlock, or remove drawings.

Drawings are saved with layouts. With Drawing Sync enabled, drawings on one chart sync to other charts with the same symbol.

Configuration

Option	Type	Default	Description
leftBarEnabled	boolean	true	Show/hide the left bar (drawing tools)

new ChartSpire({
  leftBarEnabled: true,
  // ...
})

See Widget API — Constructor for all options.

Available Tools

List registered overlay names at runtime:

import { getSupportedOverlays } from '@chartspire/ui'

getSupportedOverlays()

Use the name value when creating overlays via API (e.g. 'segment', 'fibonacciCircle').

Lines — horizontalStraightLine, horizontalRayLine, horizontalSegment, verticalStraightLine, verticalRayLine, verticalSegment, straightLine, rayLine, segment, arrow, priceLine, priceChannelLine, parallelStraightLine

Fibonacci — fibonacciLine, fibonacciSegment, fibonacciCircle, fibonacciSpiral, fibonacciSpeedResistanceFan, fibonacciExtension, gannBox

Shapes — circle, rect, parallelogram, triangle

Waves — xabcd, abcd, threeWaves, fiveWaves, eightWaves, anyWaves

Measurement — ruler, longPosition, shortPosition

Annotations — simpleAnnotation, simpleTag

Built-in overlays are registered automatically when you import @chartspire/ui. Custom overlay registration is not part of the public API.

Adding Overlays via API

chartspire.getActiveChart()?.createOverlay('segment')
chartspire.getActiveChart()?.createOverlay({
  name: 'segment',
  lock: false,
  visible: true,
})
chartspire.getActiveChart()?.getOverlays()
chartspire.getActiveChart()?.removeOverlay({ name: 'segment' })

See Chart API — Overlays for createOverlay, getOverlays, overrideOverlay, and removeOverlay. Instance config types: OverlayCreate, OverlayOverride.

Overlay Settings

Right-click a drawing to change colors, line style, width, and opacity.

Via API — update an existing instance with overrideOverlay:

chartspire.getActiveChart()?.overrideOverlay({
  id: 'overlay_id',
  lock: true,
})

For widget-wide drawing styles (points, lines, shapes, text), see Custom Styles — Overlays.

Magnet Mode

Snap drawings to price points: Weak (subtle) or Strong (OHLC). Toggle via the magnet icon in the left bar.

Toolbar Controls

• Lock/Unlock — Prevent editing
• Show/Hide — Toggle all drawings
• Remove — Clear all drawings

Related

• Chart API — Overlays — add, update, remove instances
• Extension API — getSupportedOverlays
• Custom Styles — Overlays — global drawing styles
• Object Tree — visibility, lock, removal
• Synchronization — Drawing Sync — sync drawings across charts
• Layouts — save drawing state