PhiaUi.Components.HistogramChart (phia_ui v0.1.17)

Copy Markdown View Source

Frequency distribution histogram — pure SVG, zero JS.

Accepts a flat list of numbers and bins them into bins equal-width buckets. Bars animate in on entrance.

Examples

<.histogram_chart data={[2, 5, 7, 3, 9, 1, 4, 8, 6, 3, 5, 7, 2, 6]} />

<.histogram_chart
  data={Enum.map(1..200, fn _ -> :rand.uniform(100) end)}
  bins={15}
  color="oklch(0.70 0.18 145)"
/>

Summary

Functions

histogram_chart(assigns)

Functions

histogram_chart(assigns)

Attributes

  • data (:list) (required) - Flat list of numeric values.
  • bins (:integer) - Number of histogram bins. Defaults to 10.
  • color (:string) - Bar fill color. Defaults to nil.
  • 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.