Lines, ranges, and tags

Not every markup needs Fibonacci math. This group is the everyday stuff: flat price levels, vertical event lines, shaded time windows, and sticky price labels.

Drawing preset

What this example shows

The simplest price-level marker. A single anchor and optional price tag make it useful for levels users need to revisit.

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

Loading chart…

Quick picker

You want to mark…	Tool	Anchors
A price (support/resistance)	hLine	1
A moment in time	vLine	1
A session or review period	timeRange	2 or helper
A pinned price label	priceTag	1
A price or time span	hRange / vRange	2

---

Horizontal price level

The classic “support at 42,000” line:

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

priceTag: true prints the price on the line.

Rays: hRay and vRay stop at the plot edge instead of spanning the full panel. crossLine draws both axes through one point.

---

Vertical time marker

Mark an event — earnings, Fed announcement, your user’s entry time:

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

---

Time range — shaded session window

Highlight “London session” or “last 4 hours” on the time axis.

Helper (easiest)

chart.toolDrawer.drawTimeRange({
  text: "Review range",
  startTime: candles[20].stamp,
  timeRange: 4 * 60 * 60 * 1000, // 4 hours in ms
  config: {
    color: "#5cc8ff",
    secondaryColor: "rgba(255, 255, 255, 0.08)",
    textColor: "#F7FBFF",
  },
});

Or drawTool with two anchors

Same visual — use when both start and end times come from user clicks.

In ChartUI: Ranges → Time range — click or drag on the chart.

---

Price and time spans

Horizontal range — hRange

chart.toolDrawer.drawTool({
  type: "hRange",
  color: "#14f7ab",
  text: "Risk zone",
  anchors: [
    { stamp: candles[20].stamp, offset: 0, value: candles[20].l, _index: 0 },
    { stamp: candles[28].stamp, offset: 0, value: candles[28].h, _index: 0 },
  ],
});

Vertical range — vRange

chart.toolDrawer.drawTool({
  type: "vRange",
  color: "#5cc8ff",
  text: "Breakout window",
  anchors: [
    { stamp: candles[20].stamp, offset: 0, value: candles[20].l, _index: 0 },
    { stamp: candles[28].stamp, offset: 0, value: candles[28].h, _index: 0 },
  ],
});

---

Multi-line — mLine

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

---

Risk / outcome overlay — drawTimeBet

A time-boxed directional bet with reward/risk metadata — useful for education or paper-trading UIs:

chart.toolDrawer.drawTimeBet({
  startTime: candles[24].stamp,
  timeRange: 3 * 60 * 60 * 1000,
  price: candles[24].c,
  reward: 125,
  bet: 50,
  predictedDirection: "UP",
  status: "ACTIVE",
  isWinning: true,
  config: {
    color: "rgba(12, 18, 33, 0.72)",
    winningColor: "#25AD98",
    losingColor: "#D12E59",
    priceTag: true,
  },
});

Not in the left toolbar menu — code or custom UI only. See catalog.

---

Price tag

Pin a readable price label at a point:

chart.toolDrawer.drawTool({
  type: "priceTag",
  color: "#D12E59",
  anchors: [
    {
      stamp: candles[candles.length - 1].stamp,
      offset: 0,
      value: candles[candles.length - 1].c,
      _index: 0,
    },
  ],
});

ChartUI: Tag → Price tag.

---

What is next?

• Complete tool reference — all line and range types

• Shapes and annotations — boxes, arrows, text

• Trend line — simplest two-point line

• Drawing and interaction — crosshair and mobile