Candlestick

OHLC financial chart — each period a high–low wick and an open↔close body, coloured up/down.

Category: chart · WCAG 2.1-AA · chart, candlestick, ohlc, financial, data-viz

Props

Prop	Type	Default	Description
`data`	`CandlestickDatum[]`	—	One candle per period: { t, open, high, low, close, volume? }.
`title`	`string`	—	Chart title (also aria-label).
`description`	`string`	—	Supporting description text.
`width`	`number`	—	Fixed SVG width in px. ⚠ Omit for a responsive chart — the chart fills and tracks its container via a ResizeObserver; there is no correct pixel number in a responsive grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for this — charts call it internally.
`height`	`number`	`320`	SVG height in px. Unlike `width`, height does NOT track the container — this is the knob you set to change the chart's aspect.
`yTicks`	`number`	`5`	Approximate number of ticks on the y-axis.
`upColor`	`string`	—	Colour for up candles (close ≥ open).
`downColor`	`string`	—	Colour for down candles (close < open).
`volume`	`boolean`	`false`	Render volume bars beneath the candles.
`tooltip`	`boolean`	—	Enable hover tooltip (OHLC).
`className`	`string`	—	Additional CSS class names merged onto the root element.
`plain`	`boolean`	`false`	Marks only — no axes. For micro/inline charts.
`annotations`	`Annotation[]`	—	Reference lines/bands/markers over the plot (e.g. a last-price rule).
`brush`	`boolean`	—	Keyboard-operable Brush below the plot to subset the candles to a window.
`dataZoom`	`boolean`	—	DataZoom slider below the plot — a Brush whose body also pans the window.
`zoom`	`boolean`	—	In-plot wheel/drag/keyboard zoom-pan (+/-/0) over the candle index window.
`syncId`	`string`	—	Connect charts sharing this id — they mirror the zoom window.
`tooltipMode`	`'item' \| 'axis'`	`item`	item (nearest candle) or axis (crosshair + OHLC at the hovered x).

Design tokens

--cascivo-chart-2
--cascivo-chart-4
--cascivo-chart-grid

When to use

Showing open/high/low/close price movement over time
Financial or trading dashboards needing per-period range + direction

When not to use

A single value trend — use LineChart
Non-financial categorical data — use BarChart

Examples

OHLC price series

import { Candlestick } from '@cascivo/charts'

<Candlestick
  title="ACME daily"
  tooltip
  data={[
    { t: 'Mon', open: 10, high: 14, low: 9, close: 13 },
    { t: 'Tue', open: 13, high: 15, low: 11, close: 11 },
    { t: 'Wed', open: 11, high: 12, low: 8, close: 9 },
  ]}
/>

Zoomable with a last-price rule

<Candlestick
  title="ACME daily"
  data={candles}
  volume
  zoom
  dataZoom
  tooltipMode="axis"
  annotations={[{ kind: 'line', axis: 'y', value: lastClose, label: '42.77' }]}
/>

Related components

LineChart — Use when only the closing price trend matters

← Back to docs