PhiaUi.Components.Data.XyChart (phia_ui v0.1.17)

Copy Markdown View Source

Composable XY chart container with auto-scaling.

Inspired by visx's XYChart — auto-computes domains from all series data, creates scales, and renders grid, axes, legend, annotations, and mixed series types (bar + line on the same chart).

Examples

<.xy_chart
  width={400}
  height={300}
  series={[
    %{name: "Revenue", type: :bar, data: [%{label: "Q1", value: 200}, %{label: "Q2", value: 280}]},
    %{name: "Trend",   type: :line, data: [%{label: "Q1", value: 190}, %{label: "Q2", value: 270}]}
  ]}
  show_grid={true}
  show_legend={true}
/>

Summary

Functions

xy_chart(assigns)

Functions

xy_chart(assigns)

Attributes

  • width (:integer) - SVG viewport width. Defaults to 400.

  • height (:integer) - SVG viewport height. Defaults to 300.

  • padding (:map) - Padding %{top, right, bottom, left}. Merges with defaults. Defaults to %{}.

  • series (:list) - List of series maps: %{name, type, data, color}.

    • type — :bar, :line, :area, or :scatter (default :line)
    • data — [%{label, value}]
    • color — optional override color

    Defaults to [].

  • x_scale_type (:atom) - Scale type for X axis. Defaults to :band. Must be one of :linear, :band, :time, or :log.

  • y_scale_type (:atom) - Scale type for Y axis. Defaults to :linear. Must be one of :linear, or :log.

  • colors (:list) - Override default color palette. Defaults to [].

  • show_grid (:boolean) - Show horizontal grid lines. Defaults to true.

  • show_x_axis (:boolean) - Show X axis. Defaults to true.

  • show_y_axis (:boolean) - Show Y axis. Defaults to true.

  • show_legend (:boolean) - Show legend below chart. Defaults to false.

  • animate (:boolean) - Enable animations. Defaults to true.

  • animation_duration (:integer) - Animation duration in ms. Defaults to 600.

  • bar_radius (:integer) - Corner radius for bars. Defaults to 2.

  • stroke_width (:integer) - Line stroke width. Defaults to 2.

  • multi_y_axis (:boolean) - Enable dual Y-axis mode. Defaults to false.

  • y_axes (:list) - Config for multiple Y axes: [%{position: :left, label: "..."}]. Defaults to [].

  • crosshair (:any) - Crosshair type: nil, :x, :y, or :both. Defaults to nil.

  • error_bars (:boolean) - Show error bars on series with error data. Defaults to false.

  • cell_overrides (:map) - Per-series cell overrides: %{"series_name" => [%{color: "red"}, ...]}. Recharts Cell pattern. Defaults to %{}.

  • class (:string) - Defaults to nil.

  • Global attributes are accepted.