Drawing Tool APIs

Drawing Base Class

Abstract base class for all drawing tools. Provides common functionality for handle management, hit testing, and rendering.

Constructor

constructor(
  xc: ChartXControl,
  yc: ChartYControl,
  points?: TPoint[]
)

ChartXControl

required

X-axis control for coordinate transformations

ChartYControl

required

Y-axis control for coordinate transformations

points

TPoint[]

Optional array of points to initialize the drawing

TPoint Interface

type TPoint = {
  time: number,    // Unix timestamp
  value: number    // Price or indicator value
}

Properties

nHandles

number

Number of handles for the drawing. Set to 0 for variable-handle drawings (e.g., polyline).

handles

Handle[]

Array of handle objects representing control points

currHandleIdx

number

Index of the currently active handle during creation or editing

isCompleted

boolean

Whether the drawing has been fully created

isAnchored

boolean

Whether the current handle has been anchored

Abstract Methods

init

() => void

required

Initialize the drawing. Must set nHandles to the required number of control points.

plotDrawing

() => Seg[]

required

Render the drawing and return an array of SVG segments (Path, Texts, Circle, Rect, etc.).

hits

(x: number, y: number) => boolean

required

Test if a point (x, y) is on or near the drawing for selection.

Methods

anchorHandle

(point: TPoint) => boolean

Anchor the current handle at the given point. Returns true if the drawing is completed.

stretchCurrentHandle

(point: TPoint) => JSX.Element

Update the current handle position while dragging. Returns the rendered drawing.

dragDrawing

(point: TPoint) => JSX.Element

Move the entire drawing by dragging. Returns the rendered drawing.

recordHandlesWhenMousePressed

(point: TPoint) => void

Record handle positions before dragging starts.

insertHandle

(point: TPoint) => number

Insert a new handle at the given point (for variable-handle drawings). Returns the new handle index.

deleteHandleAt

(handleIdx: number) => void

Delete a handle at the specified index.

getHandleIdxAt

(x: number, y: number) => number

Get the index of the handle at position (x, y), or -1 if none found.

renderDrawing

(key: Key) => JSX.Element

Render the drawing without handles.

renderDrawingWithHandles

(key: Key) => JSX.Element

Render the drawing with visible handles for editing.

Helper Methods

plotLine

(baseX: number, baseY: number, k: number, path: Path) => void

Plot an infinite line through the chart given a base point and slope.

plotVerticalLine

(bar: number, path: Path) => void

Plot a vertical line at the specified bar index.

distanceToLine

(x: number, y: number, baseX: number, baseY: number, k: number) => number

Calculate the perpendicular distance from a point to a line.

Source: Drawing.tsx:14-269

LineDrawing

Draws a trend line between two points, optionally extended infinitely.

Properties

isExtended

boolean

default:"true"

Whether the line extends infinitely in both directions

nHandles

number

default:"2"

Always uses 2 handles (start and end points)

Example Usage

import { LineDrawing } from './lib/charting/drawing/LineDrawing';

const line = new LineDrawing(xc, yc);
line.anchorHandle({ time: 1678886400000, value: 100 });
line.anchorHandle({ time: 1678972800000, value: 105 });

Methods

hits

(x: number, y: number) => boolean

Returns true if the point is within 4 pixels of the line.Source: LineDrawing.tsx:12-30

plotDrawing

() => Seg[]

Renders the line. If isExtended is true, the line extends across the entire chart. Otherwise, it only draws between the two handles.Source: LineDrawing.tsx:32-54

FibonacciRetraceDrawing

Draws Fibonacci retracement levels between two price points.

Fibonacci Levels

Draws horizontal lines at the following retracement levels:

0% (0.0)
23.6% (0.236)
38.2% (0.382)
50% (0.500)
61.8% (0.618)
76.3% (0.763)
100% (1.0)
161.8% (1.618)
200% (2.0)
261.8% (2.618)
300% (3.0)
423.7% (4.237)

Properties

nHandles

number

default:"2"

Always uses 2 handles (start and end points)

Example Usage

import { FibonacciRetraceDrawing } from './lib/charting/drawing/FibonacciRetraceDrawing';

const fib = new FibonacciRetraceDrawing(xc, yc);
fib.anchorHandle({ time: 1678886400000, value: 95 });  // Swing low
fib.anchorHandle({ time: 1678972800000, value: 110 }); // Swing high

Methods

hits

(x: number, y: number) => boolean

Returns true if the point is within 4 pixels of any Fibonacci level line and within the horizontal range of the drawing.Source: FibonacciRetraceDrawing.tsx:26-51

