PhiaUi.Components.GaugeChart (phia_ui v0.1.17)

Copy Markdown View Source

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

Summary

Functions

gauge_chart(assigns)

Functions

gauge_chart(assigns)

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.