PhiaUi.Components.StreamChart (phia_ui v0.1.17)

Copy Markdown View Source

Stream graph (ThemeRiver) — pure SVG, zero JS.

Renders stacked areas with wiggle baseline centering, creating a flowing stream-like visualization. Useful for showing how categories evolve over time.

Examples

<.stream_chart series={[
  %{name: "Product A", data: [%{label: "Jan", value: 10}, %{label: "Feb", value: 15}]},
  %{name: "Product B", data: [%{label: "Jan", value: 20}, %{label: "Feb", value: 12}]},
  %{name: "Product C", data: [%{label: "Jan", value: 8},  %{label: "Feb", value: 18}]}
]} />

<.stream_chart
  data={[%{label: "Q1", value: 30}, %{label: "Q2", value: 45}, %{label: "Q3", value: 25}]}
  fill_opacity={0.8}
/>

Summary

Functions

stream_chart(assigns)

Functions

stream_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 [].
  • colors (:list) - Override default palette. CSS color strings. Defaults to [].
  • fill_opacity (:float) - Fill opacity for stream areas (0.0-1.0). Defaults to 0.7.
  • animate (:boolean) - Enable entrance animations. Defaults to true.
  • animation_duration (:integer) - Animation duration in ms. Defaults to 800.
  • show_labels (:boolean) - Show x-axis 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.