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

Horizontal event timeline — pure SVG, zero JS.

Renders events as labeled markers on a horizontal axis. Events animate
in with staggered pop-in.

## Examples

    <.timeline_chart events={[
      %{label: "Kickoff",  date: "Jan 2024", description: "Project started"},
      %{label: "Beta",     date: "Mar 2024", description: "First beta release"},
      %{label: "Launch",   date: "Jun 2024", description: "Public launch"}
    ]} />

    <.timeline_chart
      events={[
        %{label: "v1.0", date: "Q1", color: "oklch(0.60 0.20 240)"},
        %{label: "v2.0", date: "Q3", color: "oklch(0.70 0.18 145)"}
      ]}
    />

# `timeline_chart`

## Attributes

* `events` (`:list`) (required) - List of `%{label, date}` (and optional `:description`, `:color`).
* `colors` (`:list`) - Override default palette. Defaults to `[]`.
* `animate` (`:boolean`) - Defaults to `true`.
* `animation_duration` (`:integer`) - Defaults to `500`.
* `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*