Candlestick Chart

Financial price ticks are grouped into OHLC intervals, then wick lines and candle bodies render period movement.

Candlestick Chart

Data Sources

7

Fields

21

Scales

3

Layers

11

Glyphs

43

line 20 / text 15 / rect 8

Apr 5, 2026Apr 6, 2026Apr 8, 2026Apr 10, 2026Apr 12, 2026Apr 14, 20269296.8101.6106.4111.21162026-04-06: open 101, high 106, low 99, close 1032026-04-07: open 103, high 112, low 103, close 1122026-04-08: open 112, high 112, low 104, close 1042026-04-09: open 104, high 104, low 95, close 952026-04-10: open 95, high 103, low 95, close 1032026-04-13: open 103, high 111, low 103, close 110GainLossSession move

Data Flow Diagram

0/445 nodes
0/822 edges
445 hidden

Select a glyph to highlight its complete source path.

Scope

Roles

source
transform
field
scale
layer
param
glyph

No matching flow nodes

Adjust search, scope, or role filters.

Available Data

7 tables
1 transforms

Raw intraperiod prices

price-ticks
raw
5 columns
feeds session-ohlc

ChartSpec

{
  "id": "catalogue.candlestick",
  "data": [
    {
      "id": "price-ticks",
      "rows": 30
    },
    {
      "id": "ohlc",
      "rows": 6
    },
    {
      "id": "__guide.y-grid",
      "rows": 6
    },
    {
      "id": "__guide.x",
      "rows": 6
    },
    {
      "id": "__guide.y",
      "rows": 6
    },
    {
      "id": "__guide.direction-legend",
      "rows": 2
    },
    {
      "id": "__guide.direction-legend.title",
      "rows": 1
    }
  ],
  "transforms": [
    {
      "id": "session-ohlc",
      "type": "financialInterval",
      "input": "price-ticks",
      "output": "ohlc",
      "options": {
        "groupBy": [
          "date"
        ],
        "value": "price",
        "orderField": "sequence"
      }
    }
  ],
  "axes": [
    {
      "id": "x",
      "scale": "x",
      "orientation": "bottom",
      "tickFormat": {
        "style": "date"
      }
    },
    {
      "id": "y",
      "scale": "y",
      "orientation": "left"
    }
  ],
  "grids": [
    {
      "id": "y-grid",
      "scale": "y",
      "orientation": "y"
    }
  ],
  "legends": [
    {
      "id": "direction-legend",
      "scale": "color",
      "kind": "color",
      "title": "Session move"
    }
  ],
  "fields": [
    "price",
    "date",
    "open",
    "high",
    "low",
    "close",
    "direction",
    "tooltip",
    "sequence",
    "change",
    "changePercent",
    "range",
    "value",
    "label",
    "x",
    "y",
    "symbolX",
    "symbolY",
    "labelX",
    "labelY",
    "text"
  ],
  "scales": [
    {
      "id": "x",
      "type": "time",
      "domain": {
        "source": "field",
        "data": "ohlc",
        "field": "date",
        "padding": 0.08
      }
    },
    {
      "id": "y",
      "type": "linear",
      "domain": {
        "source": "field",
        "data": "ohlc",
        "field": "high",
        "min": 92,
        "max": 116,
        "padding": 0.03
      }
    },
    {
      "id": "color",
      "type": "ordinal",
      "domain": {
        "source": "field",
        "data": "ohlc",
        "field": "direction"
      }
    }
  ],
  "layers": [
    {
      "id": "y-grid",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "x-axis",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "x-tick-marks",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "x-labels",
      "mark": "text",
      "role": "guide"
    },
    {
      "id": "y-axis",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "y-labels",
      "mark": "text",
      "role": "guide"
    },
    {
      "id": "direction-legend-swatches",
      "mark": "rect",
      "role": "guide"
    },
    {
      "id": "direction-legend-labels",
      "mark": "text",
      "role": "guide"
    },
    {
      "id": "direction-legend-title",
      "mark": "text",
      "role": "guide"
    },
    {
      "id": "price-wicks",
      "mark": "line",
      "role": "data"
    },
    {
      "id": "candle-bodies",
      "mark": "rect",
      "role": "data"
    }
  ]
}

Resolved SceneGraph

{
  "scene": "catalogue.candlestick.scene",
  "scales": [
    {
      "id": "x",
      "type": "time",
      "domain": [
        "2026-04-05",
        "2026-04-14"
      ],
      "range": [
        62,
        724
      ],
      "ticks": [
        1775347200000,
        1775502720000,
        1775658240000,
        1775813760000,
        1775969280000,
        1776124800000
      ]
    },
    {
      "id": "y",
      "type": "linear",
      "domain": [
        92,
        116
      ],
      "range": [
        294,
        42
      ],
      "ticks": [
        92,
        96.8,
        101.6,
        106.4,
        111.2,
        116
      ]
    },
    {
      "id": "color",
      "type": "ordinal",
      "domain": [
        "Gain",
        "Loss"
      ],
      "range": [
        "var(--colors-green-9)",
        "var(--colors-red-9)",
        "var(--colors-gray-8)"
      ]
    }
  ],
  "layers": [
    {
      "id": "y-grid",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 6
    },
    {
      "id": "x-axis",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "y-axis",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "x-tick-marks",
      "role": "guide",
      "zIndex": 5,
      "glyphs": 6
    },
    {
      "id": "price-wicks",
      "role": "data",
      "zIndex": 10,
      "glyphs": 6
    },
    {
      "id": "x-labels",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 6
    },
    {
      "id": "y-labels",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 6
    },
    {
      "id": "candle-bodies",
      "role": "data",
      "zIndex": 20,
      "glyphs": 6
    },
    {
      "id": "direction-legend-swatches",
      "role": "guide",
      "zIndex": 30,
      "glyphs": 2
    },
    {
      "id": "direction-legend-labels",
      "role": "guide",
      "zIndex": 31,
      "glyphs": 2
    },
    {
      "id": "direction-legend-title",
      "role": "guide",
      "zIndex": 32,
      "glyphs": 1
    }
  ]
}

Glyph Data Tree

11 layers

Full parameter lineage for the active compiler surface.

y-grid

6

x-axis

1

y-axis

1

x-tick-marks

6

price-wicks

6

x-labels

6

y-labels

6

candle-bodies

6

direction-legend-swatches

2

direction-legend-labels

2

direction-legend-title

1

Glyph Inspector

none

Select a glyph in the chart to inspect resolved params and lineage.