LanternUI.Charts (LanternUI v0.8.2)

Native LiveView chart components — server-rendered SVG, minimal JS.

Geometry (scales, ticks, paths) is computed in Elixir by LanternUI.Charts.Geometry and rendered as SVG, so charts re-render through normal LiveView assigns. The only client JS is the optional ChartHover hook (priv/static/lantern_ui_hooks.js), used by area_chart/1 for the crosshair/tooltip.

Theming

Colors come from CSS variables with chained fallbacks, so components match a host design system (e.g. Fluxon) automatically and still render standalone:

accent   var(--lantern-accent,  var(--color-primary-500, #3b82f6))
text     var(--lantern-fg,      var(--foreground,        #111827))
muted    var(--lantern-fg-muted,var(--foreground-softer, #6b7280))
surface  var(--lantern-surface, var(--background-base,   #ffffff))

Value formatting

area_chart/1 and bar_chart/1 accept value_format: :number (default), :currency, or a 1-arity function (number -> String.t()).

Summary

Functions

area_chart(assigns)

A time-series area + line chart.

bar_chart(assigns)

A categorical bar chart.

line_chart(assigns)

A multi-series time-series line chart with a legend and a shared crosshair tooltip.

sparkline(assigns)

A compact trend sparkline (no axes).

Functions

area_chart(assigns)

A time-series area + line chart.

series is a list of maps like %{date: "2024-01-15", value: 24.8} (ISO-8601 date string or Date, numeric value). Empty series render an empty state.

Requires the ChartHover JS hook for the crosshair/tooltip (see module docs).

Attributes

id (:string) (required) - Stable DOM id for the chart root and hover hook.
series (:list) - Dated points: %{date: ISO|Date, value: number}. Defaults to [].
height (:integer) - SVG viewBox height in CSS pixels. Defaults to 250.
class (:string) - Extra classes merged onto the root element. Defaults to nil.
value_format (:any) - :number | :currency | a 1-arity function (number -> String.t()). Defaults to :number.
empty_message (:string) - Copy shown when series is empty. Defaults to "No data".
aria_label (:string) - Accessible name for the SVG. Defaults to "Area chart".
smooth (:boolean) - 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. Defaults to true.

bar_chart(assigns)

A categorical bar chart.

series is a list of maps like %{label: "Q1", value: 42}. Empty series render an empty state.

A category may carry an :href, which makes that bar a link:

<.bar_chart id="stages" series={[
  %{label: "Open", value: 12, href: "/orders?status=open"},
  %{label: "Shipped", value: 40, href: "/orders?status=shipped"}
]} />

A linked bar navigates through LiveView and is reachable by keyboard. Its hit area is the whole column rather than the drawn bar, so a category sitting at zero — the one a reader is most likely to want to check — can still be clicked. Categories without an :href are drawn exactly as before.

Attributes

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

line_chart(assigns)

A multi-series time-series line chart with a legend and a shared crosshair tooltip.

series is a list of maps:

%{label: "web-1", color: "var(--color-primary)", points: [{~U[..], 0.25}, ...]}

Each points entry is {datetime, number} or %{time: datetime, value: number} (datetime = DateTime, NaiveDateTime, Date, or ISO-8601 string). color is optional (a palette is used when absent). All series share a 0-based y axis.

Requires the LineHover JS hook for the crosshair/tooltip.

Attributes

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

sparkline(assigns)

A compact trend sparkline (no axes).

series is a list of numbers. Renders nothing when empty.

Attributes

id (:string) (required) - Stable DOM id for the sparkline SVG.
series (:list) - Numeric values plotted left-to-right. Defaults to [].
height (:integer) - SVG viewBox height in CSS pixels. Defaults to 40.
class (:string) - Extra classes merged onto the root element. Defaults to nil.
aria_label (:string) - Accessible name for the SVG. Defaults to "Sparkline".