Stream graph

Stacked streamgraph with smooth wiggle-offset layers, layer highlight on hover, a period readout and a legend that pins a series.

Hours per week, H1

Reading time by site section
Period	Docs	Blog	Changelog	Pricing	Careers
W1	42 h	40 h	19 h	16 h	6 h
W2	46 h	40 h	18 h	15 h	7 h
W3	49 h	39 h	17 h	15 h	8 h
W4	52 h	37 h	15 h	15 h	10 h
W5	54 h	34 h	14 h	16 h	11 h
W6	55 h	31 h	13 h	17 h	13 h
W7	55 h	28 h	13 h	19 h	14 h
W8	54 h	24 h	14 h	21 h	15 h
W9	53 h	21 h	14 h	23 h	16 h
W10	51 h	19 h	16 h	24 h	16 h
W11	48 h	18 h	18 h	26 h	15 h
W12	46 h	18 h	20 h	26 h	15 h
W13	43 h	20 h	22 h	27 h	13 h
W14	42 h	22 h	25 h	26 h	12 h
W15	41 h	25 h	27 h	25 h	11 h
W16	41 h	29 h	29 h	23 h	9 h
W17	42 h	33 h	30 h	21 h	8 h
W18	44 h	36 h	30 h	19 h	7 h
W19	47 h	40 h	31 h	16 h	7 h
W20	50 h	42 h	30 h	14 h	7 h
W21	54 h	44 h	29 h	12 h	8 h
W22	57 h	44 h	28 h	11 h	8 h
W23	61 h	43 h	27 h	11 h	10 h
W24	64 h	42 h	25 h	11 h	11 h
W25	66 h	39 h	24 h	11 h	13 h
W26	67 h	36 h	23 h	13 h	15 h

Install

Pro source requires Pebble Pro. Try the full preview above.

Prop	Type	Default	Description
x	string[]	—	One label per period.
series	{ key: string; label: string; values: number[]; color?: string }[]	—	Layers, bottom to top; one value per period.
label	string	—	Accessible name and table caption.
height	number	260	Height in px; width follows the container.
valueFormatter	(value: number) => string	1 decimal	Formats values.

Try the full preview above. Editable source and build guides require Pebble Pro.

Stacked streamgraph with smooth wiggle-offset layers, layer highlight on hover, a period readout and a legend that pins a series.

Hours per week, H1

Reading time by site section
Period	Docs	Blog	Changelog	Pricing	Careers
W1	42 h	40 h	19 h	16 h	6 h
W2	46 h	40 h	18 h	15 h	7 h
W3	49 h	39 h	17 h	15 h	8 h
W4	52 h	37 h	15 h	15 h	10 h
W5	54 h	34 h	14 h	16 h	11 h
W6	55 h	31 h	13 h	17 h	13 h
W7	55 h	28 h	13 h	19 h	14 h
W8	54 h	24 h	14 h	21 h	15 h
W9	53 h	21 h	14 h	23 h	16 h
W10	51 h	19 h	16 h	24 h	16 h
W11	48 h	18 h	18 h	26 h	15 h
W12	46 h	18 h	20 h	26 h	15 h
W13	43 h	20 h	22 h	27 h	13 h
W14	42 h	22 h	25 h	26 h	12 h
W15	41 h	25 h	27 h	25 h	11 h
W16	41 h	29 h	29 h	23 h	9 h
W17	42 h	33 h	30 h	21 h	8 h
W18	44 h	36 h	30 h	19 h	7 h
W19	47 h	40 h	31 h	16 h	7 h
W20	50 h	42 h	30 h	14 h	7 h
W21	54 h	44 h	29 h	12 h	8 h
W22	57 h	44 h	28 h	11 h	8 h
W23	61 h	43 h	27 h	11 h	10 h
W24	64 h	42 h	25 h	11 h	11 h
W25	66 h	39 h	24 h	11 h	13 h
W26	67 h	36 h	23 h	13 h	15 h

Pro source requires Pebble Pro. Try the full preview above.

Prop	Type	Default	Description
x	string[]	—	One label per period.
series	{ key: string; label: string; values: number[]; color?: string }[]	—	Layers, bottom to top; one value per period.
label	string	—	Accessible name and table caption.
height	number	260	Height in px; width follows the container.
valueFormatter	(value: number) => string	1 decimal	Formats values.

Try the full preview above. Editable source and build guides require Pebble Pro.