Stacked Area Chart: Cumulative Trends and Contribution Analysis

When you need to track both overall total volume and individual sub-component contributions over time, the Stacked Area Chart is the ideal visualization tool. Stacking area fills vertically creates a continuous composite view where the topmost line represents the aggregate total, while individual band widths show changing sub-category contributions, such as total web traffic broken down by search engine, organic, and direct referral channels over several months.

The Mechanics of Stacked Area Charts

Stacked area charts combine line series configurations with matching stack attributes. When the rendering engine detects identical stack identifiers across multiple series with type: 'line' and areaStyle active, it stacks each data point sequentially above the preceding series line path along the vertical Y-axis.

1. Essential Setup

To construct a basic stacked area chart, define a continuous X-axis, set type: 'line' on each series, enable areaStyle, and assign an identical stack identifier across all series:

ECharts Edit ECharts in VPasCode

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' }
    },
    legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct']
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            data: [320, 332, 301, 334, 390, 330, 320]
        }
    ]
};

Edit ECharts in VPasCode

Advanced Structural Techniques

Stacked area charts can be configured to focus either on overall cumulative growth or relative proportional shifts over time.

1. 100% Normalized Percentage Area Chart

When evaluating proportional shifts rather than total aggregate volume over time, normalize your dataset to 100% per horizontal time point:

ECharts Edit ECharts in VPasCode

option = {
    tooltip: {
        trigger: 'axis',
        formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
    },
    legend: {
        data: ['Desktop', 'Mobile', 'Tablet']
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2023', '2024', '2025', '2026']
    },
    yAxis: {
        type: 'value',
        min: 0,
        max: 100,
        axisLabel: { formatter: '{value}%' }
    },
    series: [
        {
            name: 'Desktop',
            type: 'line',
            stack: 'percent',
            smooth: true,
            areaStyle: {},
            data: [65, 55, 48, 40]
        },
        {
            name: 'Mobile',
            type: 'line',
            stack: 'percent',
            smooth: true,
            areaStyle: {},
            data: [25, 35, 42, 50]
        },
        {
            name: 'Tablet',
            type: 'line',
            stack: 'percent',
            smooth: true,
            areaStyle: {},
            data: [10, 10, 10, 10]
        }
    ]
};

Edit ECharts in VPasCode

Fine-Tuning Layout and Styling

Because stacked areas completely cover the background, adjusting fill opacity and line strokes helps keep individual layers clear and legible.

1. Custom Layer Opacity and Border Separators

Setting solid line strokes over slightly translucent area fills creates crisp visual boundaries between adjacent stacked bands:

ECharts Edit ECharts in VPasCode

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Product A',
            type: 'line',
            stack: 'volume',
            smooth: true,
            lineStyle: { width: 2, color: '#5470c6' },
            areaStyle: { color: '#5470c6', opacity: 0.7 },
            data: [120, 150, 180, 210]
        },
        {
            name: 'Product B',
            type: 'line',
            stack: 'volume',
            smooth: true,
            lineStyle: { width: 2, color: '#91cc75' },
            areaStyle: { color: '#91cc75', opacity: 0.7 },
            data: [220, 280, 250, 310]
        },
        {
            name: 'Product C',
            type: 'line',
            stack: 'volume',
            smooth: true,
            lineStyle: { width: 2, color: '#fac858' },
            areaStyle: { color: '#fac858', opacity: 0.7 },
            data: [150, 190, 220, 260]
        }
    ]
};

Edit ECharts in VPasCode

Strategic Best Practices

Anchor Stable Series at the Bottom: Place the largest or least volatile series at the bottom of the stack to establish a predictable baseline for the bands above it.
Limit Band Count: Stacking more than 4 to 5 series makes middle bands hard to evaluate accurately. Consider grouping minor categories into an “Other” category.
Use axisPointer: { type: 'cross' }: Combining hover crosshairs with a continuous tooltip makes pinpointing specific date values across dense vertical stacks straightforward.