defmodule PyrauiWeb.DocsLive.ChartDocs do use PyrauiWeb, :html def render(assigns) do ~H"""
Chart Gallery

Chart

SVG-based data visualisations with no external dependencies. Mix and match sizing, colours, stacked datasets, and smoothing to compose dashboards, reporting, or inline data pulses.

Line Charts

Track trends with default or smoothed curves. Adjust height and width to match dense dashboards or widescreen hero visualisations.

Motion-aware

Linear series

Smoothed performance

    
    <.chart type={:line} data={[12, 24, 31, 28]} labels={~w(Jan Feb Mar Apr)} />
    <.chart type={:line} curved data={[18, 22, 40, 52]} width={480} height={260} />

Bar Charts

Compare categories and use custom colour palettes for product mix, revenue segments, or multi-tenant analytics.

Capsule columns

Quarterly revenue

Category mix

    
    <.chart type={:bar} data={[28, 40, 32, 54]} labels={~w(Q1 Q2 Q3 Q4)} />
    <.chart
      type={:bar}
      colors={["#0ea5e9", "#38bdf8", "#a855f7", "#f97316"]}
      corner_radius={8}
      data={[18, 26, 22, 31]}
    />

Pie & Donut

Perfect for proportions, share of voice, and device distribution. Use donut mode for richer inner labels or metrics.

Share insights

Channel share

Device mix (donut)

Area & Sparkline

Highlight momentum with filled areas or micro sparklines for compact tiles and table cells.

Momentum views

Area trend

Sparklines

Stacked Columns

Layer multiple datasets per category for product mix, cost breakdowns, or roadmap allocation.

Multi-series

Quarterly allocation

    
    <.chart
      type={:stacked}
      data={[60, 78, 84, 96]}
      datasets={[
        %{label: "Design", values: [12, 16, 18, 20], colors: ["#6366f1"]},
        %{label: "Frontend", values: [18, 22, 24, 28], colors: ["#22d3ee"]},
        %{label: "Backend", values: [20, 24, 26, 30], colors: ["#f97316"]}
      ]}
    />

Props

Configure charts with concise options. All charts are responsive to the width/height you provide and support custom colour palettes.

Prop Type Default Description
type atom — Choose :line, :bar, :pie, :donut, :area, :stacked, or :sparkline.
data list — Primary dataset. For stacked charts, set it to totals per category.
datasets list | nil nil Stacked chart series. Each entry accepts :values and optional :colors.
labels list [] Optional labels for tooltips and accessibility.
width / height integer 400 / 300 Render size in pixels (SVG). Adjust to suit your layout.
colors list | nil auto Override default palette. Applies cyclically across values.
curved boolean false Smooth line/area charts using quadratic Bézier curves.
fill_opacity float 0.3 Adjust the area fill intensity.
corner_radius integer 4 Bar/stacked bar radius for softer columns.
class string "" Append classes to the outer container for layout adjustments.
""" end end