Chart Gallery

Chart

SVG-based data visualisations with no external dependencies. Let each canvas stretch to the viewport so dashboards feel cinematic and data-dense.

Line Charts

Track momentum with precise or smoothed curves. Each SVG scales with the grid, so hero charts and compact insights reuse the same component.

Motion-aware

Linear series

Smoothed performance


<.chart type={:line} data={[12, 24, 31, 28]} labels={~w(Jan Feb Mar Apr)} width={920} height={320} />
<.chart type={:line} curved data={[18, 22, 40, 52]} width={920} height={320} />

Bar Charts

Showcase distribution and composition. Capsule columns and gradients adapt to any width so comparison plots read clearly on ultra-wide grids.

Capsule columns

Quarterly revenue

Category mix


<.chart type={:bar} data={[28, 40, 32, 54]} labels={~w(Q1 Q2 Q3 Q4)} width={920} height={320} />
<.chart type={:bar} data={[18, 26, 22, 31]} corner_radius={10} width={920} height={320} />

Pie & Donut

Perfect for proportions, share of voice, and device distribution. Donut mode keeps centre space ready for a KPI or storyteller annotation.

Share insights

Channel share

Device mix (donut)

Area & Sparkline

Highlight macro trends and compact micro-interactions. Wide canvases allow the area gradient to breathe, while sparklines stay punchy.

Momentum views

Area trend

Sparklines

Stacked Columns

Layer multiple datasets per category for product mix, cost breakdowns, or roadmap allocation. The wide canvas keeps legends readable.

Multi-series

Quarterly allocation


<.chart
type={:stacked}
data={[60, 78, 84, 96]}
datasets={[
%{label: "Design", values: [12, 16, 18, 20], colors: ["#6366f1"]},
%{label: "Frontend", values: [18, 22, 24, 28], colors: ["#22d3ee"]},
%{label: "Backend", values: [20, 24, 26, 30], colors: ["#f97316"]}
]}
width={980}
height={360}
/>

Props

Configure charts with concise options. All charts respect the numeric width and height you provide, so pick viewport-scale values when you want cinematic layouts.

Prop	Type	Default	Description
type	atom	—	Choose :line, :bar, :pie, :donut, :area, :stacked, or :sparkline.
data	list	—	Primary dataset. For stacked charts, set it to totals per category.
datasets	list \| nil	nil	Stacked chart series. Each entry accepts :values and optional :colors.
labels	list	[]	Optional labels for tooltips and accessibility.
width / height	integer	400 / 300	Render size in pixels (SVG). Scale up for immersive dashboards.
colors	list \| nil	auto	Override default palette. Applies cyclically across values.
curved	boolean	false	Smooth line/area charts using quadratic Bézier curves.
fill_opacity	float	0.3	Adjust the area fill intensity.
corner_radius	integer	4	Bar/stacked bar radius for softer columns.
class	string	""	Append classes to the outer container for layout adjustments.