PhiaUi.Components.PolarAreaChart (phia_ui v0.1.17)

Copy Markdown View Source

Polar area chart — pure SVG, zero JS.

Each data point occupies an equal angular slice. The radius of each slice is proportional to its value. Based on Chart.js PolarAreaController pattern.

Examples

<.polar_area_chart data={[
  %{label: "Speed", value: 80},
  %{label: "Power", value: 65},
  %{label: "Endurance", value: 90},
  %{label: "Agility", value: 75},
  %{label: "Recovery", value: 70}
]} />

Summary

Functions

polar_area_chart(assigns)

Functions

polar_area_chart(assigns)

Attributes

  • data (:list) (required) - List of %{label, value} (and optional :color).
  • colors (:list) - Override default palette. Defaults to [].
  • max (:any) - Maximum value for radius scaling. Auto-detected if nil. Defaults to nil.
  • spacing (:integer) - Gap in pixels between slices. Defaults to 2.
  • show_grid (:boolean) - Show concentric circle grid. Defaults to true.
  • show_labels (:boolean) - Show axis labels. Defaults to true.
  • animate (:boolean) - Defaults to true.
  • animation_duration (:integer) - Defaults to 600.
  • 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.