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

Vertical grouped / stacked / horizontal bar chart — pure SVG, zero JS.

Bars animate in with a `scaleY` grow effect (or `scaleX` for horizontal).
Stagger delay is applied per-group.

## Variants
- `:grouped` — bars side-by-side within each group (default)
- `:stacked` — bars stacked vertically per group
- `:horizontal` — horizontal bars (single or multi-series)

## Examples

    <.bar_chart data={[
      %{label: "Jan", value: 120},
      %{label: "Feb", value: 80},
      %{label: "Mar", value: 150}
    ]} />

    <.bar_chart
      series={[
        %{name: "Revenue", data: [%{label: "Q1", value: 200}, %{label: "Q2", value: 280}]},
        %{name: "Cost",    data: [%{label: "Q1", value: 100}, %{label: "Q2", value: 130}]}
      ]}
      variant={:grouped}
      colors={["oklch(0.60 0.20 240)", "oklch(0.65 0.22 30)"]}
    />

# `bar_chart`

## Attributes

* `data` (`:list`) - Single-series shorthand: `[%{label, value}]`. Defaults to `[]`.
* `series` (`:list`) - Multi-series: `[%{name, data: [%{label, value}]}]`. Overrides `:data` when present. Defaults to `[]`.
* `variant` (`:atom`) - Bar layout variant. Defaults to `:grouped`. Must be one of `:grouped`, `:stacked`, or `:horizontal`.
* `colors` (`:list`) - Override default palette. CSS color strings. Defaults to `[]`.
* `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 (0–12). Defaults to `2`.
* `theme` (`:map`) - Chart theme overrides (see ChartTheme). Defaults to `%{}`.
* `show_totals` (`:boolean`) - Show sum labels on stacked bars. Defaults to `false`.
* `percent` (`:boolean`) - Normalize values to percentage of total (0-100% Y-axis). Defaults to `false`.
* `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*