Charts

Candlestick Chart

OHLC candles. Default and Motion variants.

Examples

Default

Cronus OHLC candles. Success for up days, error for down.

tsx

<CandlestickChart data={CANDLES} />

Motion

OHLC candles with crosshair and date pill.

tsx

import { CandlestickChart, Candlestick, Grid, XAxis, YAxis, ChartTooltip } from "@cronus-ui/ui/charts";

<CandlestickChart data={data}>
  <Grid horizontal vertical />
  <Candlestick />
  <XAxis />
  <YAxis />
  <ChartTooltip />
</CandlestickChart>

Installation

Default is a ready-made wrapper from the registry. Motion is the composable engine at @cronus-ui/ui/charts (peer visx + motion).

bash

npx cronus-ui add candlestick-chart

tsx

import { CandlestickChart } from "@cronus-ui/ui";

Usage

tsx

import { CandlestickChart, Candlestick, Grid, XAxis, ChartTooltip } from "@cronus-ui/ui/charts";

<CandlestickChart data={ohlc}>
  <Grid horizontal />
  <Candlestick />
  <XAxis />
  <ChartTooltip />
</CandlestickChart>

Components

Motion API — compose these under the chart root. Default wrapper props are in Default API below.

CandlestickChart

OHLC time-series root. Y domain is high/low across the window.

Prop	Type	Default	Description
`data`*	`OHLCDataPoint[]`	—	Rows with date, open, high, low, close.
`xDataKey`	`string`	`"date"`	Time key.
`animationDuration`	`number`	`1500`	Enter duration in ms.
`aspectRatio`	`string`	`"2 / 1"`	CSS aspect ratio.

Candlestick

Wick + body. Positive (close ≥ open) vs negative fills. Hover dims others.

Prop	Type	Default	Description
`positiveFill`	`string`	`var(--color-emerald-500)`	Up-candle fill (color or url(#id)).
`negativeFill`	`string`	`var(--color-red-500)`	Down-candle fill.
`bodyPatternPositive`	`string`	—	Optional pattern URL over the up body.
`fadedOpacity`	`number`	`0.3`	Opacity when another candle is hovered.

Grid

Plot-area grid lines. Horizontal by default; optional shimmer while loading.

Prop	Type	Default	Description
`horizontal`	`boolean`	`true`	Show horizontal lines.
`vertical`	`boolean`	`false`	Show vertical lines.
`numTicksRows`	`number`	`5`	Horizontal line count.
`numTicksColumns`	`number`	`10`	Vertical line count.
`stroke`	`string`	`var(--chart-grid)`	Line color while ready.
`strokeDasharray`	`string`	`"4,4"`	Dash pattern.
`shimmer`	`boolean`	`false`	Animate a band across horizontal lines.
`highlightRowValues`	`number[]`	—	Rows drawn with alternate styling (e.g. zero).

Background

Pattern fill for the plot area when you omit Grid, or as a texture behind series.

Prop	Type	Default	Description
`pattern`	`PatternPresetId \| "none"`	—	Pattern preset. `none` renders nothing.
`color`	`string`	`var(--chart-grid)`	Pattern stroke color.
`opacity`	`number`	`1`	Pattern fill opacity.
`fadeHorizontal`	`boolean`	`true`	Fade at left/right edges.

XAxis

Time-axis labels that fade when the crosshair passes.

Prop	Type	Default	Description
`numTicks`	`number`	`5`	Tick labels to show, including first and last.
`tickerHalfWidth`	`number`	`50`	Fade radius around the date pill.
`tickMode`	`"data" \| "domain"`	`"data"`	`data` snaps labels to rows (crosshair-aligned). `domain` spaces ticks evenly.

ChartTooltip

Motion tooltip: crosshair, series dots, floating panel, optional date pill. This is not the recharts ChartTooltip from `@cronus-ui/ui`.

Prop	Type	Default	Description
`showDatePill`	`boolean`	`true`	Animated date ticker on the x-axis.
`showCrosshair`	`boolean`	`true`	Vertical crosshair.
`showDots`	`boolean`	`true`	Dots on series at the hovered x.
`dotVariant`	`"dot" \| "ring"`	`"dot"`	Filled circle or ring.
`indicatorColor`	`string \| (point) => string`	—	Crosshair and dot color.
`indicatorDasharray`	`string`	—	Dash pattern for the crosshair.
`indicatorFadeEdges`	`"both" \| "top" \| "bottom" \| "none"`	`"both"`	Vertical crosshair fade.
`matchCrosshair`	`boolean`	`false`	Panel uses the crosshair spring when true.
`damping`	`number`	`20`	Panel follow when matchCrosshair is false. 0 = instant.
`content`	`(props) => ReactNode`	—	Custom tooltip renderer.
`rows`	`(point) => TooltipRow[]`	—	Custom row generator.

Styling candles

Override positiveFill / negativeFill with tokens or gradients. Use ChartTooltip rows to print OHLC, and indicatorColor to match the hovered candle.

tsx

<Candlestick
  positiveFill="var(--cronus-success)"
  negativeFill="var(--cronus-danger)"
/>
<ChartTooltip
  indicatorColor={(point) =>
    Number(point.close) >= Number(point.open) ? "var(--cronus-success)" : "var(--cronus-danger)"
  }
/>

Data format

type OHLCDataPoint = {
  date: Date;
  open: number;
  high: number;
  low: number;
  close: number;
};

Theming

Motion charts read `--chart-*` aliases that map onto Cronus semantic tokens (`--cronus-chart-1`…`--cronus-chart-5`, `--cronus-border`, `--cronus-fg`, surfaces). Override the aliases or the tokens — never palette scales (`bg-zinc-900`). Default wrappers use `ChartConfig` with `var(--cronus-chart-*)` / `var(--cronus-primary)`. Candle direction uses success/danger colors, not the chart-1…5 ramp.

Full token reference: Theming.

Dependencies

Default needs the recharts peer. Motion needs visx (and sometimes d3) as optional peers — install only what this chart uses.

bash

bun add recharts

bash

bun add @visx/curve @visx/responsive @visx/scale @visx/shape motion react-use-measure

Default API

Generated from the Default wrapper's exported types. Motion subcomponents are documented above.

CandlestickChartProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`data`*	`CandlestickPoint[]`	—	—