brand-ui — CandlestickChart

import { CandlestickChart } from "@elabs-ai/components-charts";

Install

npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui CandlestickChart chart (from @elabs-ai/components-charts) to this project.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Look CandlestickChart up before writing code: `npx -y @elabs-ai/components-cli docs CandlestickChart` prints its real props, variants, what it pairs with and what to avoid.
3. If @elabs-ai/components-charts is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`.
4. Use it here: [the screen or file, and what it should show]
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

Use it for

How did it change over time? Open, high, low, close.
open, high, low and close per period — an OHLC financial series over time

Avoid

the data is not OHLC-shaped — a line of closing values is enough

Examples

7 live examples

Default

Default — OHLC candles with grid, axes and tooltip. Rising candles are hollow (a --chart-1 outline) and falling candles solid (--chart-5), so up and down differ by shape as well as colour.

Loading

`status="loading"` (RM-182): a skeleton in the plot box the chart will fill, with one polite status message per chart, at 380, 600 and 900 px.

Rising (hollow) and falling (solid)

Rising vs falling — a rising candle (close above open) draws a HOLLOW body: an outline in the rising colour on the plot's own ground. A falling candle draws a SOLID body. The shape is the second channel beside colour (WCAG 1.4.1): in greyscale, an up day still reads apart from a down day. The wicks are unchanged.

No Animation

No animation — useful for screenshot tests and reduced-motion contexts.

Minimal

Minimal — candles only, no axes or grid.

With Accessible Label

Accessible variant — announces label + description to screen readers on focus.

Palette

`palette="diverging"` (RM-186): rising candles take `chartCssVars.signPositive`, falling ones `signNegative` — the two ends of the diverging ramp. The pair shares one lightness, so the hollow (rising) and solid (falling) bodies carry the sign where the hue cannot.

API

`CandlestickChart`

Prop	Type	Description
`data`required	`OHLCDataPoint[]`	OHLC data array
`xDataKey`	`string`	Key in data for the x-axis (date). Default: "date"
`margin`	`number \| Partial<Margin>`	Chart margins: one number for every side, or per side. Default: 40 on every side.
`animationDuration`	`number`	Animation duration in milliseconds. Default: 1100
`enterTransition`	`Transition`	Motion enter transition (spring or cubic-bezier tween).
`revealSignature`	`string`	Signature of motion URL state — triggers enter replay when it changes.
`aspectRatio`	`string`	Aspect ratio as "width / height". Default: "2 / 1"
`plotHeight`	`Responsive<ChartPlotHeight>`	The plot's own height (ADR 0039): px, or `{ aspect }` (width ÷ height), optionally per breakpoint. Wins over `aspectRatio`, which stays an alias.
`className`	`string`	Additional class name for the container
`status`	`ChartStatus`	Loading vs ready (RM-182). `"loading"` shows a skeleton in the plot box the chart will fill, with one polite status message, until the data is ready. Default: `"ready"`.
`style`	`React.CSSProperties`	Inline styles for the container (e.g. { height: 320 })
`candleGap`	`number`	Gap between candles as fraction of slot width (0–1). Default: 0.2. Ignored when candleWidth is set.
`candleWidth`	`number`	Fixed candle body width in pixels. If set, overrides candleGap.
`xDomain`	`[Date, Date]`	When set, xScale uses this domain instead of deriving from data. Use with brush so main chart and strip share the same scale.
`xDomainSlotCount`	`number`	When xDomain is set, use this as the number of slots for scale padding (e.g. full data length).
`children`required	`ReactNode`	Child components (Candlestick, Grid, XAxis, YAxis, ChartTooltip, etc.)
`accessibleLabel`	`ChartA11yProps["accessibleLabel"]`	Accessible name for the chart region (announces to AT on focus).
`accessibleDescription`	`ChartA11yProps["accessibleDescription"]`	Supplemental description read by AT (e.g. symbol name + date range).
`analytics`	`readonly ChartAnalytic[]`	Statistical overlays computed from the closes (RM-138 / RM-139, ADR 0040 §1): a moving average (`{ kind: "window", k: 20 }`, `reduce: "ewm"` for an EMA), a trend, or a computed line/band. Unset: no change.
`annotations`	`readonly ChartAnnotation[]`	Declarative annotations in data units — text notes, ranges and reference lines (RM-111). Always honoured at runtime through the shared annotation layer; RM-188 declares the prop so it is typed and documented.
`maxVisibleItems`	`ChartNavigatorProps["maxVisibleItems"]`	@deprecated has no effect on CandlestickChart; remove the prop.
`windowDomain`	`ChartNavigatorProps["windowDomain"]`	@deprecated has no effect on CandlestickChart; remove the prop.
`tooltip`	`boolean`	Show a hover/focus tooltip. Default `true`: with no `<ChartTooltip>` child the chart adds a default one; a `<ChartTooltip>` child (for `variant`, `rows`, `content`, …) replaces it. `false` turns the default off.
`palette`	`ChartPalette`	Colour ramp for the candles (RM-186): rising candles take the palette's gain colour and falling ones its loss colour (`"diverging"` is the sign pair, any other palette its first two colours). Unset: `--chart-1` / `--chart-5`, as before. Whatever the palette, a rising body is drawn hollow and a falling one solid, so the two never differ by colour alone.
`scrollbar`	`ChartScrollbarMode`	Strip style. Default `"none"` — a chart never grows a strip on its own (ADR 0040 decision b); a `window` / `defaultWindow` turns it on, as does `"miniChart"` / `"bar"` / `"auto"`.
`window`	`NavigatorWindow \| null`	Controlled window.
`defaultWindow`	`NavigatorWindow`	Initial window for the uncontrolled case.
`onWindowChange`	`(window: NavigatorWindow \| null, meta: NavigatorChangeMeta) => void`
`minSpan`	`number`	Smallest window the user can make: a duration in ms (time) or a row count (index). Default: 5× the median step (time; the stock-chart library' rule) / 3 (index).
`align`	`"start" \| "end"`	Where an automatic first window sits. `"end"` = the latest data (the associative BI suite `scrollStartPos: 1`). Default `"start"`.
`maxVisiblePoints`	`number`	Time-series families: with `scrollbar="auto"`, rows above this show the strip. Default 2000.
`zoom`	`boolean`	Pinch-to-zoom along the x axis (time x): two fingers on a touch screen, a trackpad pinch, or Ctrl/⌘ + wheel narrow the same window the strip moves; a two-finger drag pans it. `+` / `−` / `0` on the focused chart and the zoom buttons that appear once zoomed do the same from the keyboard. No strip is needed; with one, it follows. Default `true`; `false` leaves the gestures to the page. Off while the caller drives `xDomain` itself.

Also accepts: Omit<ChartNavigatorProps, "maxVisibleItems" | "windowDomain">, FrameSizeGroupProps, Pick<ChartStateGroupProps, "status">, Pick<TooltipGroupProps, "tooltip">

`Candlestick`

Prop	Type	Description
`animate`	`boolean`	Whether to animate the candlesticks. Default: true
`positiveFill`	`string`	Colour of rising candles (close >= open): the outline of their HOLLOW body and their wick. Rising bodies are hollow and falling ones solid, so up and down differ by shape as well as colour. Color or url(#gradient). Default: --chart-1
`negativeFill`	`string`	Fill of falling candles (a solid body) and their wick. Color or url(#gradient). Default: --chart-5
`bodyPatternPositive`	`string`	Optional pattern URL for the rising body (e.g. url(#pattern)). Setting it FILLS rising bodies — drawn solid first, then the pattern overlaid and masked to the body rect — instead of drawing them hollow.
`bodyPatternNegative`	`string`	Optional pattern URL for negative candle body.
`insideStrokeWidth`	`number`	Inner border width on the body (drawn inside so it does not expand the shape). Default: 0 (off).
`fadedOpacity`	`number`	Opacity when another candle is hovered. Default: 0.3
`showHoverFade`	`boolean`	Dim non-hovered candles on hover. Default: true