Photonix

Area Chart

Visualise quantitative data as an area using AreaChart.

Preview

Usage
"use client";

import { Area, AreaChart, CartesianGrid, ChartContainer, ChartTooltip, XAxis, YAxis, type ChartConfig } from '@photonix/ultimate';

const data = [
    { month: 'Jan', revenue: 120 },
    { month: 'Feb', revenue: 180 },
    { month: 'Mar', revenue: 150 },
    { month: 'Apr', revenue: 240 },
];

const config: ChartConfig = {
    revenue: { label: 'Revenue', color: 'var(--chart-1)' },
};

export default function AreaChartBasicExample() {
    return (
        <ChartContainer config={config} minHeight={260}>
            <AreaChart data={data} margin={{ top: 20, right: 20, left: -20, bottom: 0 }}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="month" tickLine={false} axisLine={false} tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                <YAxis tickLine={false} axisLine={false} tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                <ChartTooltip />
                <Area type="monotone" dataKey="revenue" stroke="var(--color-revenue)" fill="var(--color-revenue)" fillOpacity={0.2} />
            </AreaChart>
        </ChartContainer>
    );
}

Component API

AreaChart

Prop
Type
Default
Description
data
any[]
-
The source data array.
children
ReactElement
-
Chart components (Area, XAxis, Tooltip, Legend, etc).

Area

Prop
Type
Default
Description
dataKey
string
-
The key of data to be displayed.
type
string
monotone
The interpolation type of area.
stroke
string
-
The color of the line.
fill
string
-
The fill color of the area.

Variants

Stacked area chart

Stack related series to show cumulative contribution.

Stacked area chart
"use client";

import { Area, AreaChart, CartesianGrid, ChartContainer, ChartLegend, ChartTooltip, XAxis, YAxis, type ChartConfig } from '@photonix/ultimate';

const data = [
    { month: 'Jan', north: 120, south: 80 },
    { month: 'Feb', north: 160, south: 110 },
    { month: 'Mar', north: 130, south: 140 },
    { month: 'Apr', north: 210, south: 170 },
];

const config: ChartConfig = {
    north: { label: 'North', color: 'var(--chart-1)' },
    south: { label: 'South', color: 'var(--chart-2)' },
};

export default function AreaChartStackedExample() {
    return (
        <ChartContainer config={config} minHeight={260}>
            <AreaChart data={data} margin={{ top: 20, right: 20, left: -20, bottom: 0 }}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="month" tickLine={false} axisLine={false} tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                <YAxis tickLine={false} axisLine={false} tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                <ChartTooltip />
                <ChartLegend />
                <Area type="monotone" dataKey="north" stackId="region" stroke="var(--color-north)" fill="var(--color-north)" fillOpacity={0.24} />
                <Area type="monotone" dataKey="south" stackId="region" stroke="var(--color-south)" fill="var(--color-south)" fillOpacity={0.24} />
            </AreaChart>
        </ChartContainer>
    );
}

Gradient fill

Use SVG gradients for a softer visual emphasis.

Gradient fill
"use client";

import { Area, AreaChart, CartesianGrid, ChartContainer, ChartTooltip, XAxis, YAxis, type ChartConfig } from '@photonix/ultimate';

const data = [
    { week: 'W1', usage: 42 },
    { week: 'W2', usage: 58 },
    { week: 'W3', usage: 49 },
    { week: 'W4', usage: 76 },
];

const config: ChartConfig = {
    usage: { label: 'Usage', color: 'var(--chart-2)' },
};

export default function AreaChartGradientExample() {
    return (
        <ChartContainer config={config} minHeight={260}>
            <AreaChart data={data} margin={{ top: 20, right: 20, left: -20, bottom: 0 }}>
                <defs>
                    <linearGradient id="areaGradientUsage" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor="var(--color-usage)" stopOpacity={0.35} />
                        <stop offset="95%" stopColor="var(--color-usage)" stopOpacity={0.02} />
                    </linearGradient>
                </defs>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="week" tickLine={false} axisLine={false} tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                <YAxis tickLine={false} axisLine={false} tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }} />
                <ChartTooltip />
                <Area type="monotone" dataKey="usage" stroke="var(--color-usage)" fill="url(#areaGradientUsage)" strokeWidth={2} />
            </AreaChart>
        </ChartContainer>
    );
}

On this page

Preview
Component API
Variants
Stacked area chart
Gradient fill
Photonix UI - React Components, Templates & Figma Design System