PhiaUi.Components.LineChart (phia_ui v0.1.17)

Copy Markdown View Source

Single / multi-series line chart — pure SVG, zero JS.

Lines animate in with a stroke-dashoffset draw effect. Optional dots appear with a staggered pop-in. Uses polyline_length/1 computed server-side for precise dasharray values.

Supports six curve interpolation modes via the :curve attribute: :linear (default, straight segments), :smooth (Catmull-Rom splines), :monotone (monotone cubic — prevents overshoot), :step_before, :step_after, and :step_middle (stepped lines).

Examples

<.line_chart data={[
  %{label: "Jan", value: 120},
  %{label: "Feb", value: 200},
  %{label: "Mar", value: 160}
]} />

<.line_chart
  series={[
    %{name: "2023", data: [%{label: "Q1", value: 100}, %{label: "Q2", value: 200}]},
    %{name: "2024", data: [%{label: "Q1", value: 140}, %{label: "Q2", value: 280}]}
  ]}
  show_dots={true}
  colors={["oklch(0.60 0.20 240)", "oklch(0.65 0.22 30)"]}
/>

<.line_chart
  data={[
    %{label: "Jan", value: 120},
    %{label: "Feb", value: 200},
    %{label: "Mar", value: 160}
  ]}
  curve={:smooth}
/>

Summary

Functions

line_chart(assigns)

Functions

line_chart(assigns)

Attributes

  • data (:list) - Single-series: [%{label, value}]. Defaults to [].
  • series (:list) - Multi-series: [%{name, data: [%{label, value}]}]. Defaults to [].
  • colors (:list) - Override default palette. Defaults to [].
  • show_dots (:boolean) - Render data point circles. Defaults to false.
  • show_grid (:boolean) - Render horizontal grid lines. Defaults to true.
  • show_labels (:boolean) - Render axis labels. Defaults to true.
  • stroke_width (:integer) - Line stroke width in px. Defaults to 2.
  • animate (:boolean) - Enable entrance animations. Defaults to true.
  • animation_duration (:integer) - Animation duration in ms. Defaults to 800.
  • curve (:atom) - Interpolation mode for the line. :linear draws straight segments (polyline), :smooth uses Catmull-Rom splines, :monotone uses monotone cubic interpolation, and :step_* variants draw stepped lines. Defaults to :linear. Must be one of :linear, :smooth, :monotone, :step_before, :step_after, or :step_middle.
  • theme (:map) - Chart theme overrides (see ChartTheme). Defaults to %{}.
  • show_point_labels (:boolean) - Show value labels above data points. Defaults to false.
  • dot_symbol (:atom) - Symbol shape for data point dots (Recharts symbol pattern). Defaults to :circle. Must be one of :circle, :cross, :diamond, :square, :star, :triangle, or :wye.
  • active_dot (:map) - Active dot config on hover: %{r: 8, color: "red"}. nil disables. Defaults to nil.

  • segments (:list) - Per-segment styling: [%{start: idx, end: idx, color: string, dash: string | nil}]. Overrides default line rendering. Defaults to [].

  • gap_strategy (:atom) - How to handle nil values in data: :skip removes, :zero replaces with 0, :interpolate fills linearly, :span connects across. Defaults to nil. Must be one of nil, :skip, :zero, :interpolate, or :span.
  • id (:string) - Unique ID for the chart (auto-generated if not provided). Defaults to nil.
  • title (:string) - Chart title rendered above the visualization. Defaults to nil.
  • description (:string) - Chart description for context (rendered below title). Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.