PhiaUi.Components.PieChart (phia_ui v0.1.17)

Copy Markdown View Source

Pie chart with arc-path slices — pure SVG, zero JS.

Each slice fades and scales in with a staggered phia-dot-pop animation. Supports an optional legend.

Examples

<.pie_chart data={[
  %{label: "Direct",   value: 40},
  %{label: "Organic",  value: 30},
  %{label: "Referral", value: 20},
  %{label: "Other",    value: 10}
]} />

<.pie_chart
  data={[%{label: "A", value: 60}, %{label: "B", value: 40}]}
  colors={["oklch(0.60 0.20 240)", "oklch(0.65 0.22 30)"]}
  show_legend={true}
/>

Summary

Functions

pie_chart(assigns)

Functions

pie_chart(assigns)

Attributes

  • data (:list) (required) - List of %{label, value} (and optional :color).
  • colors (:list) - Override default palette. Defaults to [].
  • show_labels (:boolean) - Render percentage labels on slices. Defaults to false.
  • show_legend (:boolean) - Render color legend. Defaults to true.
  • animate (:boolean) - Enable entrance animations. Defaults to true.
  • animation_duration (:integer) - Animation duration in ms. Defaults to 600.
  • spacing (:integer) - Gap in pixels between slices (0-8). Matches Chart.js ArcElement spacing pattern. Defaults to 0.
  • corner_radius (:integer) - Border radius for slice corners in pixels. Simulated via round stroke caps. Defaults to 0.
  • show_link_labels (:boolean) - Show leader lines from slices to external labels. Defaults to false.
  • show_values (:boolean) - Show data values alongside labels in the legend. Defaults to false.
  • active_shape (:boolean) - Enable hover expand effect on slices (Recharts activeShape pattern). Defaults to false.
  • active_expand (:integer) - Radius expansion in px on hover when active_shape is true. Defaults to 6.
  • 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.