# `PhiaUi.Components.LineChart`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/line_chart.ex#L1)

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}
    />

# `line_chart`

## 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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*