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

Chart

SVG-based data visualisations with no external dependencies. Let each canvas stretch to the viewport so dashboards feel cinematic and data-dense.

Line Charts

Track momentum with precise or smoothed curves. Each SVG scales with the grid, so hero charts and compact insights reuse the same component.

Motion-aware

Linear series

Smoothed performance 

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

Bar Charts

Showcase distribution and composition. Capsule columns and gradients adapt to any width so comparison plots read clearly on ultra-wide grids.

Capsule columns

Quarterly revenue

Category mix 

    
    <.chart type={:bar} data={[28, 40, 32, 54]} labels={~w(Q1 Q2 Q3 Q4)} width={920} height={320} />
    <.chart type={:bar} data={[18, 26, 22, 31]} corner_radius={10} width={920} height={320} />

Pie & Donut

Perfect for proportions, share of voice, and device distribution. Donut mode keeps centre space ready for a KPI or storyteller annotation.

Share insights

Channel share

Device mix (donut)

Area & Sparkline

Highlight macro trends and compact micro-interactions. Wide canvases allow the area gradient to breathe, while sparklines stay punchy.

Momentum views

Area trend

Sparklines

Stacked Columns

Layer multiple datasets per category for product mix, cost breakdowns, or roadmap allocation. The wide canvas keeps legends readable.

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"]}
    ]}
    width={980}
    height={360}
    />

Props

Configure charts with concise options. All charts respect the numeric width and height you provide, so pick viewport-scale values when you want cinematic layouts.

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). Scale up for immersive dashboards.
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