CandlestickChart
StablePrice candles for open, high, low and close. Up and down are told apart by shape and by words, not by colour alone.
Also known as ohlc chart, stock chart
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Forty days with volume and a table
Acme price, 40 days
Price in dollars, one candle per day
The price drifted within a narrow range. Hollow candles closed up, filled candles closed down.
Source: demo data
<ChartFrame
title="Acme price, 40 days"
subtitle="Price in dollars, one candle per day"
summary="The price drifted within a narrow range. Hollow candles closed up, filled candles closed down."
table={candlestickTable(CANDLES_40, price)}
source="Source: demo data"
>
<CandlestickChart data={CANDLES_40} volume formatValue={price} ariaLabel="Acme daily price, 40 days" />
</ChartFrame>The usual setup. The frame adds a title, a summary and a View as table button.
When to use it
Shows how a price moved inside each period, so people can see the range and the direction at once.
Made of: Side scale with 4 to 6 marks · Thin grid lines · Candles: thin line and box · Volume strip (optional) · Bottom labels · Guide line and pop-up
Use it for
- A share, coin or any price with open, high, low and close for each day or minute.
- A live price where the last candle keeps changing: turn on streaming.
- Showing how much was traded under each candle: turn on volume.
Do and avoid
Acme share price
Price in dollars, last 10 days
Acme share price
Price in dollars, last 200 days
Do
- Put it in a ChartFrame with a summary and the table from candlestickTable.
- Keep up as hollow and down as filled, so direction never depends on colour alone.
- Turn on streaming when the last candle can still change.
- Say the currency or unit in the ChartFrame subtitle.
Avoid
- Don't use it for one value per day. Use a line chart.
- Don't squeeze hundreds of candles into a narrow space. Pass fewer candles or a longer period.
- Don't reverse the meaning of hollow and filled in one product.
On a phone
- The chart measures its container and redraws at that width.
- Touch or drag across the chart to read a candle. Vertical swipes still scroll the page, and the tooltip stays until you tap elsewhere.
- The tooltip flips to the left of your finger past the middle of the chart.
- Give the chart a short date range on a phone, because every candle needs room to be seen.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| datarequired | { t: string; o: number; h: number; l: number; c: number; v?: number }[] | none | One entry per candle, oldest first. t is a label such as a date or time. o, h, l and c are open, high, low and close. v is the volume. |
| height | number | 280 | Plot height in px, including the volume strip and the bottom labels. Minimum 160. |
| volume | boolean | none | Adds a thin volume strip under the prices on the same x scale. Needs v on the candles. |
| formatValue | (n: number) => string | formatNumber | Formats prices on the scale, in the pop-up and in the table. |
| ariaLabelrequired | string | none | Name for the chart region. |
| streaming | boolean | none | The last candle may still change. It gets a dashed outline and is called provisional. |
| className | string | none | Extra classes on the wrapper. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one CandlestickChart switches all of this from its properties panel, across 4 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Volume | volume | On or off |
| Streaming | streaming | On or off |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- focus
- A visible ring appears around the plot when you tab to it. The last candle is chosen at once, with its guide line and pop-up.
- hover
- Moving the pointer over the plot shows the guide line and pop-up for the candle under it. The pop-up hides when the pointer leaves, unless the chart has focus.
- selected candle
- Left, Right, Home and End move to a candle. Its guide line, pop-up and the volume bar get stronger, and its details are read out. Escape clears it.
- no data
- With an empty data list the chart draws only the empty axes.
- no volume
- With volume on but no v values on any candle, the strip is left out.
Tokens
Change one of these and every part that uses it follows.
--up--down--up-fg--down-fg--chart-grid--chart-axis--surface--fg--fg-muted--focus-ring--radius-overlay
Built in
- You can tab to the chart. Left and Right move between candles, Home and End jump to the ends, and Escape clears.
- Each step is read out as time, open, high, low, close, up or down with the size of the change, volume, and "provisional" when it applies.
- Up candles are hollow with a thin line and down candles are filled, so direction does not depend on colour.
- The pop-up and the table say "up" or "down" in words.
- The pop-up is hidden from screen readers, because the same values are read out as you move.
- Hovering or tapping a candle shows the same pop-up.
What you need to do
- Give it an ariaLabel that says what the price is and over what time.
- Put it in a ChartFrame with a summary in words, and pass candlestickTable to the table prop.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide