Gallery

Every mark the package draws, live.

Every preview is a <Chart> with one definition. Tab into any of them and use the arrow keys.

Bars

barY and barX. Series stack by colour; group: true puts them side by side; projected hatches the bars that are pencilled in rather than recorded.

Stacked by colour

Arrow keys to move through the values, Enter to pin, Escape to leave.

Data: Projects and bookings per month
month	Projects	Bookings
January 2026	24	18
February 2026	31	22
March 2026	28	25
April 2026	35	30
May 2026	42	36
June 2026	38	33

On their side

Arrow keys to move through the values, Enter to pin, Escape to leave.

Data: Projects per city
projects	Projects
Paris	51
Lyon	35
Nantes	28
Lille	19

Projected bars, and a rule before a column

Arrow keys to move through the values, Enter to pin, Escape to leave.

Data: Projects per month, the last two projected
month	Projects
January 2026	24
February 2026	31
March 2026	28
April 2026	35
May 2026	42
June 2026	38

tickY puts a short stroke on each bar (a target per month), tickX one per value along a category (a strip plot).

Lines and areas

lineY, lineX, areaY, areaX. A gap in the data is a gap in the line; areas stack by colour, and from/to draw a band between two values.

Stacked areas

Arrow keys to move through the values, Enter to pin, Escape to leave.

Data: Projects and bookings per month
month	Projects	Bookings
January 2026	24	18
February 2026	31	22
March 2026	28	25
April 2026	35	30
May 2026	42	36
June 2026	38	33

Round marks

arc (a pie), donut, radialBar, radar, funnel.

Donut

Arrow keys to move through the values, Enter to pin, Escape to leave.

Data: Projects per city
city	projects
Paris	51 (38.3%)
Lyon	35 (26.3%)
Nantes	28 (21.1%)
Lille	19 (14.3%)

Radar

Arrow keys to move through the values, Enter to pin, Escape to leave.

Data: Two profiles compared
axis	Series	score
Speed	Team A	4
Speed	Team B	9
Quality	Team A	6
Quality	Team B	8
Cost	Team A	8
Cost	Team B	7
Scope	Team A	4
Scope	Team B	6
Risk	Team A	6
Risk	Team B	5

Funnel, with the conversion from each step

Arrow keys to move through the values, Enter to pin, Escape to leave.

Data: From visit to booking
step	count
Visits	4,200
Sign-ups	980 (23.3%)
Projects	610 (62.2%)
Bookings	240 (39.3%)

Statistics

histogram, boxY, violinY, ridgeline, dodgeY (a beeswarm), waffleY, differenceY, regressionY, hexbin, cell — written in-house, no dependency.

Box plots

Arrow keys to move through the values, Enter to pin, Escape to leave.

Data: Days per stage
stage	Days
Design	2.33 (1.48 – 3.92)
Build	5.02 (3.56 – 6.4)
Review	7.96 (6.18 – 8.87)

Histogram

Arrow keys to move through the values, Enter to pin, Escape to leave.

Data: Days per task
x	Tasks
1 – 2	19
2 – 3	14
3 – 4	16
4 – 5	11
5 – 6	13
6 – 7	13
7 – 8	7
8 – 9	14
9 – 10	9
10 – 11	4

Regression over a scatter

Arrow keys to move through the values, Enter to pin, Escape to leave.

