Every mark the package draws, on one screen. Each one is live, built from the
same Chart.Root frame with different children. The heading under each
preview links to the page that takes the mark apart.
Bars
Two series side by side
| month | Projects published | Proposals accepted |
|---|---|---|
| January | 24 | 18 |
| February | 31 | 22 |
| March | 28 | 25 |
| April | 35 | 30 |
| May | 42 | 36 |
| June | 38 | 33 |
Horizontal, with values on the bars
| month | Projects published |
|---|---|
| January | 24 |
| February | 31 |
| March | 28 |
| April | 35 |
| May | 42 |
| June | 38 |
Diverging around zero
| month | Net wallet flow |
|---|---|
| January | 420 |
| February | -180 |
| March | 260 |
| April | -90 |
| May | 540 |
| June | 310 |
Stacked bars
Series stacked in one column
| month | Projects published | Proposals accepted |
|---|---|---|
| January | 24 | 18 |
| February | 31 | 22 |
| March | 28 | 25 |
| April | 35 | 30 |
| May | 42 | 36 |
| June | 38 | 33 |
Line
One series over time
| month | Projects published |
|---|---|
| January | 24 |
| February | 31 |
| March | 28 |
| April | 35 |
| May | 42 |
| June | 38 |
Step curve with dots
| month | Projects published |
|---|---|
| January | 24 |
| February | 31 |
| March | 28 |
| April | 35 |
| May | 42 |
| June | 38 |
Area
Filled series with a gradient
| month | Projects published | Proposals accepted |
|---|---|---|
| January | 24 | 18 |
| February | 31 | 22 |
| March | 28 | 25 |
| April | 35 | 30 |
| May | 42 | 36 |
| June | 38 | 33 |
Stacked, flat fills
| month | Proposals accepted | Projects published |
|---|---|---|
| January | 18 | 24 |
| February | 22 | 31 |
| March | 25 | 28 |
| April | 30 | 35 |
| May | 36 | 42 |
| June | 33 | 38 |
Points
Bubbles sized by a third value
| client | Projects |
|---|---|
| Alpha | 12 |
| Bravo | 26 |
| Charlie | 18 |
| Delta | 34 |
| Echo | 9 |
Pie
Parts of a whole
| discipline | Freelancers |
|---|---|
| design | 86 |
| development | 54 |
| writing | 37 |
| consulting | 21 |
Donut
The pie with room for a number
| discipline | Freelancers |
|---|---|
| design | 86 |
| development | 54 |
| writing | 37 |
| consulting | 21 |
Radar
One shape across five axes
| region | Coverage |
|---|---|
| North | 92 |
| West | 68 |
| South | 74 |
| East | 85 |
| Central | 61 |
Radial bars
Concentric progress rings
| metric | value |
|---|---|
| fillRate | 78 |
| responseRate | 64 |
| repeatRate | 41 |
Own it
Every mark above is drawn by the source in
@voila.dev/ui/src/chart/components/ — one file per mark, plain SVG, plain
arithmetic. To add a mark of your own, read one of the small ones
(chart-points.tsx is a good start) and write a sibling; it is the same file
whether you keep the package or copy it into your repo.