Charts
27 chart types, one series palette, no charting library.
Marks are the ion and its seven fixed neighbours; series never renumber when one is filtered out. Every plot fills its container and inspects on press or scrub.
RangeAreaChart
low · mid · high
<RangeAreaChart> · y hugs the data, never anchored at zero
ComposedChart
bars · line · area
Revenue
Target
Last year
series pick a mark with line or area · bars by default
Sparkline
soft wash · latest in full
Signups
1,204
Uptime
99.94%
Errors
312
<Sparkline values={…} success /> · tone booleans, no hand-built bar rows
BoxPlot
five-number summary
quartiles by interpolation · whiskers at 1.5 IQR · outliers as rings
ScatterPlot
press near a point
Glass on
Solid
<ScatterPlot> · numeric x and y, nice ticks on both
WaterfallChart
running-total bridge
steps float by their signed value · a total step snapshots from zero
PieChart
donut · total centered
24.8k
sessions
iOS
42%
Android
28%
Web
18%
Desktop
12%
<PieChart donut> · pressing a slice dims the others
StackedBar
one bar · fixed order
Storage · 82.4 of 100 GB
82%
Last month
64%
Media
38%
Docs
22%
Code
14%
Other
8%
segments keep chart-1…8 order even when one is zero
FunnelChart
stage conversion
Visited
12,400
—
Signed up
7,900
63.7%
Activated
4,980
63.0%
Paid
2,610
52.4%
each trapezoid narrows to the next stage · conversion from the stage above
Gauge
level · 0–100
72%
0
of Q4 adoption goal
100
<Gauge value={72} label="…" /> · tone booleans recolor the arc
ProgressRing
completion
64%
Tokens
Icons
28%
Docs
Gauge's sibling · clockwise from 12 · rounded caps
RadialBarChart
attainment vs. max
iOS
64k
Android
41k
Web
23k
max 80k
every ring sweeps against one max · press a ring to isolate it
BulletChart
measure · ranges · target
Revenue
72%
Retention
91%
NPS
48
target
ranges
<BulletChart ranges={[…]}> · tone follows the target
RadarChart
multi-axis
Canvas v4.0.0
v1 skin
rings at nice fractions · values align to axes by index
MetricBreakdown
installs
48.2k
+12.4% vs. Sep
Web
54%
iOS
31%
Android
15%
October
USD
net of refunds
BarList
top pages · 7d
/components
4,820
+12%
/tokens
3,140
+4%
/charts
2,210
−3%
/docs/theming
1,480
+22%
/templates
920
0%
labels truncate, values never do · track ∝ value
DepthChart
order book
Bids
Asks
Heatmap · calendar
34 weeks · hover a day
608
commits to bnannier/canvas
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Mon
Wed
Fri
less
more
<Heatmap calendar> is the kit's activity calendar · without it, a free cell grid of any density
CandlestickChart
OHLC · volume pane · MA 20
Up
Down
MA 20
direction from success / destructive
UptimeBar · ServiceHealthList
status page
api.canvas.app
99.94% uptime
60 days ago
1 incident · 2 degraded days
today
<UptimeBar> per-period pills · <ServiceHealthList> status by precedence: down › degraded › operational
GeoMap
Natural Earth I · area ∝ count
18.4k
sessions in 10 cities, last 24h
<GeoMap zoomable> · geometry pre-projected at build time · crowded places merge and split as you zoom