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

Stacked category bar — normalizes values to 100% and renders colored segments.

Inspired by Tremor `CategoryBar`, MUI LinearProgress stacked, PrimeReact MeterGroup.
Use it to show composition breakdowns like traffic sources, budget allocation,
or survey responses.

Colors are atoms mapped to static Tailwind class strings to preserve JIT purging.

## Examples

    <.category_bar
      values={[40, 30, 20, 10]}
      colors={[:blue, :green, :orange, :red]}
      labels={["Direct", "Referral", "Organic", "Other"]}
      show_labels={true}
    />

    <.category_bar values={[60, 40]} colors={[:purple, :pink]} marker_value={55} />

# `category_bar`

## Attributes

* `values` (`:list`) (required) - List of numbers — auto-normalized to 100%.
* `colors` (`:list`) (required) - List of color atoms matching `:values`. Atoms: `:blue :green :red :orange :purple :pink :yellow :teal :indigo :cyan`.
* `labels` (`:list`) - Optional labels for each segment. Defaults to `[]`.
* `show_labels` (`:boolean`) - When `true`, renders labels below the bar. Defaults to `false`.
* `marker_value` (`:any`) - Optional numeric marker position (in the same scale as `:values` sum). Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes for the root element. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root `<div>`.

---

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