Skip to main content
Skip to main content

Complete tool reference

This page lists every documented user drawing type in ChartUI (34 tools). Use the live showcase to preview any tool, then copy the matching type string into your app.

Drawing preset
What this example shows

Two anchors define the direction. This is the cleanest programmatic entry point for support, resistance, and trend projection.

Live MDX exampletoolDrawer.drawTrendLine()trendLine1000 candlesBTC/USD fixture
Loading chart…

Legend: Anchors = placement clicks. Toolbar = available in ChartUI left menu (when using @efixdata/exeria-chart-ui-react).

Helper shortcuts: drawTrendLine(), drawTimeRange(), drawTimeBet(), drawLongShortPosition().

Lines and rays​

Trend line — trendLine​

Connect two points to show direction, support, or resistance.

AnchorsToolbarCreation
2YesdrawTrendLine() or drawTool()
chart.toolDrawer.drawTrendLine({
  startStamp: candles[10].stamp,
  endStamp: candles[30].stamp,
  startPrice: candles[10].l,
  endPrice: candles[30].h,
  config: { color: "#5cc8ff" },
});

Guide: Trend line.

Trend ray — trendRay​

Same as a trend line, but extends as a ray from the first point toward the plot edge.

AnchorsToolbar
2Yes
chart.toolDrawer.drawTool({
  type: "trendRay",
  color: "#5cc8ff",
  anchors: [
    { stamp: candles[10].stamp, offset: 0, value: candles[10].l, _index: 0 },
    { stamp: candles[30].stamp, offset: 0, value: candles[30].h, _index: 0 },
  ],
});

Horizontal line — hLine​

Flat price level across the panel. Use priceTag: true for a label.

AnchorsToolbar
1Yes
chart.toolDrawer.drawTool({
  type: "hLine",
  color: "#14f7ab",
  priceTag: true,
  anchors: [{ stamp: candles.at(-1)!.stamp, offset: 0, value: 42000, _index: 0 }],
});

Horizontal ray — hRay​

Horizontal line from one point to the right edge only.

AnchorsToolbar
1Yes

Vertical line — vLine​

Vertical line at one timestamp across the full panel height.

AnchorsToolbar
1Yes
chart.toolDrawer.drawTool({
  type: "vLine",
  color: "#f0b429",
  anchors: [{ stamp: candles[12].stamp, offset: 0, value: candles[12].c, _index: 0 }],
});

Vertical ray — vRay​

Vertical line from one point downward to the panel bottom.

AnchorsToolbar
1Yes

Cross line — crossLine​

One anchor draws both a horizontal and vertical line through the same point.

AnchorsToolbar
1Yes

Multi-line — mLine​

Custom polyline through three or more anchors (add more points interactively in ChartUI).

AnchorsToolbar
3+Yes
chart.toolDrawer.drawTool({
  type: "mLine",
  color: "#5cc8ff",
  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 },
    { stamp: candles[25].stamp, offset: 0, value: candles[25].c, _index: 0 },
  ],
});

Fibonacci, channels, and projections​

Guide: Levels and channels.

Fibonacci retracement — fibonLines​

Horizontal levels between two swings (23.6%, 38.2%, 50%, …).

AnchorsToolbar
2Yes

Pass values and valuesState to control which levels are visible.

Fibonacci extension — fibonExtension​

Extension levels beyond 100% of the measured move (127.2%, 161.8%, …).

AnchorsToolbar
2Yes

Fibonacci time zone — fibonTimeZone​

Vertical lines at Fibonacci time multiples from the distance between two anchors.

AnchorsToolbar
2Yes

Fibonacci channel — fibonChannel​

Trend line plus channel width; parallel Fib levels between edges.

AnchorsToolbar
3Yes

Fibonacci arcs — fibonArcs​

Semi-elliptical arcs; first anchor = center, second = 100% radius.

AnchorsToolbar
2Yes

Fibonacci circles — fibonCircles​

Concentric circles; first anchor = center, second = 100% radius.

AnchorsToolbar
2Yes

Parallel channel — parallelChannel​

Two anchors define the main line; a third sets channel width.

AnchorsToolbar
3Yes

Pitchfork — pitchfork​

Andrews pitchfork: pivot + two baseline points → median line and parallels.

AnchorsToolbar
3Yes

