skills/syncfusion-flutter-cartesian-charts/references/chart-types-stacked.md

Stacked Chart Types

Table of Contents

• Overview
• Stacked Area Chart
• 100% Stacked Area Chart
• Stacked Bar Chart
• 100% Stacked Bar Chart
• Stacked Column Chart
• 100% Stacked Column Chart
• Stacked Line Chart
• 100% Stacked Line Chart
• Stacked vs 100% Stacked — When to Use Each

---

Overview

Stacked charts layer multiple series on top of each other to show both individual contributions and the total. All stacked series use the same xValueMapper / yValueMapper pattern as regular series.

Group stacked series using the groupName property — series with the same groupName are stacked together. Series with different group names create separate stacks side by side.

---

Stacked Area Chart

SfCartesianChart(
  primaryXAxis: CategoryAxis(),
  series: <CartesianSeries>[
    StackedAreaSeries<ChartData, String>(
      dataSource: chartData,
      xValueMapper: (ChartData d, _) => d.x,
      yValueMapper: (ChartData d, _) => d.y1,
      name: 'Product A',
    ),
    StackedAreaSeries<ChartData, String>(
      dataSource: chartData,
      xValueMapper: (ChartData d, _) => d.x,
      yValueMapper: (ChartData d, _) => d.y2,
      name: 'Product B',
    ),
    StackedAreaSeries<ChartData, String>(
      dataSource: chartData,
      xValueMapper: (ChartData d, _) => d.x,
      yValueMapper: (ChartData d, _) => d.y3,
      name: 'Product C',
    ),
  ],
)

---

100% Stacked Area Chart

Each series contributes as a percentage of the total at each x point. The y-axis always goes from 0 to 100%.

StackedArea100Series<ChartData, String>(
  dataSource: chartData,
  xValueMapper: (ChartData d, _) => d.x,
  yValueMapper: (ChartData d, _) => d.y1,
  name: 'Product A',
)

---

Stacked Bar Chart

Horizontal stacked bars — segments stack left-to-right.

StackedBarSeries<ChartData, String>(
  dataSource: chartData,
  xValueMapper: (ChartData d, _) => d.x,
  yValueMapper: (ChartData d, _) => d.y1,
  name: 'Q1',
)

---

100% Stacked Bar Chart

StackedBar100Series<ChartData, String>(
  dataSource: chartData,
  xValueMapper: (ChartData d, _) => d.x,
  yValueMapper: (ChartData d, _) => d.y1,
  name: 'Q1',
)

---

Stacked Column Chart

Vertical stacked bars — segments stack bottom-to-top.

StackedColumnSeries<ChartData, String>(
  dataSource: chartData,
  xValueMapper: (ChartData d, _) => d.x,
  yValueMapper: (ChartData d, _) => d.y1,
  name: 'Category A',
  borderRadius: const BorderRadius.vertical(top: Radius.circular(4)),
)

---

100% Stacked Column Chart

StackedColumn100Series<ChartData, String>(
  dataSource: chartData,
  xValueMapper: (ChartData d, _) => d.x,
  yValueMapper: (ChartData d, _) => d.y1,
  name: 'Category A',
)

---

Stacked Line Chart

Lines stacked on top of each other — each series value is added to the cumulative total of series below it.

StackedLineSeries<ChartData, String>(
  dataSource: chartData,
  xValueMapper: (ChartData d, _) => d.x,
  yValueMapper: (ChartData d, _) => d.y1,
  name: 'Series 1',
  markerSettings: const MarkerSettings(isVisible: true),
)

---

100% Stacked Line Chart

StackedLine100Series<ChartData, String>(
  dataSource: chartData,
  xValueMapper: (ChartData d, _) => d.x,
  yValueMapper: (ChartData d, _) => d.y1,
  name: 'Series 1',
)

---

Stacked vs 100% Stacked — When to Use Each

Goal	Use
Show both part and total (absolute values matter)	StackedXxxSeries
Compare proportions across categories (total irrelevant)	StackedXxx100Series
Show how composition changes over time	Either — 100% is clearer for proportion shifts
Revenue breakdown where total revenue matters	StackedColumnSeries
Market share comparison across competitors	StackedColumn100Series

Gotcha: In stacked charts, the y-axis range expands to accommodate the cumulative total of all series — make sure to allow enough vertical space or adjust axis range explicitly with minimum/maximum on NumericAxis.