PhiaUi.Components.BulletChart (phia_ui v0.1.17)

Copy Markdown View Source

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}]} />

Summary

Functions

bullet_chart(assigns)

Functions

bullet_chart(assigns)

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.