PhiaUi.Components.BubbleChart (phia_ui v0.1.17)

Copy Markdown View Source

XY bubble chart with variable-radius circles — pure SVG, zero JS.

Like scatter chart but the :size field on each data point controls the rendered bubble radius (scaled relative to the maximum :size).

Examples

<.bubble_chart data={[
  %{x: 10, y: 30, size: 20, label: "A"},
  %{x: 40, y: 60, size: 80, label: "B"},
  %{x: 70, y: 45, size: 40, label: "C"}
]} />

<.bubble_chart
  data={[%{x: 5, y: 2, size: 10}, %{x: 30, y: 50, size: 100}]}
  color="oklch(0.65 0.22 30)"
  max_bubble_size={24}
/>

Summary

Functions

bubble_chart(assigns)

Functions

bubble_chart(assigns)

Attributes

  • data (:list) (required) - List of %{x, y, size} (and optional :label).
  • color (:string) - Bubble fill color. Defaults to nil.
  • max_bubble_size (:integer) - Maximum rendered bubble radius in px. Defaults to 20.
  • show_grid (:boolean) - Defaults to true.
  • show_labels (:boolean) - Defaults to true.
  • animate (:boolean) - Defaults to true.
  • animation_duration (:integer) - Defaults to 600.
  • theme (:map) - Chart theme overrides. 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.