Shapes and annotations

Use shapes when you want to highlight an area, point an arrow, scribble a note, or label a zone in plain language — not just lines across the chart.

Drawing preset

What this example shows

A box is the clearest choice for highlighting supply, demand, or consolidation zones with simple two-corner placement.

Live MDX exampletoolDrawer.drawTool({ type: "box" })box1000 candlesBTC/USD fixture

Loading chart…

Pick a shape

Shape	Type	Anchors	Good for
Rectangle	box	2	Supply/demand zone, date range box
Arrow	arrow	2	“Price went here” callout
Ellipse	ellipse	2	Soft highlight oval
Triangle	triangle	3	Three-point area
Brush	brush	many	Freehand circle or underline
Text	textAnnotation	2	“Supply zone” label

---

Rectangle zone (most common)

Drag opposite corners — or pass two anchors in code:

chart.toolDrawer.drawTool({
  type: "box",
  color: "#14f7ab",
  fillBg: true,
  style: "line",
  anchors: [
    { stamp: candles[14].stamp, offset: 0, value: candles[14].l, _index: 0 },
    { stamp: candles[22].stamp, offset: 0, value: candles[22].h, _index: 0 },
  ],
});

fillBg: true shades the inside. Great for “this region matters” in reports and education.

ChartUI: Shapes → Rectangle.

---

Arrow callout

chart.toolDrawer.drawTool({
  type: "arrow",
  color: "#f0b429",
  anchors: [
    { stamp: candles[8].stamp, offset: 0, value: candles[8].h, _index: 0 },
    { stamp: candles[10].stamp, offset: 0, value: candles[10].l, _index: 0 },
  ],
});

First anchor = tail, second = head (direction of the arrow).

---

Ellipse highlight

chart.toolDrawer.drawTool({
  type: "ellipse",
  color: "#5cc8ff",
  fillBg: false,
  anchors: [
    { stamp: candles[30].stamp, offset: 0, value: candles[30].l, _index: 0 },
    { stamp: candles[36].stamp, offset: 0, value: candles[36].h, _index: 0 },
  ],
});

Two corners of the bounding box — same mental model as box.

---

Triangle

Three corners:

chart.toolDrawer.drawTool({
  type: "triangle",
  color: "#D12E59",
  fillBg: true,
  anchors: [
    { stamp: candles[12].stamp, offset: 0, value: candles[12].l, _index: 0 },
    { stamp: candles[18].stamp, offset: 0, value: candles[18].h, _index: 0 },
    { stamp: candles[24].stamp, offset: 0, value: candles[24].l, _index: 0 },
  ],
});

---

Freehand brush

Mouse: select Brush in ChartUI → click and drag → release.

Code: pass many sampled anchor points along the stroke:

chart.toolDrawer.drawTool({
  type: "brush",
  color: "#f0b429",
  width: 2,
  fillBg: true,
  backgroundOpacity: 0.25,
  anchors: [
    { stamp: candles[12].stamp, offset: 0, value: candles[12].l, _index: 0 },
    { stamp: candles[14].stamp, offset: 0, value: candles[14].c, _index: 0 },
    // … more points from the drag path
  ],
});

---

Text label

textAnnotation is available in code but not in the visible toolbar menu yet:

chart.toolDrawer.drawTool({
  type: "textAnnotation",
  color: "#F7FBFF",
  text: "Supply zone",
  fontSize: 13,
  anchors: [
    { stamp: candles[16].stamp, offset: 0, value: candles[16].h, _index: 0 },
    { stamp: candles[18].stamp, offset: 0, value: candles[18].h, _index: 0 },
  ],
});

Two anchors set position and width of the text box.

---

Cycle overlay — cycle

chart.toolDrawer.drawTool({
  type: "cycle",
  color: "#5cc8ff",
  style: "line",
  anchors: [
    { stamp: candles[18].stamp, offset: 0, value: candles[18].c, _index: 0 },
    { stamp: candles[26].stamp, offset: 0, value: candles[26].c, _index: 0 },
  ],
});

---

Volume profile — fixedRangeVolumeProfile

chart.toolDrawer.drawTool({
  type: "fixedRangeVolumeProfile",
  color: "#5cc8ff",
  fillBg: true,
  showPoc: true,
  showValueArea: true,
  valueAreaPercent: 70,
  anchors: [
    { stamp: candles[10].stamp, offset: 0, value: candles[10].l, _index: 0 },
    { stamp: candles[40].stamp, offset: 0, value: candles[40].h, _index: 0 },
  ],
});

ChartUI: Analytical → Volume profile.

---

Long / short position — longShortPosition

chart.toolDrawer.drawLongShortPosition({
  direction: "LONG",
  startStamp: candles[20].stamp,
  endStamp: candles[28].stamp,
  entryPrice: candles[24].c,
  stopPrice: candles[20].l,
  targetPrice: candles[28].h,
  riskPercent: 1,
});

Paper-trade planning only — not live broker lines. See Trade from chart.

---

Mouse vs code

Tool	ChartUI toolbar	Code
box, arrow, ellipse, triangle, brush	✅	✅
textAnnotation	❌ (code only)	✅

Programmatic creation always covers the full runtime list.

What is next?

• Complete tool reference — all 36 drawing types
• Drawing tools recipes — tutorial