PhiaUi.Components.LollipopChart (phia_ui v0.1.17)

Copy Markdown View Source

Lollipop chart — pure SVG, zero JS.

Thin stems with dot endpoints, a lightweight alternative to bar charts. Supports vertical and horizontal orientations.

Examples

<.lollipop_chart data={[
  %{label: "A", value: 120},
  %{label: "B", value: 80},
  %{label: "C", value: 150}
]} />

Summary

Functions

lollipop_chart(assigns)

Attributes

  • data (:list) - Single-series shorthand: [%{label, value}]. Defaults to [].
  • series (:list) - Multi-series: [%{name, data: [%{label, value}]}]. Overrides :data when present. Defaults to [].
  • variant (:atom) - Chart orientation. Defaults to :vertical. Must be one of :vertical, or :horizontal.
  • colors (:list) - Override default palette. CSS color strings. Defaults to [].
  • dot_radius (:integer) - Radius of dot endpoints in pixels. Defaults to 5.
  • stem_width (:integer) - Width of stem lines in pixels. Defaults to 2.
  • show_grid (:boolean) - Show grid lines. Defaults to true.
  • show_labels (:boolean) - Show axis tick labels. Defaults to true.
  • animate (:boolean) - Enable entrance animations. Defaults to true.
  • animation_duration (:integer) - Animation duration in ms. Defaults to 600.
  • 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.