PhiaUi.Components.SlopeChart (phia_ui v0.1.17)

Copy Markdown View Source

Slope chart — before/after comparison with diagonal lines — pure SVG, zero JS.

Useful for showing rank or value changes between two time periods. Lines animate in with a dashoffset draw effect.

Examples

<.slope_chart
  data={[
    %{label: "Product A", from: 80, to: 95},
    %{label: "Product B", from: 60, to: 45},
    %{label: "Product C", from: 75, to: 70}
  ]}
  left_label="2023"
  right_label="2024"
/>

Summary

Functions

slope_chart(assigns)

Functions

slope_chart(assigns)

Attributes

  • data (:list) (required) - List of %{label, from, to}.
  • left_label (:string) - Defaults to "Before".
  • right_label (:string) - Defaults to "After".
  • colors (:list) - Override default palette. Defaults to [].
  • animate (:boolean) - Defaults to true.
  • animation_duration (:integer) - Defaults to 700.
  • 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.