Stacked Area Chart

Layer multiple area series to show both overall totals and individual contributions over time.

npm install @plocks/charts

Examples

Properties

Playground

Basics

Area chart with multiple series stacked to show cumulative contributions.

Loading demo…

import { StackedAreaChart } from '@plocks/charts';

import { SERIES } from './data';

export function Demo() {
  return (
    <StackedAreaChart
      title="Active users by surface"
      subtitle="Monthly totals"
      h={340}
      series={SERIES}
      stackOrder="normal"
      opacity={0.65}
      xAxis={{ show: true, title: 'Month', labelFormatter: (value) => `M${value}` }}
      yAxis={{
        show: true,
        title: 'Active users (thousands)',
        labelFormatter: (value) => `${value}`,
      }}
      grid={{ show: true }}
      legend={{ show: true, position: 'bottom' }}
      enableCrosshair
      multiTooltip
      liveTooltip
    />
  );
}

Scan to open this page on your phoneplocks.dev/charts/StackedAreaChart

Related charts

Area Chart

Stacked Bar Chart

Stacked Area Chart

Basics

Related charts

Further reading

plocks