CandlestickChart

CandlestickChart plots open/high/low/close price action over time, the standard view for financial series. Pass data as CandlestickDatum rows with date, open, close, low, high, and optional volume. Enable showVolume to add a volume sub-chart and showZoom (on by default) for the pan/zoom slider. It renders client-side via ECharts, so give it a height (defaults to 360).

Example

import { CandlestickChart } from '@officina/ui';

const data = [
  { date: 'Jun 2', open: 102, close: 108, low: 100, high: 110, volume: 32000 },
  { date: 'Jun 3', open: 108, close: 104, low: 103, high: 112, volume: 28500 },
  { date: 'Jun 4', open: 104, close: 114, low: 104, high: 116, volume: 41000 },
];

<CandlestickChart data={data} showVolume height={320} />;

API