Trend line

A trend line connects two points on the chart — usually a low and a high — to show direction, support, or a breakout guide. It is the best first drawing tool because it has a dedicated one-line helper.

Drawing preset

Trend line

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…

What you need

• A chart with loaded candles
• Two moments in time and two prices (from your data or from a user click)

Easiest path — drawTrendLine

const toolId = chart.toolDrawer.drawTrendLine({
  startStamp: candles[10].stamp,
  endStamp: candles[30].stamp,
  startPrice: candles[10].l,
  endPrice: candles[30].h,
  config: {
    color: "#5cc8ff",
    editable: true,
  },
});

Field	Meaning
startStamp / endStamp	Left and right time (UTC ms)
startPrice / endPrice	Y position at each end
config.color	Line color
config.editable	User can drag anchors in ChartUI

Pick any two candles from your array — often a swing low and a later swing high.

Draw with the mouse

Select Trend line in the ChartUI left toolbar → click start point → click end point. Same shape, no code.

More control — drawTool

Use when you need width, dash, a custom name, or full anchor objects:

const toolId = chart.toolDrawer.drawTool({
  type: "trendLine",
  name: "breakout-guide",
  color: "#14f7ab",
  width: 2,
  dash: [8, 4],
  anchors: [
    {
      stamp: candles[5].stamp,
      offset: 0,
      value: candles[5].l,
      _index: 0,
      expandable: true,
      expanded: false,
      defaultDirection: "left",
    },
    {
      stamp: candles[18].stamp,
      offset: 0,
      value: candles[18].h,
      _index: 0,
      expandable: true,
      expanded: false,
      defaultDirection: "right",
    },
  ],
});

expandable anchors let the line extend beyond the two points after placement — standard in the React UI.

Delete later

if (toolId !== undefined) {
  chart.toolDrawer.deleteTool(toolId);
}

Store toolId when your app manages saved layouts.

Trend ray — trendRay

Same two points as a trend line, but the line extends as a ray from the origin (does not stop at the second point).

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 },
  ],
});

ChartUI: Lines → Trend ray. Live preview: Complete tool reference.

Related tools

Tool	Difference
trendRay	Covered above
parallelChannel	Two parallel lines — Levels and channels
hLine	Flat price level — Lines, ranges, and tags

What is next?

• Levels and channels — Fibonacci and channels
• Drawing tools recipes — tutorial walkthrough