Stacked Area Chart

A customizable stacked area chart component with smooth animations and gradient fills for visualizing multiple data series over time.

Installation


pnpm dlx bna-ui add stacked-area-chart

Usage

import { StackedAreaChart } from '@/components/charts/stacked-area-chart';

const data = [
  { x: 1, y: [20, 30, 40], label: 'Jan' },
  { x: 2, y: [25, 35, 45], label: 'Feb' },
  { x: 3, y: [30, 40, 50], label: 'Mar' },
  { x: 4, y: [35, 45, 55], label: 'Apr' },
];
 
const categories = ['Series 1', 'Series 2', 'Series 3'];
 
<StackedAreaChart
  data={data}
  categories={categories}
  config={{
    height: 300,
    showLabels: true,
    animated: true,
  }}
/>;

Examples

Basic Stacked Area Chart

Sample Stacked Area Chart

Styled Stacked Area Chart

Large Stacked Area Chart

API Reference

StackedAreaChart

A customizable stacked area chart component with smooth animations and gradient fills. Perfect for displaying multiple data series over time or categories, showing both individual values and cumulative totals.

Prop	Type	Default	Description
`data`	`StackedAreaDataPoint[]`	-	Array of data points to display on the chart.
`colors`	`string[]`	`[]`	Array of colors for each data series.
`config`	`ChartConfig`	`{}`	Configuration object for chart appearance.
`style`	`ViewStyle`	-	Additional styles to apply to the chart.
`categories`	`string[]`	`[]`	Array of category names for the legend.

StackedAreaDataPoint

Property	Type	Default	Description
`x`	`number`	-	The x-axis value for the data point.
`y`	`number[]`	-	Array of y-values for each series at this x.
`label`	`string`	-	Optional label for the data point.

ChartConfig

Property	Type	Default	Description
`width`	`number`	-	Fixed width of the chart (auto-sizes if omitted).
`height`	`number`	`200`	Height of the chart.
`padding`	`number`	`20`	Padding around the chart.
`showGrid`	`boolean`	`true`	Whether to show grid lines.
`showLabels`	`boolean`	`true`	Whether to show labels for data points.
`animated`	`boolean`	`true`	Whether to animate the chart on load.
`duration`	`number`	`1000`	Animation duration in milliseconds.

Features

Stacked Areas: Displays multiple data series as stacked areas
Smooth Curves: Uses quadratic curves for smooth area transitions
Gradient Fills: Beautiful gradient fills for each area
Smooth Animations: Built-in animations using React Native Reanimated
Responsive Design: Automatically adapts to container width
Custom Colors: Support for custom color palettes
Grid Lines: Optional grid lines for better readability
Legend Support: Built-in legend with category names
Label Display: Shows labels for data points on x-axis

Use Cases

Stacked area charts are particularly effective for:

Time Series Data: Showing how different categories contribute to a total over time
Revenue Analysis: Displaying revenue streams from different sources
Performance Metrics: Tracking multiple KPIs simultaneously
Market Share: Visualizing market share changes over time
Resource Allocation: Showing how resources are distributed across categories
Survey Results: Displaying response distributions over time

Design Considerations

The stacked area chart is ideal for:

Part-to-Whole Relationships: Showing how individual parts contribute to the whole
Trend Analysis: Identifying trends in both individual series and total values
Comparative Analysis: Comparing the relative size of different categories
Cumulative Data: Displaying cumulative values effectively

Accessibility

The StackedAreaChart component includes several accessibility features:

Semantic SVG structure for screen readers
Proper contrast ratios for visual elements
Text labels for data points and categories
Legend with clear category identification
Grid lines for better value estimation

Performance

The component is optimized for performance:

Uses React Native Reanimated for smooth 60fps animations
Efficient SVG rendering with minimal re-renders
Automatic cleanup of animation values
Optimized path calculations for smooth curves

Styling

The component integrates with your theme system:

Uses primary color from theme for default series color
Uses mutedForeground color for labels and grid lines
Supports custom colors for each series
Gradient fills with opacity transitions
Responsive layout calculations

Animation

The chart features smooth entry animations:

Areas animate with fade-in effect
Configurable animation duration
Can be disabled for instant rendering
Uses React Native Reanimated for optimal performance
Staggered animations for multiple series

Data Structure

The component expects data in a specific format:

// Each data point represents a position on the x-axis
// with multiple y-values for different series
const data = [
  { x: 1, y: [10, 20, 30], label: 'Q1' },
  { x: 2, y: [15, 25, 35], label: 'Q2' },
  { x: 3, y: [12, 22, 32], label: 'Q3' },
  { x: 4, y: [18, 28, 38], label: 'Q4' },
];

Color Customization

You can customize colors for each series:

const colors = ['#8884d8', '#82ca9d', '#ffc658', '#ff7300'];
 
<StackedAreaChart
  data={data}
  colors={colors}
  categories={['Series A', 'Series B', 'Series C', 'Series D']}
/>;

Grid Configuration

Grid lines can be customized:

<StackedAreaChart
  data={data}
  config={{
    showGrid: true,
    // Grid lines are drawn at 0%, 25%, 50%, 75%, and 100% of the chart height
  }}
/>

Scatter Chart Stacked Bar Chart