Photonix UI - React Components, Templates & Figma Design System

AreaChartWidget

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

Preview

Usage

import { AreaChartWidget } from '@photonix/ultimate';

<AreaChartWidget 
  title="Revenue Stream" 
  data={data}
  dataKeys="value"
  config={{ value: { label: 'Revenue', color: 'var(--chart-2)' } }}
/>

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 Chart

<AreaChartWidget 
  title="Simple Area" 
  data={AREA_DATA}
  dataKeys="value"
  config={{ value: { label: 'Value', color: 'var(--chart-1)' } }}
/>

Loading State

Displays a skeleton preview while data is being fetched.

Loading State

<AreaChartWidget 
  title="Revenue Stream" 
  data={[]}
  dataKeys="value"
  config={{ value: { label: 'Revenue', color: 'var(--chart-2)' } }}
  loading
/>

Stacked Area Chart

Stack multiple data series to show cumulative totals.

Stacked Area Chart

<AreaChartWidget 
  title="Regional Sales" 
  data={SALES_DATA}
  dataKeys={['north', 'south']}
  config={{ 
    north: { label: 'North', color: 'var(--chart-1)' },
    south: { label: 'South', color: 'var(--chart-2)' }
  }}
  stackId="1"
  showLegend
/>

AreaChartWidget

Preview

Revenue Stream

Component API

AreaChartWidget

Variants

Simple Area Chart

Simple Area

Loading State

Stacked Area Chart

Regional Sales

On this page