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

Bullet chart — progress toward target with colored range bands — pure SVG, zero JS.

Renders qualitative background ranges, a bar for the actual value, and a
line marker for the target. Bars animate in on entrance.

## Examples

    <.bullet_chart
      value={72}
      target={85}
      ranges={[%{to: 50, color: "oklch(0.80 0.05 0)"}, %{to: 75, color: "oklch(0.88 0.03 0)"}, %{to: 100, color: "oklch(0.94 0.02 0)"}]}
      label="Revenue"
    />

    <.bullet_chart value={340} target={400} ranges={[%{to: 200}, %{to: 350}, %{to: 500}]} />

# `bullet_chart`

## Attributes

* `value` (`:any`) (required) - Actual value to display (integer or float).
* `target` (`:any`) (required) - Target value (shown as a line marker).
* `max` (`:any`) - Maximum scale value. Defaults to `max(target * 1.2, value)`. Defaults to `nil`.
* `ranges` (`:list`) - Background quality ranges: `[%{to: number, color: string}]`.
  Each range covers from the previous `:to` to this `:to`.

  Defaults to `[]`.
* `label` (`:string`) - Label shown to the left. Defaults to `nil`.
* `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*