PhiaUi.Components.WaterfallChart (phia_ui v0.1.17)

Copy Markdown View Source

Waterfall chart — cumulative positive/negative bars — pure SVG, zero JS.

Each bar floats at the cumulative total of previous bars. Positive steps use positive_color, negative steps use negative_color. An optional final bar rendered in total_color shows the aggregate sum.

Examples

<.waterfall_chart data={[
  %{label: "Revenue",   value: 500},
  %{label: "COGS",      value: -200},
  %{label: "Gross",     value: 0, total: true},
  %{label: "OpEx",      value: -120},
  %{label: "EBIT",      value: 0, total: true}
]} />

Summary

Functions

waterfall_chart(assigns)

Functions

waterfall_chart(assigns)

Attributes

  • data (:list) (required) - List of %{label, value}. Optional :total boolean marks a bar that resets to the running sum (shown in total_color).

  • positive_color (:string) - Color for gains. Defaults to "oklch(0.70 0.18 145)".

  • negative_color (:string) - Color for losses. Defaults to "oklch(0.60 0.25 0)".

  • total_color (:string) - Color for total bars. Defaults to "oklch(0.60 0.20 240)".

  • 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.