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

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

# `slope_chart`

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

---

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