PhiaUi.Components.RadarChart (phia_ui v0.1.17)

Copy Markdown View Source

Spider / radar chart — pure SVG, zero JS.

Plots multi-dimensional data on a polar grid. Each series is rendered as a filled polygon that fades in on entrance.

Examples

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

<.radar_chart
  series={[
    %{name: "2023", data: [%{axis: "Q1", value: 80}, %{axis: "Q2", value: 60}]},
    %{name: "2024", data: [%{axis: "Q1", value: 90}, %{axis: "Q2", value: 75}]}
  ]}
/>

Summary

Functions

radar_chart(assigns)

Functions

radar_chart(assigns)

Attributes

  • data (:list) - Single-series: [%{axis, value}]. Defaults to [].
  • series (:list) - Multi-series: [%{name, data: [%{axis, value}]}]. Defaults to [].
  • max (:any) - Maximum axis value (integer or float). Defaults to 100.
  • colors (:list) - Override default palette. Defaults to [].
  • show_grid (:boolean) - Show concentric polygon grid. Defaults to true.
  • 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.