Data
Chart
Custom SVG charts: Bar (pixel-quantised), Line, Sparkline, Donut, Heatmap. No recharts, no visx.
Install
bash
npx shadcn@latest add https://supaui.dev/r/chart.jsonBar — pixel mode
Daily activity
Bar heights quantised to 8px steps.
Bar — smooth
Daily activity
Continuous heights, success tone.
Line
Monthly trend
Sharp polyline with pixel ticks.
Q1Q2Q3Q4Q5Q6
Sparkline
smoothpixel
Donut
Traffic by source
Last 30 days, percentage split.
sessions
184k
- Direct42%
- Search28%
- Social14%
- Referral9%
- Email7%
Interactive — Bar with hover tooltip
Daily activity
Hover bars to surface their value.
Interactive — Line with crosshair
Monthly trend
Snaps to the nearest x and renders a crosshair + tooltip.
Q1Q2Q3Q4Q5Q6
Heatmap
Activity
By weekday × hour bucket.
MonTueWedThuFriSatSun
000408121620
API
ChartBar—data,height,tone,pixel,max,showValues,interactive,formatValue.ChartLine—data,height,tone,showGrid,showDots,interactive,formatValue. Pointer-snap with crosshair + active marker.ChartTooltip— pixel-pip + label + value bubble. Reused internally by interactive Bar/Line; exported for custom compositions.ChartSparkline—data,width,height,tone,pixel.ChartDonut—data,size,thickness,gap,centerLabel,centerValue. Per-segmenttonewalks the palette automatically.ChartHeatmap—data(2D array),rowLabels,colLabels,cell,gap,tone,max. Cells use opacity to encode intensity against the tone color.tone— accent (default) · success · warning · danger · info · ink.