Regression channel — regressionChannel​

Least-squares fit between two times; ±σ bands. Shows Pearson R.

AnchorsToolbar
2Yes

Optional source: "c" for close prices.

Gann fan — gannFan​

Rays at Gann angles from origin; line to second anchor is the 1×1 reference.

AnchorsToolbar
2Yes

Gann grid — gannGrid​

Rectangle with Gann square grid lines (0, 0.25, 0.382, 0.5, 0.618, 0.75, 1).

AnchorsToolbar
2Yes

Gann box — gannBox​

Same grid as Gann grid plus internal fan diagonals from the first anchor.

AnchorsToolbar
2Yes

ABCD — abcd​

Measured-move projection with three anchors and configurable level ratios.

AnchorsToolbar
3Yes

Ranges, sessions, and tags​

Guide: Lines, ranges, and tags.

Horizontal range — hRange​

Measure and label a price distance between two levels.

AnchorsToolbar
2Yes

Vertical range — vRange​

Measure and label a time distance between two points.

AnchorsToolbar
2Yes

Time range — timeRange​

Shaded window on the time axis with optional label.

AnchorsToolbarCreation
2YesdrawTimeRange() or drawTool()
chart.toolDrawer.drawTimeRange({
  text: "London session",
  startTime: candles[20].stamp,
  timeRange: 4 * 60 * 60 * 1000,
  config: { color: "#5cc8ff" },
});

Time bet — timeBet​

Directional outcome box with reward/risk metadata (not in toolbar menu).

AnchorsToolbarCreation
helperNodrawTimeBet() only

Price tag — priceTag​

Pinned price label without a full-width line.

AnchorsToolbar
1Yes

Shapes and annotations​

Guide: Shapes and annotations.

Brush — brush​

Freehand stroke. Mouse: click and drag in ChartUI. Code: pass many sampled anchors.

AnchorsToolbar
dynamicYes

Arrow — arrow​

Directional arrow between two points.

AnchorsToolbar
2Yes

Ellipse — ellipse​

Ellipse inscribed in the bounding box of two anchors.

AnchorsToolbar
2Yes

Triangle — triangle​

Triangle through three corner anchors.

AnchorsToolbar
3Yes

Rectangle — box​

Axis-aligned box / zone highlight. Use fillBg: true to shade inside.

AnchorsToolbar
2Yes

Cycle — cycle​

Repeating interval or cadence marker between two time anchors.

AnchorsToolbar
2Yes

Text — textAnnotation​

Freeform text label. In toolbar under annotations; also creatable in code only.

AnchorsToolbar
2Yes
chart.toolDrawer.drawTool({
  type: "textAnnotation",
  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 },
  ],
});

Volume and trade planning​

Fixed range volume profile — fixedRangeVolumeProfile​

Volume histogram between two time anchors. Shows POC line and optional value area (default 70%).

AnchorsToolbar
2Yes (Analytical menu)
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 },
  ],
});

Long / short position — longShortPosition​

Paper-trading plan: entry, stop, and target. Not the same as live broker position lines.

AnchorsToolbarCreation
3Yes (Long/Short tools)drawLongShortPosition() or drawTool()
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,
});

Tutorial: Trade from chart.

Quick lookup table​

typeLabelAnchors
trendLineTrend line2
trendRayTrend ray2
hLineHorizontal line1
hRayHorizontal ray1
vLineVertical line1
vRayVertical ray1
crossLineCross line1
mLineMulti-line3+
fibonLinesFibonacci retracement2
fibonExtensionFibonacci extension2
fibonTimeZoneFibonacci time zone2
fibonChannelFibonacci channel3
fibonArcsFibonacci arcs2
fibonCirclesFibonacci circles2
parallelChannelParallel channel3
pitchforkPitchfork3
regressionChannelRegression channel2
gannFanGann fan2
gannGridGann grid2
gannBoxGann box2
abcdABCD3
hRangeHorizontal range2
vRangeVertical range2
timeRangeTime range2
timeBetTime bethelper
priceTagPrice tag1
brushBrushdynamic
arrowArrow2
ellipseEllipse2
triangleTriangle3
boxRectangle2
cycleCycle2
textAnnotationText2
fixedRangeVolumeProfileVolume profile2
longShortPositionLong / short position3

What is next?​