Photonix

AreaChartWidget

An Area Chart widget that features sleek gradient fills and standardized layout components.

Preview

Revenue

Monthly performance

Revenue

Cost

Usage
"use client";

import { AreaChartWidget, type ChartConfig } from '@photonix/ultimate';

const data = [
    { name: 'Jan', revenue: 120, cost: 80 },
    { name: 'Feb', revenue: 180, cost: 110 },
    { name: 'Mar', revenue: 150, cost: 95 },
    { name: 'Apr', revenue: 240, cost: 150 },
];

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

export default function AreaChartWidgetBasicExample() {
    return <AreaChartWidget title="Revenue" subtitle="Monthly performance" data={data} config={config} dataKeys={['revenue', 'cost']} showLegend chartHeight={320} />;
}

Component API

AreaChartWidget

Prop
Type
Default
Description
data
any[]
-
Data for the chart
config
ChartConfig
-
Chart configuration for colors and labels
dataKeys
string | string[]
-
The key(s) to use for the area values. If multiple, multiple areas will be rendered.
xAxisKey
string
'name'
The key to use for the X axis categories
showGrid
boolean
true
Whether to show the background grid
showXAxis
boolean
true
Whether to show the X axis
showYAxis
boolean
true
Whether to show the Y axis
type
"step" | "basis" | "basisClosed" | "basisOpen" | "linear" | "linearClosed" | "natural" | "monotone" | "stepBefore" | "stepAfter"
'monotone'
Curve type for the area ('basis' | 'basisClosed' | 'basisOpen' | 'linear' | 'linearClosed' | 'natural' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter')
stackId
string | number
-
Whether to stack the areas
fillOpacity
number
0.4
Opacity of the area fill (0 to 1)
strokeWidth
number
2
Stroke width of the area border
showLegend
boolean
false
Whether to show a legend below the chart. Defaults to false.
areaChartProps
any
-
Any additional props to pass to the Recharts AreaChart component
className
string
-
Custom class name
style
React.CSSProperties
-
Custom style
title
React.ReactNode
-
The title of the widget
actions
React.ReactNode
-
Actions to display in the header (e.g. IconButton)
footer
React.ReactNode
-
Content to display below the chart
subtitle
string
-
Optional subtitle or description
loading
boolean
false
Loading state
appearance
WidgetAppearance
'outlined'
Widget appearance
padding
string | number
-
Widget padding (default: 16px)
chartHeight
string | number
300
Height of the chart container

Variants

Simple Area Chart

Standard area chart with a single data key.

Simple Area

Simple Area Chart
"use client";

import { AreaChartWidget, type ChartConfig } from '@photonix/ultimate';

const data = [
    { name: 'Jan', value: 400 },
    { name: 'Feb', value: 300 },
    { name: 'Mar', value: 600 },
    { name: 'Apr', value: 200 },
    { name: 'May', value: 500 },
    { name: 'Jun', value: 350 },
];

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

export default function AreaChartWidgetSimpleExample() {
    return <AreaChartWidget title="Simple Area" data={data} dataKeys="value" config={config} />;
}

Loading State

Displays a skeleton preview while data is being fetched.

Loading State
"use client";

import { AreaChartWidget, type ChartConfig } from '@photonix/ultimate';

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

export default function AreaChartWidgetLoadingExample() {
    return <AreaChartWidget title="Revenue Stream" data={[]} dataKeys="value" config={config} loading />;
}

Stacked Area Chart

Stack multiple data series to show cumulative totals.

Regional Sales

North

South

Stacked Area Chart
"use client";

import { AreaChartWidget, type ChartConfig } from '@photonix/ultimate';

const data = [
    { name: 'Jan', north: 400, south: 240 },
    { name: 'Feb', north: 300, south: 139 },
    { name: 'Mar', north: 600, south: 980 },
    { name: 'Apr', north: 200, south: 390 },
    { name: 'May', north: 500, south: 480 },
];

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

export default function AreaChartWidgetStackedExample() {
    return <AreaChartWidget title="Regional Sales" data={data} dataKeys={['north', 'south']} config={config} stackId="1" showLegend />;
}

On this page

Preview
Component API
Variants
Simple Area Chart
Loading State
Stacked Area Chart
Photonix UI - React Components, Templates & Figma Design System