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

Semi-circular (180°) SVG gauge chart.

Displays a value within a range as a partial arc, flat at the bottom.
Commonly used in health dashboards, performance metrics, and analytics.
Distinct from `CircularProgress` which is a full 360° ring.

Zero JavaScript — SVG arc computed server-side using `stroke-dasharray`.

## Examples

    <.gauge_chart value={78} max={100} label="Mental Health Score" color={:blue} />

    <.gauge_chart value={150} max={200} label="Cholesterol" color={:orange} size={:lg} />

# `gauge_chart`

## Attributes

* `value` (`:integer`) (required) - Current value (0..max).
* `max` (`:integer`) - Maximum value for normalization. Defaults to `100`.
* `label` (`:string`) - Optional label shown below the value. Defaults to `nil`.
* `color` (`:atom`) - Color of the filled arc. Defaults to `:blue`. Must be one of `:blue`, `:green`, `:orange`, `:red`, or `:purple`.
* `size` (`:atom`) - Size of the gauge: `:sm` (h-24 w-24), `:default` (h-32 w-32), `:lg` (h-40 w-40). Defaults to `:default`. Must be one of `:sm`, `:default`, or `:lg`.
* `zones` (`:list`) - Optional colored zones rendered as arc segments behind the value arc.
  Each zone: `%{from: number, to: number, color: atom}`.
  Same color atoms as `:color`.

  Defaults to `[]`.
* `threshold` (`:any`) - Optional numeric threshold marker rendered as a radial line on the arc. Defaults to `nil`.
* `animate` (`:boolean`) - Enable arc entrance animation. Adds `phia-chart-animate` class and CSS animation on the value arc. Defaults to `true`.
* `animation_duration` (`:integer`) - Duration in ms for the arc fill animation. Defaults to `800`.
* `class` (`:string`) - Additional CSS classes for the root element. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root `<div>` element.
## Slots

* `center_label` - Optional slot to override the center label text rendered below the value.

---

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