PhiaUi.Components.RidgelineChart (phia_ui v0.1.17)

Copy Markdown View Source

Ridgeline chart (joy plot) — pure SVG, zero JS.

Renders multiple overlapping density distributions stacked vertically. Each row shows a Gaussian KDE of the given values. Useful for comparing distributions across categories.

Examples

<.ridgeline_chart data={[
  %{label: "Group A", values: [1, 2, 3, 3, 4, 5, 5, 5, 6, 7]},
  %{label: "Group B", values: [3, 4, 5, 5, 6, 7, 7, 8, 9, 10]},
  %{label: "Group C", values: [0, 1, 1, 2, 2, 3, 4, 5, 6, 8]}
]} />

<.ridgeline_chart
  data={[%{label: "2024", values: [...]}, %{label: "2025", values: [...]}]}
  overlap={0.6}
  fill_opacity={0.5}
/>

Summary

Functions

ridgeline_chart(assigns)

Functions

ridgeline_chart(assigns)

Attributes

  • data (:list) - Distribution data: [%{label, values: [numbers]}]. Defaults to [].
  • colors (:list) - Override default palette. CSS color strings. Defaults to [].
  • overlap (:float) - Overlap factor between distributions (0-1). Defaults to 0.5.
  • fill_opacity (:float) - Fill opacity for density areas. Defaults to 0.6.
  • resolution (:integer) - Number of KDE evaluation points. Defaults to 50.
  • bandwidth (:any) - KDE bandwidth (nil for Silverman's rule). Defaults to nil.
  • animate (:boolean) - Enable entrance animations. Defaults to true.
  • animation_duration (:integer) - Animation duration in ms. Defaults to 800.
  • show_labels (:boolean) - Show row labels. Defaults to true.
  • 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.