PhiaUi.Components.RadialBarChart (phia_ui v0.1.17)

Copy Markdown View Source

Radial bar chart with concentric arc rings — pure SVG, zero JS.

Each ring represents one metric. The arc length is proportional to value/max. Rings animate in with staggered fade.

Examples

<.radial_bar_chart data={[
  %{label: "CPU",    value: 72, max: 100, color: "oklch(0.60 0.20 240)"},
  %{label: "Memory", value: 45, max: 100, color: "oklch(0.70 0.18 145)"},
  %{label: "Disk",   value: 88, max: 100, color: "oklch(0.65 0.22 30)"}
]} />

<.radial_bar_chart
  data={[%{label: "Sales", value: 8500, max: 10000}]}
  size={:lg}
/>

Summary

Functions

radial_bar_chart(assigns)

Functions

radial_bar_chart(assigns)

Attributes

  • data (:list) (required) - List of %{label, value, max} (and optional :color).
  • size (:atom) - Overall chart size class. Defaults to :default. Must be one of :sm, :default, or :lg.
  • 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.