Open-high-low-close Chart

Raw price ticks compile into OHLC summaries; vertical stems and side ticks encode high, low, open, and close.

Open-high-low-close Chart

Data Sources

7

Fields

21

Scales

3

Layers

12

Glyphs

49

line 32 / text 15 / rect 2

2026-05-04: open 82, high 90, low 82, close 902026-05-05: open 90, high 90, low 81, close 812026-05-06: open 81, high 91, low 81, close 912026-05-07: open 91, high 98, low 91, close 982026-05-08: open 98, high 98, low 90, close 902026-05-11: open 90, high 101, low 90, close 101May 3, 2026May 4, 2026May 6, 2026May 8, 2026May 10, 2026May 12, 20267883.288.493.698.8104GainLossSession move

Data Flow Diagram

0/467 nodes
0/883 edges
467 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.ohlc",
  "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": 78,
        "max": 104,
        "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": "high-low-stems",
      "mark": "line",
      "role": "data"
    },
    {
      "id": "open-ticks",
      "mark": "line",
      "role": "data"
    },
    {
      "id": "close-ticks",
      "mark": "line",
      "role": "data"
    }
  ]
}

Resolved SceneGraph

{
  "scene": "catalogue.ohlc.scene",
  "scales": [
    {
      "id": "x",
      "type": "time",
      "domain": [
        "2026-05-03",
        "2026-05-12"
      ],
      "range": [
        62,
        724
      ],
      "ticks": [
        1777766400000,
        1777921920000,
        1778077440000,
        1778232960000,
        1778388480000,
        1778544000000
      ]
    },
    {
      "id": "y",
      "type": "linear",
      "domain": [
        78,
        104
      ],
      "range": [
        284,
        42
      ],
      "ticks": [
        78,
        83.2,
        88.4,
        93.6,
        98.8,
        104
      ]
    },
    {
      "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": "high-low-stems",
      "role": "data",
      "zIndex": 10,
      "glyphs": 6
    },
    {
      "id": "open-ticks",
      "role": "data",
      "zIndex": 12,
      "glyphs": 6
    },
    {
      "id": "close-ticks",
      "role": "data",
      "zIndex": 12,
      "glyphs": 6
    },
    {
      "id": "x-labels",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 6
    },
    {
      "id": "y-labels",
      "role": "guide",
      "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

12 layers

Full parameter lineage for the active compiler surface.

y-grid

6

x-axis

1

y-axis

1

x-tick-marks

6

high-low-stems

6

open-ticks

6

close-ticks

6

x-labels

6

y-labels

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.