What do the two colours mean?

One colour when longs pay shorts, the other when shorts pay longs, and a deeper shade for a larger rate. The legend names both sides.

Why is there a price line on top?

Funding follows the market: long runs of longs paying usually come with a rising price. The BTC price line lets you read the two together.

What data does the component expect?

One data object in the sample’s shape: a signed rate per period and the price. 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/funding-stripes. You review the diff.

Funding stripes chart

Who pays whom, one stripe per period.

Definition · Updated Nov 2, 2026

A funding stripes chart colours each period by the sign and size of a rate, so long stretches of one side paying the other read as bands. A price line on top shows what the market did meanwhile. Use it for perpetual funding rates and other signed rates over time.

Get Chartory · from $149 Open in Figma Open in

Pay once. Every update included.

Live preview

BTC perp funding
Day	Funding (%)	BTC ($K)
12 Jul	0.0031	58.3
13 Jul	0.0048	59
14 Jul	0.0115	59.15
15 Jul	0.0074	59.71
16 Jul	0.0162	60.39
17 Jul	0.0132	59.87
18 Jul	0.0118	59.52
19 Jul	0.0206	60.18
20 Jul	0.0218	60.79
21 Jul	0.0178	60.76
22 Jul	0.0214	60.5
23 Jul	0.0251	61.17
24 Jul	0.0212	61.73
25 Jul	0.0146	61.95
26 Jul	0.0152	61.48
27 Jul	0.0224	62.07
28 Jul	0.0141	61.73
29 Jul	0.0148	61.51
30 Jul	0.0149	60.92
31 Jul	0.0144	60.91
1 Aug	0.0135	60.37
2 Aug	0.017	60.39
3 Aug	0.0139	60.06
4 Aug	0.0182	59.9
5 Aug	0.0096	60.34
6 Aug	0.0162	59.77
7 Aug	0.0129	59.87
8 Aug	0.0149	59.63
9 Aug	0.0136	60.2
10 Aug	0.0026	59.77
11 Aug	0.0039	60.37
12 Aug	0.003	60.64
13 Aug	0.0042	60.16
14 Aug	0.0039	59.81
15 Aug	0.0029	60.05
16 Aug	0.0041	60.64
17 Aug	-0.0068	60.24
18 Aug	-0.0026	59.76
19 Aug	0.002	59.33
20 Aug	0.0019	59.6
21 Aug	0.0005	59.93
22 Aug	-0.0068	59.33
23 Aug	-0.0045	59.57
24 Aug	-0.001	60.28
25 Aug	-0.0072	60.95
26 Aug	-0.0071	61.03
27 Aug	0.0003	60.62
28 Aug	-0.0052	61.17
29 Aug	0.0032	61
30 Aug	0.0037	61.06
31 Aug	0.005	61.53
1 Sept	0.0068	61.9
2 Sept	0.0007	62.12
3 Sept	0.0018	62.06
4 Sept	0.0089	62.49
5 Sept	0.0087	62.8
6 Sept	0.011	62.88
7 Sept	0.0099	63.29
8 Sept	0.0073	62.72
9 Sept	0.0124	62.54
10 Sept	0.0107	62.87
11 Sept	-0.026	62.83
12 Sept	-0.0198	62.34
13 Sept	-0.0302	61.76
14 Sept	-0.0187	61.54
15 Sept	-0.0215	60.51
16 Sept	-0.0256	59.63
17 Sept	-0.0225	59.05
18 Sept	-0.0281	58.5
19 Sept	-0.0358	58
20 Sept	0.0222	58.7
21 Sept	0.0222	59.07
22 Sept	0.0187	58.67
23 Sept	0.0224	59.36
24 Sept	0.0134	59.76
25 Sept	0.0227	60.01
26 Sept	0.0168	59.86
27 Sept	0.0173	59.23
28 Sept	0.0107	59.37
29 Sept	0.0131	59.07
30 Sept	0.016	59.63
1 Oct	0.0101	59.58
2 Oct	0.0073	60.05
3 Oct	0.008	59.78
4 Oct	0.0091	59.91
5 Oct	0.01	60.44
6 Oct	0.0055	60.41
7 Oct	0.0017	59.96
8 Oct	0.0014	59.37
9 Oct	0.008	59.93

