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

Pareto chart — pure SVG, zero JS.

Combines descending bars with a cumulative percentage line.
Shows the 80/20 principle visually with an optional threshold line.

## Examples

    <.pareto_chart data={[
      %{label: "Bug A", value: 45},
      %{label: "Bug B", value: 30},
      %{label: "Bug C", value: 15},
      %{label: "Bug D", value: 10}
    ]} />

# `pareto_chart`

## Attributes

* `data` (`:list`) - Data: `[%{label, value}]` — auto-sorted descending. Defaults to `[]`.
* `colors` (`:list`) - Override default palette. CSS color strings. Defaults to `[]`.
* `bar_color` (`:string`) - Fill color for bars. Defaults to `"oklch(0.60 0.20 240)"`.
* `line_color` (`:string`) - Stroke color for cumulative line. Defaults to `"oklch(0.60 0.25 0)"`.
* `show_threshold` (`:boolean`) - Show 80% threshold line. Defaults to `true`.
* `threshold_pct` (`:float`) - Threshold percentage value. Defaults to `80.0`.
* `show_grid` (`:boolean`) - Show Y-axis grid lines. Defaults to `true`.
* `show_labels` (`:boolean`) - Show axis tick labels. Defaults to `true`.
* `animate` (`:boolean`) - Enable entrance animations. Defaults to `true`.
* `animation_duration` (`:integer`) - Animation duration in ms. Defaults to `600`.
* `border_radius` (`:integer`) - Corner radius for bars in pixels. Defaults to `2`.
* `theme` (`:map`) - Chart theme overrides (see ChartTheme). Defaults to `%{}`.
* `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*