Charts — lantern-ui

Area chart

Server-rendered SVG — geometry computed in Elixir, one hover hook, no chart library. Catmull-Rom smoothing under a density threshold.

# series: a list of %{date, value} points
daily_revenue = [
  %{date: ~D[2026-06-01], value: 40.0},
  %{date: ~D[2026-06-02], value: 47.5},
  %{date: ~D[2026-06-03], value: 52.1}
  # …one per day
]

<.area_chart id="rev" series={daily_revenue} height={220} value_format={:currency} />

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`aria_label`	`string`	`"Area chart"`	Accessible name for the SVG.
`class`	`string`	`nil`	Extra classes merged onto the root element.
`empty_message`	`string`	`"No data"`	Copy shown when series is empty.
`height`	`integer`	`250`	SVG viewBox height in CSS pixels.
`id`*	`string`	`—`	Stable DOM id for the chart root and hover hook.
`series`	`list`	`[]`	Dated points: %{date: ISO\|Date, value: number}.
`smooth`	`boolean`	`true`	Curve the line between points. Set false for values counted per discrete bucket (per month, per build): a spline through them bulges into the empty periods either side and reads as activity that never happened.
`value_format`	`any`	`:number`	`:number` \| `:currency` \| a 1-arity function `(number -> String.t())`

Line chart

Multi-series line chart with a shared crosshair + tooltip and a legend.

web-1 web-2

# series: a list of lines; each line's points are {datetime, value} tuples
web1 = [
  {~U[2026-07-07 00:00:00Z], 0.30},
  {~U[2026-07-07 01:00:00Z], 0.42}
  # …one per hour
]

<.line_chart
  id="cpu"
  series={[
    %{label: "web-1", color: "var(--lantern-accent)", points: web1},
    %{label: "web-2", color: "var(--lantern-fg-subtle)", points: web2}
  ]}
/>

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`aria_label`	`string`	`"Line chart"`	Accessible name for the SVG.
`class`	`string`	`nil`	Extra classes merged onto the root element.
`empty_message`	`string`	`"No data"`	Copy shown when series is empty.
`height`	`integer`	`200`	SVG viewBox height in CSS pixels.
`id`*	`string`	`—`	Stable DOM id for the chart root and hover hook.
`legend`	`boolean`	`true`	Show the series color key under the chart.
`series`	`list`	`[]`	Named series maps with points and optional color.
`value_format`	`any`	`:number`	`:number` \| `:currency` \| a 1-arity function `(number -> String.t())`

Bar chart

Categorical bars with value labels.

<.bar_chart id="q" series={[%{label: "Q1", value: 42}, %{label: "Q2", value: 31}]} />

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`aria_label`	`string`	`"Bar chart"`	Accessible name for the SVG.
`class`	`string`	`nil`	Extra classes merged onto the root element.
`empty_message`	`string`	`"No data"`	Copy shown when series is empty.
`height`	`integer`	`180`	SVG viewBox height in CSS pixels.
`id`*	`string`	`—`	Stable DOM id for the chart root.
`series`	`list`	`[]`	Categories: %{label: String.t(), value: number, href: String.t() \| nil}.
`value_format`	`any`	`:number`	`:number` \| `:currency` \| a 1-arity function `(number -> String.t())`

Sparkline

Tiny inline trend line — no axes, no hooks.

<.sparkline id="s" series={[3, 5, 4, 8, 6, 9]} height={48} />

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`aria_label`	`string`	`"Sparkline"`	Accessible name for the SVG.
`class`	`string`	`nil`	Extra classes merged onto the root element.
`height`	`integer`	`40`	SVG viewBox height in CSS pixels.
`id`*	`string`	`—`	Stable DOM id for the sparkline SVG.
`series`	`list`	`[]`	Numeric values plotted left-to-right.