PhiaUi.Components.WordCloudChart (phia_ui v0.1.17)

Copy Markdown View Source

Word cloud chart — pure SVG, zero JS.

Text elements with varied font sizes arranged via Archimedean spiral placement. Font size scales linearly with word value. Optionally rotates some words -90 degrees for visual variety.

Examples

<.word_cloud_chart data={[
  %{text: "Elixir", value: 90},
  %{text: "Phoenix", value: 75},
  %{text: "LiveView", value: 60},
  %{text: "OTP", value: 45},
  %{text: "Erlang", value: 40},
  %{text: "GenServer", value: 30}
]} />

<.word_cloud_chart
  data={[%{text: "Hello", value: 50}, %{text: "World", value: 30}]}
  colors={["oklch(0.60 0.20 240)", "oklch(0.65 0.22 30)"]}
/>

Summary

Functions

word_cloud_chart(assigns)

Functions

word_cloud_chart(assigns)

Attributes

  • data (:list) - Word data: [%{text, value}]. Defaults to [].
  • colors (:list) - Override default palette. CSS color strings. Defaults to [].
  • animate (:boolean) - Enable entrance animations. Defaults to true.
  • animation_duration (:integer) - Animation duration in ms. Defaults to 800.
  • theme (:map) - Chart theme overrides (see ChartTheme). Defaults to %{}.
  • 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.