Preview Updated 2026-05-10

CandlestickChart

OHLC candlestick chart — green for up, red for down, with wick and body.

Basic usage

Data is passed in via props and rendered as plain SVG — no third-party charting library. Colors come from the --viz-1..8 tokens and are color-blind friendly.

src/App.vue vue

<CfCandlestickChart ... />

src/App.tsx tsx

<CfCandlestickChart ... />

Up / down trends

The up-vs-down color is chosen automatically by close >= open; wick and body share the same color.

↑ 上行

↓ 下行

src/App.vue vue

<CfCandlestickChart :data="ohlc" />

src/App.tsx tsx

<CfCandlestickChart data={ohlc} />

API

Prop	Type	Default	Description
`data`	`Candle[]`	`—`	{ open, high, low, close, label? }[]