Which colours mean up and down?

Up candles take the success colour and down candles the danger colour of the preset, so they follow your product's palette in light and dark.

How long a range reads well?

Ten days of four-hour candles, as in the sample (40 candles). For months, use daily candles, and for years weekly ones, so each body stays wide enough to read.

What data does the component expect?

One data object in the sample’s shape: open, high, low, close and volume per period. The docs page lists every field and links its JSON Schema; the sample data comes with the component, so you can start from it and swap in your own.

How do I change its colours?

Series take the preset’s data colours in order, and states such as up, down or warning take its status colours. Change the preset in Figma or in code to recolour every chart at once.

Which sizes does it ship in?

XS, S, M and L, in light and dark. Each size is laid out again from the data, so text and lines keep their size.

Does it animate when the data changes?

Yes. It plays in when it scrolls into view, and when the data changes every mark moves from its old place to its new one. With reduced motion on, it does not move.

Is it in the Figma kit and the code library?

Yes. The React component is free in the public registry in Hearth, no token needed; Signal comes with Code and Complete. The Figma component comes with Figma and Complete.

How do I install it with my coding agent?

Ask for it by name. The MCP server tells the agent what data it needs and runs the same command: npx shadcn add @chartory/candlestick. You review the diff.

Candlestick chart

Open, high, low and close, per period.

Definition · Updated Nov 2, 2026

A candlestick chart draws each period as a body from open to close with wicks to the high and low. Up periods and down periods take different colours. Use it for prices where the range inside each day matters as much as the close.

Get Chartory · from $149 Open in Figma Open in

Pay once. Every update included.

Live preview

SOL / USD · 4 h
Candle	Open	High	Low	Close	Volume
1	132.36	132.46	130.36	130.95	53.1
2	130.95	132.29	130.31	131.19	42.7
3	131.19	132.56	128.73	129.97	46.1
4	129.97	131.09	129.05	130.99	65.2
5	130.99	132.50	129.75	132.16	44.3
6	132.16	134.18	131.80	133.77	90.6
7	133.77	134.24	131.91	133.10	56.3
8	133.10	135.59	132.79	134.56	77.7
9	134.56	135.22	132.44	133.59	50.5
10	133.59	134.77	132.58	134.14	59.5
11	134.14	135.48	133.57	134.84	61.2
12	134.84	135.19	133.25	134.06	65.6
13	134.06	134.84	132.99	134.10	88.6
14	134.10	134.83	133.69	133.88	49.7
15	133.88	135.04	132.48	132.74	92.6
16	132.74	133.63	131.46	131.47	93.4
17	131.47	132.38	131.12	131.94	88.8
18	131.94	132.34	131.02	131.75	94.5
19	131.75	132.69	131.16	132.23	63.9
20	132.23	133.00	130.51	131.36	92.6
21	131.36	133.32	130.68	132.08	60.5
22	132.08	134.32	130.92	133.60	69.3
23	133.60	136.10	133.28	135.34	69.8
24	135.34	138.02	134.88	136.75	53.5
25	136.75	137.94	136.26	137.82	92.6
26	137.82	139.22	136.55	138.51	71.7
27	138.51	140.56	137.29	139.55	41.5
28	139.55	140.60	138.69	139.96	51.8
29	139.96	140.82	138.65	139.17	46.2
30	139.17	141.64	138.95	140.81	42.6
31	140.81	142.74	140.68	142.03	90.6
32	142.03	143.29	141.92	143.29	66.2
33	143.29	145.00	142.59	143.82	52.8
34	143.82	144.70	142.48	144.53	41.2
35	144.53	145.50	144.24	144.69	52.8
36	144.69	145.56	143.89	144.23	75.6
37	144.23	145.30	143.67	144.36	70.7
38	144.36	145.77	143.82	145.56	87.6
39	145.56	147.33	144.31	147.06	70.4
40	147.06	148.88	146.68	148.62	93.7

