Drawing tools

69 built-in drawing tools. Each one snaps to the bars with the magnet, takes undo and redo, keeps its own settings, and is saved with the layout.

Drawing with the pointer

chart.setDrawingTool('trendLine')   // the next clicks draw a trend line
chart.setDrawingTool(null)          // back to the cursor
chart.setStayInDrawingMode(true)    // keep the tool after each drawing

A tool is drawn one of three ways:

• Clicks — one click per point (two for a trend line, five for an XABCD pattern).
• Freehand — press and drag; brush and highlighter.
• Path — one click per point, then a double-click, Enter, or a click on the last point ends it; path and polyline.

Escape drops a drawing that is not finished yet.

Adding drawings from code

const id = chart.addDrawing({
  type: 'fibRetracement',
  anchors: [{ time: t1, price: 101.2 }, { time: t2, price: 96.4 }],
  style: { color: '#f2a93b' },
  options: { reverse: true, extendRight: true },
})

chart.autoFib()   // a retracement over the dominant swing in view, or null

Settings

Besides its style (colour, width, line style, fill, text), a tool can offer settings of its own: Fibonacci levels, extending a line left or right, labels, a background, an icon, a wave degree. The settings dialog of the widget is built from them.

chart.getDrawingOptionDefs('fibRetracement')  // what the tool offers
chart.getDrawingOptions(id)                   // its values, defaults filled in
chart.setDrawingOptions(id, {
  levels: [{ value: 0.5, visible: true }, { value: 0.618, visible: true, color: '#e8505b' }],
})

// several changes as one undo step
chart.updateDrawing(id, { style: { lineWidth: 2 }, options: { extendLeft: true } })

// a dialog previewing changes: one undo step, or put back on cancel
chart.beginDrawingEdit(id)
chart.updateDrawing(id, { style: { color: '#26a69a' } })
chart.endDrawingEdit(id, { cancel: false })

// what every new Fibonacci retracement starts with
chart.setDrawingToolDefaults('fibRetracement', { showPrices: false })

Settings from a saved layout or a pasted drawing are checked against the tool; values it does not take are dropped.

Long/Short Position

riskReward: drag from the entry to the stop. The target sits the reward:risk ratio away, and its handle changes the ratio. From the account size and the risk (a percent of the account, or an amount) it works out the quantity, and shows each line's price, distance and profit or loss.

chart.setDrawingOptions(id, { accountSize: 25_000, riskMode: 'percent', risk: 1, rewardRatio: 3 })

Alerts on drawings

An alert can follow a trend line, ray, extended or horizontal line, or the lines of a parallel channel: it fires when the price crosses the line where it is at the latest bar, as drawn on the chart (straight across bars, and in log price on a log scale).

if (chart.canAddDrawingAlert(id)) {
  chart.addDrawingAlert(id, { condition: 'crossingUp', message: 'Broke the trend line' })
}

The alert goes with its drawing, comes back with it on undo, and is saved with the layout.

Order and groups

chart.moveDrawing(id, 'front')       // 'front' | 'forward' | 'backward' | 'back'
const group = chart.groupDrawings([a, b, c], 'Weekly levels')
chart.setDrawingGroupVisible(group, false)
chart.setDrawingGroupLocked(group, true)
chart.ungroupDrawings(group)

chart.getSelectedDrawingIds()
chart.removeDrawings(ids)            // one undo step
chart.setDrawingsVisible(ids, false)
chart.setDrawingsLocked(ids, true)

Clicking one drawing of a group selects the whole group.

Eraser, zoom and magnet

chart.setEraserMode(true)          // each click on a drawing removes it, until Escape
chart.setZoomAreaMode(true)        // the next drag zooms to the bars in its box
chart.setDrawingMagnetMode('strong') // 'off' | 'weak' | 'strong'

The weak magnet snaps a point to the bar's open, high, low or close when the pointer is near one; the strong magnet always does.

Keyboard

• Ctrl/⌘ + Z undo, Ctrl + Shift + Z or Ctrl + Y redo.
• Ctrl + C / V copy and paste drawings, Ctrl + D duplicate, Delete remove.
• Ctrl + G group the selection, Ctrl + Shift + G ungroup.
• Ctrl + ] / [ bring forward / send backward; with Shift, to the front / back.
• Enter ends a path; Escape drops the tool, the eraser, or the selection.

Events

chart.on('drawingCreate', (e) => e.payload)       // { id, type, drawing }
chart.on('drawingUpdate', (e) => e.payload)       // { id }
chart.on('drawingRemove', (e) => e.payload)       // { id }
chart.on('drawingDoubleClick', (e) => e.payload)  // { id }
chart.on('drawingContextMenu', (e) => e.payload)  // { id, x, y }
chart.on('toolModeChange', (e) => e.payload)      // { eraser } or { zoomArea }

Undo and redo send drawingCreate, drawingRemove and drawingUpdate for the drawings they bring back, take away or change.

Catalog

Lines

• trendLine — extends left or right when asked.
• ray, extendedLine
• horizontalLine, horizontalRay (forward in time from its point), verticalLine, crossLine
• infoLine — with a box of price change, bars, time and angle.
• trendAngle — with its on-screen angle.

Channels

• parallelChannel — with an optional middle line, extending either way.
• regressionChannel

Fibonacci

• fibRetracement, fibExtension — editable levels, prices and percentages, labels left or right, background, reverse.
• fibChannel, fibTimeZones, fibSpeedResistanceFan
• fibArcs — arcs around the start of a move, half or full circles.
• fibCircles — circles at Fibonacci multiples of a radius.
• fibSpiral — a golden spiral from its centre.
• fibWedge — arcs between two lines from an apex.

Gann and pitchforks

• pitchfork, schiffPitchfork, modifiedSchiffPitchfork
• pitchfan — rays from a pivot through levels between two points.
• gannFan, gannBox, gannSquare

Shapes

• rectangle, circle, ellipse, triangle
• polyline — a closed shape, a point per click.
• curve — bent through a third point; arc — a circle arc through three points.

Brushes

• brush, highlighter — freehand.
• path — a line through points, with an arrow at the end.

Patterns

• xabcdPattern, cypherPattern, abcdPattern, threeDrives — with their ratios.
• headAndShoulders — with the neckline.

Elliott waves

• elliottWave (1–5, A–C), elliottImpulse, elliottCorrection, elliottTriangle, elliottDoubleCombo, elliottTripleCombo — labels in the style of the wave degree: ①, (1), 1 or i.

Cycles

• cyclicLines, timeCycles, sineLine

Measuring

• measure, priceRange, dateRange, dateAndPriceRange

Notes and marks

• text, note (a pin with its text), callout, priceLabel
• arrow, arrowMark (up, down, left or right, with a label), flag, icon (star, heart, tick, cross, circle, triangles, bolt)

Forecasting

• riskReward — Long/Short Position (above).
• forecast — green once the price reaches the target, red when its time runs out first.
• projection — a move carried over from a third point.
• barsPattern — a copy of some bars, as bars, a line or high-low, mirrored or flipped.
• anchoredVWAP, volumeProfileRange

Saving

const json = chart.saveState()   // drawings, their settings and groups, indicators, alerts…
chart.loadState(json)            // checks every drawing; malformed ones are left out

Your own tools

A tool is a DrawingPlugin registered with chart.registerDrawingTool(plugin). Its descriptor lists its settings (options), how it is drawn (creation), and whether it has a fill or text; it may give the prices of its lines (priceAt, for alerts), move handles that are not anchors (moveHandle), and receive the chart's bars (setDataGetter). See Plugins.