BTC perp funding
Day	Funding (%)	BTC ($K)
12 Jul	0.0031	58.3
13 Jul	0.0048	59
14 Jul	0.0115	59.15
15 Jul	0.0074	59.71
16 Jul	0.0162	60.39
17 Jul	0.0132	59.87
18 Jul	0.0118	59.52
19 Jul	0.0206	60.18
20 Jul	0.0218	60.79
21 Jul	0.0178	60.76
22 Jul	0.0214	60.5
23 Jul	0.0251	61.17
24 Jul	0.0212	61.73
25 Jul	0.0146	61.95
26 Jul	0.0152	61.48
27 Jul	0.0224	62.07
28 Jul	0.0141	61.73
29 Jul	0.0148	61.51
30 Jul	0.0149	60.92
31 Jul	0.0144	60.91
1 Aug	0.0135	60.37
2 Aug	0.017	60.39
3 Aug	0.0139	60.06
4 Aug	0.0182	59.9
5 Aug	0.0096	60.34
6 Aug	0.0162	59.77
7 Aug	0.0129	59.87
8 Aug	0.0149	59.63
9 Aug	0.0136	60.2
10 Aug	0.0026	59.77
11 Aug	0.0039	60.37
12 Aug	0.003	60.64
13 Aug	0.0042	60.16
14 Aug	0.0039	59.81
15 Aug	0.0029	60.05
16 Aug	0.0041	60.64
17 Aug	-0.0068	60.24
18 Aug	-0.0026	59.76
19 Aug	0.002	59.33
20 Aug	0.0019	59.6
21 Aug	0.0005	59.93
22 Aug	-0.0068	59.33
23 Aug	-0.0045	59.57
24 Aug	-0.001	60.28
25 Aug	-0.0072	60.95
26 Aug	-0.0071	61.03
27 Aug	0.0003	60.62
28 Aug	-0.0052	61.17
29 Aug	0.0032	61
30 Aug	0.0037	61.06
31 Aug	0.005	61.53
1 Sept	0.0068	61.9
2 Sept	0.0007	62.12
3 Sept	0.0018	62.06
4 Sept	0.0089	62.49
5 Sept	0.0087	62.8
6 Sept	0.011	62.88
7 Sept	0.0099	63.29
8 Sept	0.0073	62.72
9 Sept	0.0124	62.54
10 Sept	0.0107	62.87
11 Sept	-0.026	62.83
12 Sept	-0.0198	62.34
13 Sept	-0.0302	61.76
14 Sept	-0.0187	61.54
15 Sept	-0.0215	60.51
16 Sept	-0.0256	59.63
17 Sept	-0.0225	59.05
18 Sept	-0.0281	58.5
19 Sept	-0.0358	58
20 Sept	0.0222	58.7
21 Sept	0.0222	59.07
22 Sept	0.0187	58.67
23 Sept	0.0224	59.36
24 Sept	0.0134	59.76
25 Sept	0.0227	60.01
26 Sept	0.0168	59.86
27 Sept	0.0173	59.23
28 Sept	0.0107	59.37
29 Sept	0.0131	59.07
30 Sept	0.016	59.63
1 Oct	0.0101	59.58
2 Oct	0.0073	60.05
3 Oct	0.008	59.78
4 Oct	0.0091	59.91
5 Oct	0.01	60.44
6 Oct	0.0055	60.41
7 Oct	0.0017	59.96
8 Oct	0.0014	59.37
9 Oct	0.008	59.93

