PhiaUi.Components.BarChart (phia_ui v0.1.17)

Copy Markdown View Source

Vertical grouped / stacked / horizontal bar chart — pure SVG, zero JS.

Bars animate in with a scaleY grow effect (or scaleX for horizontal). Stagger delay is applied per-group.

Variants

  • :grouped — bars side-by-side within each group (default)
  • :stacked — bars stacked vertically per group
  • :horizontal — horizontal bars (single or multi-series)

Examples

<.bar_chart data={[
  %{label: "Jan", value: 120},
  %{label: "Feb", value: 80},
  %{label: "Mar", value: 150}
]} />

<.bar_chart
  series={[
    %{name: "Revenue", data: [%{label: "Q1", value: 200}, %{label: "Q2", value: 280}]},
    %{name: "Cost",    data: [%{label: "Q1", value: 100}, %{label: "Q2", value: 130}]}
  ]}
  variant={:grouped}
  colors={["oklch(0.60 0.20 240)", "oklch(0.65 0.22 30)"]}
/>

Summary

Functions

bar_chart(assigns)

Functions

bar_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) - Bar layout variant. Defaults to :grouped. Must be one of :grouped, :stacked, or :horizontal.
  • colors (:list) - Override default palette. CSS color strings. Defaults to [].
  • show_grid (:boolean) - Show Y-axis 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.
  • border_radius (:integer) - Corner radius for bars in pixels (0–12). Defaults to 2.
  • theme (:map) - Chart theme overrides (see ChartTheme). Defaults to %{}.
  • show_totals (:boolean) - Show sum labels on stacked bars. Defaults to false.
  • percent (:boolean) - Normalize values to percentage of total (0-100% Y-axis). Defaults to false.
  • 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.