plotDrawing

() => Seg[]

Renders horizontal lines at each Fibonacci level with percentage labels. Lines are only drawn if they fit within the chart canvas.Source: FibonacciRetraceDrawing.tsx:53-83

Source: FibonacciRetraceDrawing.tsx:5-88

Available Drawing Tools

The following drawing tools can be created using the createDrawing factory function:

createDrawing

function createDrawing(
  id: string,
  xc: ChartXControl,
  yc: ChartYControl
): Drawing | undefined

Supported Drawing IDs

line

string

Creates a LineDrawing - trend line between two points

fibonacci_retrace

string

Creates a FibonacciRetraceDrawing - horizontal Fibonacci retracement levels

fibonacci_retrace_v

string

Creates a FibonacciRetraceVerticalDrawing - vertical Fibonacci retracement levels

fibonacci_timezone

string

Creates a FibonacciTimeZoneDrawing - vertical lines at Fibonacci time intervals

gann_angles

string

Creates a GannAnglesDrawing - Gann fan angles

parallel

string

Creates a ParallelDrawing - parallel trend channel

polyline

string

Creates a PolylineDrawing - multi-point polyline (variable handles)

Example

import { createDrawing } from './lib/charting/drawing/Drawings';

// Create a line drawing
const drawing = createDrawing('line', xc, yc);

// Create a Fibonacci retracement
const fib = createDrawing('fibonacci_retrace', xc, yc);

// Create a parallel channel
const channel = createDrawing('parallel', xc, yc);

Source: Drawings.ts:11-37

Handle Class

Represents a control point for a drawing tool.

Properties

point

TPoint

The time and value coordinates of this handle

Constructor

constructor(
  xc: ChartXControl,
  yc: ChartYControl,
  point?: TPoint
)

Methods

hits

(x: number, y: number) => boolean

Returns true if the point is within 8 pixels of the handle center.Source: Drawing.tsx:301-307

render

(key: string) => JSX.Element

Renders the handle as a circle with 5-pixel radius.Source: Drawing.tsx:309-313

Usage Notes

Handles are rendered when a drawing is selected or being edited
Users can drag handles to reshape the drawing
For variable-handle drawings (like polyline), Ctrl+Click can insert/delete handles

Source: Drawing.tsx:271-323

Drawing Interaction

Creating a Drawing

Call createDrawing() with the desired drawing ID
User clicks to call anchorHandle() for each required point
Drawing is completed when all handles are anchored
For variable-handle drawings, Ctrl+Click completes the drawing

Editing a Drawing

Click on a drawing to select it (calls hits() to detect)
Drag handles to reshape using stretchCurrentHandle()
Drag the drawing body to move it using dragDrawing()
For polyline: Ctrl+Click to insert/delete handles

Deleting a Drawing

Selected drawings can be deleted through the UI, removing them from the drawings array in ChartView. Source: ChartView.tsx:618-931

Architecture

Customization

API Reference

Drawing Base Class

Constructor

TPoint Interface

Properties

Abstract Methods

Methods

Helper Methods

LineDrawing

Properties

Example Usage

Methods

FibonacciRetraceDrawing

Fibonacci Levels

Properties

Example Usage

Methods

Available Drawing Tools

createDrawing

Supported Drawing IDs

Example

Handle Class

Properties

Constructor

Methods

Usage Notes

Drawing Interaction

Creating a Drawing

Editing a Drawing

Deleting a Drawing

Build docs developers (and LLMs) love

Architecture

Customization

API Reference

​Drawing Base Class

​Constructor

​TPoint Interface

​Properties

​Abstract Methods

​Methods

​Helper Methods

​LineDrawing

​Properties

​Example Usage

​Methods

​FibonacciRetraceDrawing

​Fibonacci Levels

​Properties

​Example Usage

​Methods

​Available Drawing Tools

​createDrawing

​Supported Drawing IDs

​Example

​Handle Class

​Properties

​Constructor

​Methods

​Usage Notes

​Drawing Interaction

​Creating a Drawing

​Editing a Drawing

​Deleting a Drawing

Build docs developers (and LLMs) love

Drawing Base Class

Constructor

TPoint Interface

Properties

Abstract Methods

Methods

Helper Methods

LineDrawing

Properties

Example Usage

Methods

FibonacciRetraceDrawing

Fibonacci Levels

Properties

Example Usage

Methods

Available Drawing Tools

createDrawing

Supported Drawing IDs

Example

Handle Class

Properties

Constructor

Methods

Usage Notes

Drawing Interaction

Creating a Drawing

Editing a Drawing

Deleting a Drawing