LanternUI.Charts (LanternUI v0.3.3)

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)
series (:list) - Defaults to [].
height (:integer) - Defaults to 250.
class (:string) - Defaults to nil.
value_format (:any) - :number | :currency | a 1-arity function (number -> String.t()). Defaults to :number.
empty_message (:string) - Defaults to "No data".
aria_label (:string) - Defaults to "Area chart".

bar_chart(assigns)

A categorical bar chart.

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

Attributes

id (:string) (required)
series (:list) - Defaults to [].
height (:integer) - Defaults to 180.
class (:string) - Defaults to nil.
value_format (:any) - :number | :currency | a 1-arity function (number -> String.t()). Defaults to :number.
empty_message (:string) - Defaults to "No data".
aria_label (:string) - 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)
series (:list) - Defaults to [].
height (:integer) - Defaults to 200.
class (:string) - Defaults to nil.
value_format (:any) - :number | :currency | a 1-arity function (number -> String.t()). Defaults to :number.
legend (:boolean) - Defaults to true.
empty_message (:string) - Defaults to "No data".
aria_label (:string) - 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)
series (:list) - Defaults to [].
height (:integer) - Defaults to 40.
class (:string) - Defaults to nil.
aria_label (:string) - Defaults to "Sparkline".