Stacked Area Chart

Stacked area charts display multiple data series as filled areas stacked on top of each other. They are ideal for showing how individual parts contribute to a cumulative total over time or across categories.

Interface

StackedAreaChart Props

interface StackedAreaChartProps {
  // Required properties
  data: StackedAreaChartData;

  // Optional properties
  custom?: Partial<StackedAreaChartCustom>;
  title?: string;
  getScale?: (data: StackedAreaChartData) => StackedAreaChartScale;
}

Data Structure

type StackedAreaChartData = {
  labels: string[];                                  // Category labels
  datasets: { legend: string; values: number[] }[];  // Data series
};

type StackedAreaChartScale = {
  min: number;     // Minimum value
  max: number;     // Maximum value
  step: number;    // Step interval
};

Basic Usage

import Widget from '@meursyphus/flitter-react';
import { StackedAreaChart } from '@meursyphus/headless-chart';

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  datasets: [
    { legend: 'Desktop', values: [500, 520, 530, 510, 540, 560] },
    { legend: 'Mobile', values: [200, 250, 300, 350, 400, 450] },
    { legend: 'Tablet', values: [50, 60, 70, 80, 90, 100] }
  ]
};

function BasicStackedAreaChart() {
  return (
    <Widget
      width="600px"
      height="400px"
      widget={StackedAreaChart({ data })}
    />
  );
}

Chart Components

Stacked Area Chart consists of the following hierarchical structure:

StackedAreaChart
└── Layout (overall layout)
    ├── Title (chart title)
    ├── Legend (legend items)
    └── Plot (plot area)
        ├── XAxis (X-axis)
        ├── YAxis (Y-axis)
        ├── Grid (grid lines)
        └── Series (data series)
            └── Area (individual stacked area)

Customizable Elements

You can customize the following components through the custom prop:

Component	Args	Description
`layout`	`{ title, legends, plot }`	Overall chart layout
`plot`	`{ xAxis, yAxis, series, grid }`	Plot area
`series`	`{ areas }`	Data series container
`area`	`{ values, cumulativeValues, legend, index }`	Individual stacked area
`legend`	`{ name, index }`	Legend item
`title`	`{ name }`	Chart title
`dataLabel`	`{ value, label, legend }`	Data label
`xAxis`	`{ line, labels, tick }`	X-axis structure
`yAxis`	`{ line, labels, tick }`	Y-axis structure
`xAxisLabel`	`{ name, index }`	X-axis label
`yAxisLabel`	`{ name, index }`	Y-axis label
`xAxisLine`	-	X-axis line
`yAxisLine`	-	Y-axis line
`xAxisTick`	-	X-axis tick mark
`yAxisTick`	-	Y-axis tick mark
`grid`	`{ xLine, yLine }`	Grid container
`gridXLine`	-	Vertical grid line
`gridYLine`	-	Horizontal grid line

Real-World Usage Examples

1. Custom Area Colors

const coloredAreas = StackedAreaChart({
  data,
  custom: {
    area: ({ values, cumulativeValues, legend, index }) => {
      const colors = ['rgba(59, 130, 246, 0.6)', 'rgba(16, 185, 129, 0.6)', 'rgba(245, 158, 11, 0.6)'];
      // Custom area rendering with gradient fills
    }
  }
});

2. Custom Data Labels

const labeledAreas = StackedAreaChart({
  data,
  custom: {
    dataLabel: ({ value, label, legend }) => {
      return Text(`${value}`, {
        style: new TextStyle({
          fontSize: 10,
          color: '#374151'
        })
      });
    }
  }
});

Next Steps

For more examples, check out the demo page
Use cumulative values to understand the total trend
Combine with data labels for precise value display