PhiaUi.Components.AreaChart (phia_ui v0.1.17)

Copy Markdown View Source

Filled area chart — pure SVG, zero JS.

Supports a default single/multi-area view and a :stacked variant. Areas fade in on entrance; the line strokes animate with dashoffset.

Examples

<.area_chart data={[
  %{label: "Jan", value: 80},
  %{label: "Feb", value: 140},
  %{label: "Mar", value: 110}
]} />

<.area_chart
  series={[
    %{name: "Visitors", data: [%{label: "Mon", value: 100}, %{label: "Tue", value: 200}]},
    %{name: "Signups",  data: [%{label: "Mon", value: 40},  %{label: "Tue", value: 80}]}
  ]}
  variant={:stacked}
  fill_opacity={0.3}
/>

Summary

Functions

area_chart(assigns)

Functions

area_chart(assigns)

Attributes

  • data (:list) - Single-series: [%{label, value}]. Defaults to [].
  • series (:list) - Multi-series: [%{name, data: [%{label, value}]}]. Defaults to [].
  • variant (:atom) - :default overlays areas; :stacked accumulates them; :stream uses wiggle baseline (streamgraph). Defaults to :default. Must be one of :default, :stacked, or :stream.
  • curve (:atom) - Interpolation curve type for the area outline. Defaults to :linear. Must be one of :linear, :smooth, :monotone, :step_before, :step_after, or :step_middle.
  • colors (:list) - Override default palette. Defaults to [].
  • fill_opacity (:float) - Area fill opacity (0.0–1.0). Defaults to 0.2.
  • show_grid (:boolean) - Defaults to true.
  • show_labels (:boolean) - Defaults to true.
  • animate (:boolean) - Defaults to true.
  • animation_duration (:integer) - Defaults to 800.
  • theme (:map) - Chart theme overrides (see ChartTheme). Defaults to %{}.
  • show_point_labels (:boolean) - Show value labels above data points. 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.