Drawing and interaction
Charts are not read-only. Users (or your code) can draw on them — trend lines, levels, Fibonacci, text — and interact — crosshair, pan, zoom, select objects.
Two paths:
| Path | Best for |
|---|---|
Code — toolDrawer | Alerts, saved layouts, AI-generated annotations |
| Mouse — ChartUI toolbar | Trading terminals, analyst workflows |
Draw a trend line (code)
chart.toolDrawer.drawTrendLine({
startStamp: candles[10].stamp,
endStamp: candles[30].stamp,
startPrice: candles[10].l,
endPrice: candles[30].h,
config: { color: "#5cc8ff" },
});
Pick two points from your candle array — start time/price and end time/price.
Mark a time range
Highlight a session or event window:
chart.toolDrawer.drawTimeRange({
text: "London session",
startTime: candles[20].stamp,
timeRange: 4 * 60 * 60 * 1000, // 4 hours in ms
config: {
color: "#f0b429",
textColor: "#f0b429",
},
});
Generic shapes — drawTool()
When you need full control over anchors and type:
chart.toolDrawer.drawTool({
type: "trendLine",
color: "#14f7ab",
width: 2,
anchors: [
{ stamp: candles[5].stamp, offset: 0, value: candles[5].l, _index: 0 },
{ stamp: candles[15].stamp, offset: 0, value: candles[15].h, _index: 0 },
],
});
Every built-in type (hLine, fibonLines, box, …) is listed in the Drawing tools catalog.
Draw with the mouse (ChartUI)
Wrap your chart in ChartUI and use the left toolbar — no code required for each line.
Tutorial: Drawing tools recipes.
Toolbar details: React UI toolbar and tools.
Try more shapes live
Two anchors define the direction. This is the cleanest programmatic entry point for support, resistance, and trend projection.
Change interaction mode
Crosshair, pan, draw mode — controlled via the interactor:
const interactor = chart.getInteractor();
interactor.setMode("CROSSHAIR");
Use crosshair when clicks should read a price (e.g. Trade from chart).
Remove a drawing
Keep the id returned when you create a shape:
const toolId = chart.toolDrawer.drawTrendLine({
startStamp: candles[1].stamp,
endStamp: candles[10].stamp,
startPrice: candles[1].l,
endPrice: candles[10].h,
});
if (toolId !== undefined) {
chart.toolDrawer.deleteTool(toolId);
}
ChartUI toolbars
| Bar | Location | Guide |
|---|---|---|
| Top toolbar | Above the chart | Type, interval, indicators, scale, settings — Top toolbar and mobile |
| Left menu | Beside the chart (desktop) or pencil rail (mobile) | Drawing tools — Drawing tools overview |
| Chart settings | Gear icon / ⋯ menu | Colors, layers, language — Chart settings |
Touch and mobile
On phones and tablets the chart supports:
| Gesture | Effect |
|---|---|
| Pan | Scroll along time |
| Pinch | Zoom |
| Long press | Context menu (go to start/end, toggle crosshair) |
Layout tips: Mobile and responsive.
Consumer example: Fintech integration demo.