SOL / USD · 4 h
Candle	Open	High	Low	Close	Volume
1	132.36	132.46	130.36	130.95	53.1
2	130.95	132.29	130.31	131.19	42.7
3	131.19	132.56	128.73	129.97	46.1
4	129.97	131.09	129.05	130.99	65.2
5	130.99	132.50	129.75	132.16	44.3
6	132.16	134.18	131.80	133.77	90.6
7	133.77	134.24	131.91	133.10	56.3
8	133.10	135.59	132.79	134.56	77.7
9	134.56	135.22	132.44	133.59	50.5
10	133.59	134.77	132.58	134.14	59.5
11	134.14	135.48	133.57	134.84	61.2
12	134.84	135.19	133.25	134.06	65.6
13	134.06	134.84	132.99	134.10	88.6
14	134.10	134.83	133.69	133.88	49.7
15	133.88	135.04	132.48	132.74	92.6
16	132.74	133.63	131.46	131.47	93.4
17	131.47	132.38	131.12	131.94	88.8
18	131.94	132.34	131.02	131.75	94.5
19	131.75	132.69	131.16	132.23	63.9
20	132.23	133.00	130.51	131.36	92.6
21	131.36	133.32	130.68	132.08	60.5
22	132.08	134.32	130.92	133.60	69.3
23	133.60	136.10	133.28	135.34	69.8
24	135.34	138.02	134.88	136.75	53.5
25	136.75	137.94	136.26	137.82	92.6
26	137.82	139.22	136.55	138.51	71.7
27	138.51	140.56	137.29	139.55	41.5
28	139.55	140.60	138.69	139.96	51.8
29	139.96	140.82	138.65	139.17	46.2
30	139.17	141.64	138.95	140.81	42.6
31	140.81	142.74	140.68	142.03	90.6
32	142.03	143.29	141.92	143.29	66.2
33	143.29	145.00	142.59	143.82	52.8
34	143.82	144.70	142.48	144.53	41.2
35	144.53	145.50	144.24	144.69	52.8
36	144.69	145.56	143.89	144.23	75.6
37	144.23	145.30	143.67	144.36	70.7
38	144.36	145.77	143.82	145.56	87.6
39	145.56	147.33	144.31	147.06	70.4
40	147.06	148.88	146.68	148.62	93.7

SOL / USD · 4 h
Candle	Open	High	Low	Close	Volume
1	132.36	132.46	130.36	130.95	53.1
2	130.95	132.29	130.31	131.19	42.7
3	131.19	132.56	128.73	129.97	46.1
4	129.97	131.09	129.05	130.99	65.2
5	130.99	132.50	129.75	132.16	44.3
6	132.16	134.18	131.80	133.77	90.6
7	133.77	134.24	131.91	133.10	56.3
8	133.10	135.59	132.79	134.56	77.7
9	134.56	135.22	132.44	133.59	50.5
10	133.59	134.77	132.58	134.14	59.5
11	134.14	135.48	133.57	134.84	61.2
12	134.84	135.19	133.25	134.06	65.6
13	134.06	134.84	132.99	134.10	88.6
14	134.10	134.83	133.69	133.88	49.7
15	133.88	135.04	132.48	132.74	92.6
16	132.74	133.63	131.46	131.47	93.4
17	131.47	132.38	131.12	131.94	88.8
18	131.94	132.34	131.02	131.75	94.5
19	131.75	132.69	131.16	132.23	63.9
20	132.23	133.00	130.51	131.36	92.6
21	131.36	133.32	130.68	132.08	60.5
22	132.08	134.32	130.92	133.60	69.3
23	133.60	136.10	133.28	135.34	69.8
24	135.34	138.02	134.88	136.75	53.5
25	136.75	137.94	136.26	137.82	92.6
26	137.82	139.22	136.55	138.51	71.7
27	138.51	140.56	137.29	139.55	41.5
28	139.55	140.60	138.69	139.96	51.8
29	139.96	140.82	138.65	139.17	46.2
30	139.17	141.64	138.95	140.81	42.6
31	140.81	142.74	140.68	142.03	90.6
32	142.03	143.29	141.92	143.29	66.2
33	143.29	145.00	142.59	143.82	52.8
34	143.82	144.70	142.48	144.53	41.2
35	144.53	145.50	144.24	144.69	52.8
36	144.69	145.56	143.89	144.23	75.6
37	144.23	145.30	143.67	144.36	70.7
38	144.36	145.77	143.82	145.56	87.6
39	145.56	147.33	144.31	147.06	70.4
40	147.06	148.88	146.68	148.62	93.7