Data: Hours against size
Size	Hours
54.01	25.03
45.23	17.85
49	17.56
59.99	29.9
48.24	18.03
23.54	7.85
74.69	50.51
84.8	58.1
76.29	53.54
96.72	72.69
85.98	38.47
31.14	27.75
24.21	29.39
14.52	16.03
28.6	8.29
70.06	46.67
57.6	44.18
34.8	32.35
57.96	37.88
52.16	21.04
27.67	17.03
83.49	42.62
49.28	29.3
54.16	41.4
30.37	16.09
22.67	26.82
80.78	52.74
53.47	37.54
48.71	23.81
36.72	9.07
90.05	61.08
80.96	52.08
28.16	9
56.67	37.68
53.49	25.34
41.85	16.79
25.16	29.57
22.62	9.8
58.95	22.83
14.72	-2.31
68.82	30.07
84.32	60.89
91.41	50.03
38.62	14.88
95.66	59.93
19.87	6.95
71.88	34.24
18.31	25.12
47.57	36.55
32.5	5.49
59.3	49.99
17.69	19.19
42.8	19.02
45.57	17.17
75.72	56.18
41.25	23.93
80.16	38.63
15.58	0.38
94.46	47.97
23.74	21.13
86.27	62.21
93.37	46.32
11.48	5.46
27.9	23.09
35.98	16.1
93.49	71.07
49.86	29.05
20.33	16.94
55.94	26.92
71.56	54.24
67.39	43.61
35.54	23.75
61.2	39.14
29.9	26.44
17.28	1.37
98.02	44.36
95.04	51.3
11.21	21.51
32.04	25.59
82.53	59.97
21.86	11.08
40.34	29.46
40.43	20.91
52.47	21.46
13.22	-6.97
94.3	58.18
87.53	52.57
86.41	43.48
27.02	29.12
10.28	9.94
98.04	48.23
42.64	23.31
79.75	42.03
51.86	44.54
72.55	46.67
72.04	40.43
51.91	25.13
63.31	37.32
87.05	45.19
78.84	36.82
16.56	13.27
92.05	69.85
95.52	45.71
19.71	2.13
10.99	6.32
49.22	15.39
75.66	53.74
50.87	39.42
61.46	31.44
28.35	31.12
67.74	29.96
73.3	41.82
11.15	14.07
22.17	1.05
16.54	10.65
26.18	29.83
51.17	27.76
27.61	23.81
46.49	24.86
28.35	9.4

Heatmap

Arrow keys to move through the values, Enter to pin, Escape to leave.

010

Data: Bookings per day and hour
day	hour
Mon · 9h	0
Mon · 11h	5
Mon · 14h	10
Mon · 16h	4
Tue · 9h	3
Tue · 11h	8
Tue · 14h	2
Tue · 16h	7
Wed · 9h	6
Wed · 11h	0
Wed · 14h	5
Wed · 16h	10
Thu · 9h	9
Thu · 11h	3
Thu · 14h	8
Thu · 16h	2
Fri · 9h	1
Fri · 11h	6
Fri · 14h	0
Fri · 16h	5

Hierarchies, flows and maps

Each behind its own subpath, with the d3 layout it needs: @voila.dev/chart/hierarchy (treemap, sunburst, tree), @voila.dev/chart/sankey, @voila.dev/chart/force (forceGraph), @voila.dev/chart/geo (projection, geoShape, geoDot), @voila.dev/chart/contour (density2d), @voila.dev/chart/voronoi.

Treemap

Arrow keys to move through the values, Enter to pin, Escape to leave.

Data: Projects per team and type
x	Series	Projects
Web › Sites	Projects	40
Web › Apps	Projects	25
Mobile › iOS	Projects	18
Mobile › Android	Projects	14
Data › Reports	Projects	12

Sankey

Arrow keys to move through the values, Enter to pin, Escape to leave.

Data: From visit to booking
x	y
Visits → Sign-ups	980
Sign-ups → Projects	610
Projects → Bookings	240
Projects → Dropped	370
Visits	980
Sign-ups	980
Projects	610
Bookings	240
Dropped	370

import { geoDot, geoShape, projection } from "@voila.dev/chart/geo";
 
defineChart({
	projection: projection("france", { domain: regions }),
	marks: [
		geoShape(regions.features, { name: (r) => r.properties.nom, color: (r) => r.properties.missions }),
		geoDot(cities, { longitude: "lon", latitude: "lat", name: "city", r: "missions" }),
	],
});

Edit this page on GitHub