Skip to main content
Stacked area charts display multiple series as filled areas stacked on top of each other, showing both individual series values and the cumulative total.

​
When to use

  • Part-to-whole over time - Show how components contribute to a total
  • Cumulative values - Display running totals
  • Multiple series composition - Compare proportions across time periods

​
Basic example

const config: GraphConfig = {
  type: 'areaStacked',
  data: {
    columns: [
      { key: 'quarter', label: 'Quarter' },
      { key: 'product_a', label: 'Product A' },
      { key: 'product_b', label: 'Product B' },
      { key: 'product_c', label: 'Product C' }
    ],
    rows: [
      { quarter: 'Q1', product_a: 30, product_b: 20, product_c: 15 },
      { quarter: 'Q2', product_a: 35, product_b: 25, product_c: 20 },
      { quarter: 'Q3', product_a: 40, product_b: 30, product_c: 25 },
      { quarter: 'Q4', product_a: 45, product_b: 35, product_c: 30 }
    ]
  }
};