Sample data: spot price in four-hour candles, Sep 30 to Oct 9

Size

Data shape: Open, high, low, close and volume per period
Good for: Spot prices, trading ranges
Avoid when: Only the closing value matters
Sizes: XS, S, M and L, re-laid out from the data

Anatomy

Inspect it like the Figma file.

The same layers, names and tokens as the component. Select one to read its size, fill and style.

Layers

036 / Candlestick

chart/036-candlestick

plot · candles

Layer: volume 2
Type: Rectangle
Size: 12 × 14
Fill: status/success
Group: Marks · 120

Layers

036 / Candlestick

chart/036-candlestick

plot · candles

Layer: wick 1
Type: Rectangle
Size: 1 × 10
Fill: status/danger
Group: Marks · 120

Sizes

Re-laid out, never scaled.

The same data at XS, S, M and L. Every size is redrawn from the data, so text and line weights never shrink.

M against S

Width360 px480 px

Plot328 px440 px

Labels99

Marks120120

Height212 px246 px

Same tokens at every size: text styles, 1 px lines and mark radius stay put.

When to use

The range inside each day.

Three signs it fits, and three signs another type fits better.

Do open, high, low and close matter?

One value per period is enough.

Yes: Keep the candlestick

No: Use area chart011

Is time spaced evenly?

Only moves of a set size count.

Yes: Keep the candlestick

No: Use renko056

Is it the price itself?

The depth of the order book.

Yes: Keep the candlestick

No: Use order book depth053

Code and Figma

One name in Figma and in code.

Every Figma property is a prop with the same name and values. One command installs it.

Figma

chart/036-candlestick

size

legend

Property = propValuesDefault

size"xs" · "s" · "m" · "l""xs"

legendfalsefalse

color"cat-1" · "cat-2" · "cat-3" · "cat-4""cat-1"

npx shadcn add @chartory/candlestick

candlestick.tsx

import { Candlestick } from "@/components/chartory/candlestick"import { fourHourCandles } from "./four-hour-candles"export function FourHourCandles() {  return (    <Candlestick      data={fourHourCandles}      size="m"      legend={false}    />  )}

Hearth widget

The chart in a Hearth card with a hero number and two blocks. One token set, light and dark.

Code

Get the code

EmberPreset

ChartoryDefault preset

Pick the blocks, the size and the preset for your own widget.

Read the Hearth widget docs

FAQ

Candlestick questions.

What people ask before they put a candlestick in a dashboard.

Something else?

hello@usechartory.com

Up candles take the success colour and down candles the danger colour of the preset, so they follow your product's palette in light and dark.

Related types

The same question, a different shape of answer. Every type ships in Figma and in code.

Same family

Change over time

Trends, levels and seasons across days, months or years.

Candlestick chart

Inspect it like the Figma file.

Re-laid out, never scaled.

The range inside each day.

Do open, high, low and close matter?

Is time spaced evenly?

Is it the price itself?

One name in Figma and in code.

Candlestick as a widget.

Candlestick questions.

DataWhich colours mean up and down?

DataHow long a range reads well?

CodeWhat data does the component expect?

FigmaHow do I change its colours?

FigmaWhich sizes does it ship in?

CodeDoes it animate when the data changes?

CodeIs it in the Figma kit and the code library?

CodeHow do I install it with my coding agent?

Other ways to show change over time.

Change over time