BTC perp funding
Day	Funding (%)	BTC ($K)
12 Jul	0.0031	58.3
13 Jul	0.0048	59
14 Jul	0.0115	59.15
15 Jul	0.0074	59.71
16 Jul	0.0162	60.39
17 Jul	0.0132	59.87
18 Jul	0.0118	59.52
19 Jul	0.0206	60.18
20 Jul	0.0218	60.79
21 Jul	0.0178	60.76
22 Jul	0.0214	60.5
23 Jul	0.0251	61.17
24 Jul	0.0212	61.73
25 Jul	0.0146	61.95
26 Jul	0.0152	61.48
27 Jul	0.0224	62.07
28 Jul	0.0141	61.73
29 Jul	0.0148	61.51
30 Jul	0.0149	60.92
31 Jul	0.0144	60.91
1 Aug	0.0135	60.37
2 Aug	0.017	60.39
3 Aug	0.0139	60.06
4 Aug	0.0182	59.9
5 Aug	0.0096	60.34
6 Aug	0.0162	59.77
7 Aug	0.0129	59.87
8 Aug	0.0149	59.63
9 Aug	0.0136	60.2
10 Aug	0.0026	59.77
11 Aug	0.0039	60.37
12 Aug	0.003	60.64
13 Aug	0.0042	60.16
14 Aug	0.0039	59.81
15 Aug	0.0029	60.05
16 Aug	0.0041	60.64
17 Aug	-0.0068	60.24
18 Aug	-0.0026	59.76
19 Aug	0.002	59.33
20 Aug	0.0019	59.6
21 Aug	0.0005	59.93
22 Aug	-0.0068	59.33
23 Aug	-0.0045	59.57
24 Aug	-0.001	60.28
25 Aug	-0.0072	60.95
26 Aug	-0.0071	61.03
27 Aug	0.0003	60.62
28 Aug	-0.0052	61.17
29 Aug	0.0032	61
30 Aug	0.0037	61.06
31 Aug	0.005	61.53
1 Sept	0.0068	61.9
2 Sept	0.0007	62.12
3 Sept	0.0018	62.06
4 Sept	0.0089	62.49
5 Sept	0.0087	62.8
6 Sept	0.011	62.88
7 Sept	0.0099	63.29
8 Sept	0.0073	62.72
9 Sept	0.0124	62.54
10 Sept	0.0107	62.87
11 Sept	-0.026	62.83
12 Sept	-0.0198	62.34
13 Sept	-0.0302	61.76
14 Sept	-0.0187	61.54
15 Sept	-0.0215	60.51
16 Sept	-0.0256	59.63
17 Sept	-0.0225	59.05
18 Sept	-0.0281	58.5
19 Sept	-0.0358	58
20 Sept	0.0222	58.7
21 Sept	0.0222	59.07
22 Sept	0.0187	58.67
23 Sept	0.0224	59.36
24 Sept	0.0134	59.76
25 Sept	0.0227	60.01
26 Sept	0.0168	59.86
27 Sept	0.0173	59.23
28 Sept	0.0107	59.37
29 Sept	0.0131	59.07
30 Sept	0.016	59.63
1 Oct	0.0101	59.58
2 Oct	0.0073	60.05
3 Oct	0.008	59.78
4 Oct	0.0091	59.91
5 Oct	0.01	60.44
6 Oct	0.0055	60.41
7 Oct	0.0017	59.96
8 Oct	0.0014	59.37
9 Oct	0.008	59.93

Sample data: funding rate per 8 hours with the BTC price, Jul 12 to Oct 9

Size

Legend

Data shape: A signed rate per period and the price
Good for: Funding rates, spreads, signed rates
Avoid when: Readers need each rate's exact value
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

090 / Funding stripes

chart/090-stripes-funding

plot · stripes

Layer: price
Type: Vector
Size: 752 × 206
Stroke: text/strong
Group: Marks · 91

Layers

090 / Funding stripes

chart/090-stripes-funding

plot · stripes

Layer: price
Type: Vector
Size: 275 × 95
Stroke: text/strong
Group: Marks · 91

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

Labels33

Marks9191

Height212 px246 px

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

When to use

The sign, over time.

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

Is the sign the point?

The size of the rate matters.

Yes: Keep the funding stripes

No: Use diverging bars004

Are there many periods?

A few periods to compare.

Yes: Keep the funding stripes

No: Use diverging bars004

Does a price belong with it?

The rate alone.

Yes: Keep the funding stripes

No: Use line chart010

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/090-stripes-funding

size

legend

Property = propValuesDefault

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

legendtrue · falsetrue

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

npx shadcn add @chartory/funding-stripes

funding-stripes.tsx

import { FundingStripes } from "@/components/chartory/funding-stripes"import { fundingRate } from "./funding-rate"export function FundingRate() {  return (    <FundingStripes      data={fundingRate}      size="m"      legend={true}    />  )}

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

Funding stripes questions.

What people ask before they put funding stripes in a dashboard.

Something else?

hello@usechartory.com

One colour when longs pay shorts, the other when shorts pay longs, and a deeper shade for a larger rate. The legend names both sides.

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.

Funding stripes chart

Inspect it like the Figma file.

Re-laid out, never scaled.

The sign, over time.

Is the sign the point?

Are there many periods?

Does a price belong with it?

One name in Figma and in code.

Funding stripes as a widget.

Funding stripes questions.

DataWhat do the two colours mean?

DataWhy is there a price line on top?

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