PhiaUi.Components.TimelineChart (phia_ui v0.1.17)

Copy Markdown View Source

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)"}
  ]}
/>

Summary

Functions

timeline_chart(assigns)

Functions

timeline_chart(assigns)

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.