1 viewer
Back to Components
Component · Visualization

PriceChart

Price chart with indicator overlays, stacked sub-panes, compare series, drawings, candle/ohlc/line/area styles and a linear or log price axis; bars carry t/o/h/l/c/v per period, overlays and panes carry already-computed series aligned to the bars.

Category
Visualization
Slots
1
States
0
Writer
Legacy
cre8.primitive.price-chart

Preview

Live renderLegacy writer: PriceChart
Price 48.7 candle · linear
Thu 1 Jan 1970 00:00 UTC · O 42.1 H 44.5 L 41.8 C 44.2 · vol 1200Thu 1 Jan 1970 00:00 UTC · O 44.2 H 46 L 43.9 C 45.8 · vol 2400Thu 1 Jan 1970 00:00 UTC · O 45.8 H 45.9 L 43.1 C 43.5 · vol 1800Thu 1 Jan 1970 00:00 UTC · O 43.5 H 47.2 L 43.2 C 46.9 · vol 3100Thu 1 Jan 1970 00:00 UTC · O 46.9 H 49 L 46.5 C 48.7 · vol 420049.5841.2200:00:0000:00:0000:00:0000:00:0000:00:00
<PriceChart
  asset="C8/USD"
  bars={[
    { close: 44.2, high: 44.5, low: 41.8, open: 42.1, time: 1726700000, volume: 1200 },
    { close: 45.8, high: 46.0, low: 43.9, open: 44.2, time: 1726703600, volume: 2400 },
    { close: 43.5, high: 45.9, low: 43.1, open: 45.8, time: 1726707200, volume: 1800 },
    { close: 46.9, high: 47.2, low: 43.2, open: 43.5, time: 1726710800, volume: 3100 },
    { close: 48.7, high: 49.0, low: 46.5, open: 46.9, time: 1726714400, volume: 4200 }
  ]}
  height={280}
  resolution="1h"
/>

Variants

States and intents
Resolution knobs select real-time aggregation intervals.

Anatomy

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

SlotDOM class
root.cre8-price-chart
1 row

States and platforms

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States
No published states
Platforms
web
Recipes
unstyledruntime-console

Renderers

Legacy writer
PriceChart has no shared writer yet: the server renders it through its legacy path, which the WASM DOM does not share.

The example above still needs shared writers for: PriceChart.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

TargetRendererStatus
webreactexperimental
1 row

Accessibility

Semantic structure must stay available without visual styling.

  • Expose meaningful names for interactive controls.
  • Keep keyboard and pointer behavior equivalent where the platform supports it.
  • Publish state with native semantics and data attributes where the adapter supports them.