PhiaUi.Components.DotPlot (phia_ui v0.1.17)

Copy Markdown View Source

Dot plot — pure SVG, zero JS.

Renders categorical comparison with dots on parallel horizontal rows. Each category gets a row, and dots are positioned along the x-axis by value. Supports multi-series for comparing groups within each category.

Examples

<.dot_plot data={[
  %{label: "React", value: 85},
  %{label: "Vue", value: 72},
  %{label: "Svelte", value: 68},
  %{label: "Angular", value: 55}
]} />

<.dot_plot
  series={[
    %{name: "2024", data: [%{label: "Q1", value: 30}, %{label: "Q2", value: 45}]},
    %{name: "2025", data: [%{label: "Q1", value: 38}, %{label: "Q2", value: 52}]}
  ]}
  colors={["oklch(0.60 0.20 240)", "oklch(0.65 0.22 30)"]}
  dot_radius={6}
/>

Summary

Functions

dot_plot(assigns)

Functions

dot_plot(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 [].
  • colors (:list) - Override default palette. CSS color strings. Defaults to [].
  • dot_radius (:integer) - Dot radius in pixels. Defaults to 5.
  • show_grid (:boolean) - Show vertical grid lines. Defaults to true.
  • show_labels (:boolean) - Show axis and category 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.