Repository: recharts/recharts (2025-07-20T06:44:03Z)

Issue:
Stacked Area are not displayed when using multiple series
## What is the current behavior?

When combining the `stackId` + `multiple series` features, only one area is displayed.

## What is the expected behavior?

Expect to get stacked area, similar when using a single data serie

## Please provide a demo of the problem in a sandbox

Reproducer https://stackblitz.com/edit/react-qarbpqfn?file=src%2FExample.tsx


## Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

Rechart 3.0 (not tested on previous version)



Discussion:
thanks for the report, this does work with 2.15.4 so will label it as a bug. For now the work around will be to combine your data and use separate data keys for each area
cc @PavelVanecek 
Hm this is tricky because in your example, all the dataKeys are the same. In 3.0 we use the dataKey as an index in the stacked data object. In 2.x we used to use the reference to the DOM element itself, that's why it worked (and in 3.0 we no longer read the DOM so that's not available).

I will try to come up with something but it may take a while.
For reference, this is how the example renders on latest 2.x:

<img width="500" height="430" alt="Image" src="https://github.com/user-attachments/assets/84b5a122-a52d-449b-a086-f6feaae270b9" />



Patch:
diff --git a/docker-compose.yml b/docker-compose.yml
index 868eb3dc3a..3f4e214583 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -8,4 +8,5 @@ services:
     command: >
       sh -c "npx playwright show-report /recharts/test-vr/playwright-report --host 0.0.0.0 --port 9323"
     volumes:
+      - ./src:/recharts/src
       - ./test-vr:/recharts/test-vr
diff --git a/scripts/snapshots/es6Files.txt b/scripts/snapshots/es6Files.txt
index 67528a81d2..82c81db557 100644
--- a/scripts/snapshots/es6Files.txt
+++ b/scripts/snapshots/es6Files.txt
@@ -130,6 +130,7 @@
   "es6/state/selectors/combiners/combineActiveTooltipIndex.js",
   "es6/state/selectors/combiners/combineAxisRangeWithReverse.js",
   "es6/state/selectors/combiners/combineCoordinateForDefaultIndex.js",
+  "es6/state/selectors/combiners/combineDisplayedStackedData.js",
   "es6/state/selectors/combiners/combineTooltipInteractionState.js",
   "es6/state/selectors/combiners/combineTooltipPayload.js",
   "es6/state/selectors/combiners/combineTooltipPayloadConfigurations.js",
diff --git a/scripts/snapshots/libFiles.txt b/scripts/snapshots/libFiles.txt
index 5d418dd559..4b777d3827 100644
--- a/scripts/snapshots/libFiles.txt
+++ b/scripts/snapshots/libFiles.txt
@@ -130,6 +130,7 @@
   "lib/state/selectors/combiners/combineActiveTooltipIndex.js",
   "lib/state/selectors/combiners/combineAxisRangeWithReverse.js",
   "lib/state/selectors/combiners/combineCoordinateForDefaultIndex.js",
+  "lib/state/selectors/combiners/combineDisplayedStackedData.js",
   "lib/state/selectors/combiners/combineTooltipInteractionState.js",
   "lib/state/selectors/combiners/combineTooltipPayload.js",
   "lib/state/selectors/combiners/combineTooltipPayloadConfigurations.js",
diff --git a/scripts/snapshots/typesFiles.txt b/scripts/snapshots/typesFiles.txt
index b2d747fe25..3ebdad254f 100644
--- a/scripts/snapshots/typesFiles.txt
+++ b/scripts/snapshots/typesFiles.txt
@@ -130,6 +130,7 @@
   "types/state/selectors/combiners/combineActiveTooltipIndex.d.ts",
   "types/state/selectors/combiners/combineAxisRangeWithReverse.d.ts",
   "types/state/selectors/combiners/combineCoordinateForDefaultIndex.d.ts",
+  "types/state/selectors/combiners/combineDisplayedStackedData.d.ts",
   "types/state/selectors/combiners/combineTooltipInteractionState.d.ts",
   "types/state/selectors/combiners/combineTooltipPayload.d.ts",
   "types/state/selectors/combiners/combineTooltipPayloadConfigurations.d.ts",
diff --git a/src/state/selectors/areaSelectors.ts b/src/state/selectors/areaSelectors.ts
index 3a2b419b17..a12a3fce11 100644
--- a/src/state/selectors/areaSelectors.ts
+++ b/src/state/selectors/areaSelectors.ts
@@ -61,7 +61,7 @@ const selectBandSize = createSelector(
   },
 );
 
-const selectGraphicalItemStackedData = (
+export const selectGraphicalItemStackedData = (
   state: RechartsRootState,
   xAxisId: AxisId,
   yAxisId: AxisId,
diff --git a/src/state/selectors/axisSelectors.ts b/src/state/selectors/axisSelectors.ts
index 8d850b5a3f..aa2e64b6d3 100644
--- a/src/state/selectors/axisSelectors.ts
+++ b/src/state/selectors/axisSelectors.ts
@@ -73,6 +73,8 @@ import { combineAxisRangeWithReverse } from './combiners/combineAxisRangeWithRev
 import { DEFAULT_Y_AXIS_WIDTH } from '../../util/Constants';
 import { getStackSeriesIdentifier } from '../../util/stacks/getStackSeriesIdentifier';
 import { AllStackGroups, StackGroup } from '../../util/stacks/stackTypes';
+import { selectTooltipAxis } from './selectTooltipAxis';
+import { combineDisplayedStackedData, DisplayedStackedData } from './combiners/combineDisplayedStackedData';
 
 const defaultNumericDomain: AxisDomain = [0, 'auto'];
 
@@ -528,8 +530,18 @@ export function getErrorDomainByDataKey(
   );
 }
 
+export const selectDisplayedStackedData: (
+  state: RechartsRootState,
+  axisType: XorYorZType,
+  axisId: AxisId,
+  isPanorama: boolean,
+) => DisplayedStackedData = createSelector(
+  [selectCartesianItemsSettings, selectChartDataWithIndexesIfNotInPanorama, selectTooltipAxis],
+  combineDisplayedStackedData,
+);
+
 export const combineStackGroups = (
-  displayedData: ChartData,
+  displayedData: DisplayedStackedData,
   items: ReadonlyArray<MaybeStackedGraphicalItem>,
   stackOffsetType: StackOffsetType,
 ): AllStackGroups => {
@@ -574,7 +586,7 @@ export const selectStackGroups: (
   axisId: AxisId,
   isPanorama: boolean,
 ) => AllStackGroups | undefined = createSelector(
-  [selectDisplayedData, selectCartesianItemsSettings, selectStackOffsetType],
+  [selectDisplayedStackedData, selectCartesianItemsSettings, selectStackOffsetType],
   combineStackGroups,
 );
 
diff --git a/src/state/selectors/barSelectors.ts b/src/state/selectors/barSelectors.ts
index 18fdb01f27..00e60a254a 100644
--- a/src/state/selectors/barSelectors.ts
+++ b/src/state/selectors/barSelectors.ts
@@ -160,7 +160,15 @@ export interface MaybeStackedGraphicalItem {
   id: GraphicalItemId;
   stackId: StackId | undefined;
   dataKey: DataKey<any> | undefined;
+  /**
+   * Bars have a size but Area does not.
+   */
   barSize: number | string | undefined;
+  /**
+   * If the given graphical item has its own data array, it will appear here.
+   * If this is undefined, the data will be taken from the chart root prop.
+   */
+  data?: ChartData | undefined;
 }
 
 /**
diff --git a/src/state/selectors/combiners/combineDisplayedStackedData.ts b/src/state/selectors/combiners/combineDisplayedStackedData.ts
new file mode 100644
index 0000000000..fe9ee5deaa
--- /dev/null
+++ b/src/state/selectors/combiners/combineDisplayedStackedData.ts
@@ -0,0 +1,55 @@
+import { GraphicalItemSettings } from '../../graphicalItemsSlice';
+import { ChartDataState } from '../../chartDataSlice';
+import { BaseCartesianAxis } from '../../cartesianAxisSlice';
+import { getStackSeriesIdentifier } from '../../../util/stacks/getStackSeriesIdentifier';
+import { getValueByDataKey } from '../../../util/ChartUtils';
+import { StackSeriesIdentifier } from '../../../util/stacks/stackTypes';
+
+/**
+ * In a stacked chart, each graphical item has its own data. That data could be either:
+ * - defined on the chart root, in which case the item gets a unique dataKey
+ * - or defined on the item itself, in which case multiple items can share the same dataKey
+ *
+ * That means we cannot use the dataKey as a unique identifier for the item.
+ *
+ * This type represents a single data point in a stacked chart, where each key is a series identifier
+ * and the value is the numeric value for that series using the numerical axis dataKey.
+ */
+export type DisplayedStackedDataPoint = Record<StackSeriesIdentifier, number>;
+
+export type DisplayedStackedData = ReadonlyArray<DisplayedStackedDataPoint>;
+
+export function combineDisplayedStackedData(
+  cartesianItems: ReadonlyArray<GraphicalItemSettings>,
+  { chartData = [] }: ChartDataState,
+  tooltipAxisSettings: BaseCartesianAxis,
+): DisplayedStackedData {
+  const tooltipDataKey = tooltipAxisSettings?.dataKey;
+
+  // A map of tooltip data keys to the stacked data points
+  const knownItemsByDataKey = new Map<string | number, DisplayedStackedDataPoint>();
+
+  cartesianItems.forEach(item => {
+    // If there is no data on the individual item then we use the root chart data
+    const resolvedData = item.data ?? chartData;
+    if (resolvedData == null || resolvedData.length === 0) {
+      // if that didn't work then we skip this item
+      return;
+    }
+    const stackIdentifier = getStackSeriesIdentifier(item);
+    resolvedData.forEach((entry, index) => {
+      const tooltipValue = tooltipDataKey == null ? index : String(getValueByDataKey(entry, tooltipDataKey, null));
+      const numericValue = getValueByDataKey(entry, item.dataKey, 0);
+      let curr;
+      if (knownItemsByDataKey.has(tooltipValue)) {
+        curr = knownItemsByDataKey.get(tooltipValue);
+      } else {
+        curr = {};
+      }
+      Object.assign(curr, { [stackIdentifier]: numericValue });
+      knownItemsByDataKey.set(tooltipValue, curr);
+    });
+  });
+  const merged = Array.from(knownItemsByDataKey.values());
+  return merged;
+}
diff --git a/src/state/selectors/dataSelectors.ts b/src/state/selectors/dataSelectors.ts
index c5929a7669..adc3477050 100644
--- a/src/state/selectors/dataSelectors.ts
+++ b/src/state/selectors/dataSelectors.ts
@@ -1,7 +1,6 @@
 import { createSelector } from 'reselect';
 import { RechartsRootState } from '../store';
 import { ChartDataState } from '../chartDataSlice';
-import { AxisId } from '../cartesianAxisSlice';
 
 /**
  * This selector always returns the data with the indexes set by a Brush.
@@ -37,8 +36,8 @@ export const selectChartDataAndAlwaysIgnoreIndexes: (state: RechartsRootState) =
 
 export const selectChartDataWithIndexesIfNotInPanorama = (
   state: RechartsRootState,
-  _xAxisId: AxisId,
-  _yAxisId: AxisId,
+  _unused1: unknown,
+  _unused2: unknown,
   isPanorama: boolean,
 ): ChartDataState => {
   if (isPanorama) {
diff --git a/src/state/selectors/radialBarSelectors.ts b/src/state/selectors/radialBarSelectors.ts
index 265a8b0817..640e4eb855 100644
--- a/src/state/selectors/radialBarSelectors.ts
+++ b/src/state/selectors/radialBarSelectors.ts
@@ -35,17 +35,14 @@ import {
   selectStackOffsetType,
 } from './rootPropsSelectors';
 import { PolarGraphicalItemSettings } from '../graphicalItemsSlice';
-import {
-  PolarAxisType,
-  selectPolarDisplayedData,
-  selectPolarItemsSettings,
-  selectUnfilteredPolarItems,
-} from './polarSelectors';
+import { PolarAxisType, selectPolarItemsSettings, selectUnfilteredPolarItems } from './polarSelectors';
 import { AngleAxisSettings, RadiusAxisSettings } from '../polarAxisSlice';
 import { LegendPayload } from '../../component/DefaultLegendContent';
 import { isNullish } from '../../util/DataUtils';
 
 import { AllStackGroups, StackDataPoint, StackSeries, StackSeriesIdentifier } from '../../util/stacks/stackTypes';
+import { combineDisplayedStackedData, DisplayedStackedData } from './combiners/combineDisplayedStackedData';
+import { selectTooltipAxis } from './selectTooltipAxis';
 
 export interface RadialBarSettings extends MaybeStackedGraphicalItem {
   dataKey: DataKey<any> | undefined;
@@ -333,12 +330,21 @@ export const selectPolarBarPosition: (
   },
 );
 
+const selectPolarCombinedStackedData: (
+  state: RechartsRootState,
+  axisType: PolarAxisType,
+  polarAxisId: AxisId,
+) => DisplayedStackedData = createSelector(
+  [selectPolarItemsSettings, selectChartDataAndAlwaysIgnoreIndexes, selectTooltipAxis],
+  combineDisplayedStackedData,
+);
+
 const selectStackGroups: (
   state: RechartsRootState,
   axisType: PolarAxisType,
   polarAxisId: AxisId,
 ) => AllStackGroups | undefined = createSelector(
-  [selectPolarDisplayedData, selectPolarItemsSettings, selectStackOffsetType],
+  [selectPolarCombinedStackedData, selectPolarItemsSettings, selectStackOffsetType],
   combineStackGroups,
 );
 
diff --git a/src/state/selectors/tooltipSelectors.ts b/src/state/selectors/tooltipSelectors.ts
index 97393f07a6..9ec7f0d62e 100644
--- a/src/state/selectors/tooltipSelectors.ts
+++ b/src/state/selectors/tooltipSelectors.ts
@@ -79,6 +79,7 @@ import { StackGroup } from '../../util/stacks/stackTypes';
 import { selectTooltipAxisId } from './selectTooltipAxisId';
 import { selectTooltipAxisType } from './selectTooltipAxisType';
 import { selectTooltipAxis } from './selectTooltipAxis';
+import { combineDisplayedStackedData, DisplayedStackedData } from './combiners/combineDisplayedStackedData';
 
 export const selectTooltipAxisRealScaleType: (state: RechartsRootState) => string | undefined = createSelector(
   [selectTooltipAxis, selectChartLayout, selectHasBar, selectChartName, selectTooltipAxisType],
@@ -117,6 +118,11 @@ export const selectTooltipDisplayedData: (state: RechartsRootState) => ChartData
   combineDisplayedData,
 );
 
+const selectTooltipStackedData: (state: RechartsRootState) => DisplayedStackedData = createSelector(
+  [selectAllGraphicalItemsSettings, selectChartDataWithIndexes, selectTooltipAxis],
+  combineDisplayedStackedData,
+);
+
 const selectAllTooltipAppliedValues: (state: RechartsRootState) => AppliedChartData = createSelector(
   [selectTooltipDisplayedData, selectTooltipAxis, selectAllGraphicalItemsSettings],
   combineAppliedValues,
@@ -128,7 +134,7 @@ const selectTooltipAxisDomainDefinition: (state: RechartsRootState) => AxisDomai
 );
 
 const selectTooltipStackGroups: (state: RechartsRootState) => Record<StackId, StackGroup> = createSelector(
-  [selectTooltipDisplayedData, selectAllGraphicalItemsSettings, selectStackOffsetType],
+  [selectTooltipStackedData, selectAllGraphicalItemsSettings, selectStackOffsetType],
   combineStackGroups,
 );
 
diff --git a/src/util/stacks/getStackSeriesIdentifier.ts b/src/util/stacks/getStackSeriesIdentifier.ts
index 9493fcefb8..53fc3426c6 100644
--- a/src/util/stacks/getStackSeriesIdentifier.ts
+++ b/src/util/stacks/getStackSeriesIdentifier.ts
@@ -9,5 +9,5 @@ import { StackSeriesIdentifier } from './stackTypes';
 export function getStackSeriesIdentifier(
   graphicalItem: MaybeStackedGraphicalItem | undefined,
 ): StackSeriesIdentifier | undefined {
-  return graphicalItem?.dataKey;
+  return graphicalItem?.id;
 }
diff --git a/src/util/stacks/stackTypes.ts b/src/util/stacks/stackTypes.ts
index ec9a088232..684fa951af 100644
--- a/src/util/stacks/stackTypes.ts
+++ b/src/util/stacks/stackTypes.ts
@@ -1,7 +1,7 @@
 import { Series } from 'victory-vendor/d3-shape';
-import { DataKey } from '../types';
 import { MaybeStackedGraphicalItem } from '../../state/selectors/barSelectors';
 import { StackId } from '../ChartUtils';
+import { GraphicalItemId } from '../../state/graphicalItemsSlice';
 
 /*
  * So chart stacks come in layers:
@@ -54,4 +54,4 @@ export type StackDataPoint = [number, number];
  * Identifier for a series in the stack.
  * Used to join the stack series with the graphical items in the stack.
  */
-export type StackSeriesIdentifier = DataKey<any>;
+export type StackSeriesIdentifier = GraphicalItemId;


Test patch:
diff --git a/test-vr/__snapshots__/App.spec-vr.tsx-snapshots/LineChart-1-chromium-linux.png b/test-vr/__snapshots__/App.spec-vr.tsx-snapshots/LineChart-1-chromium-linux.png
deleted file mode 100644
index 19211601c9..0000000000
Binary files a/test-vr/__snapshots__/App.spec-vr.tsx-snapshots/LineChart-1-chromium-linux.png and /dev/null differ
diff --git a/test-vr/__snapshots__/App.spec-vr.tsx-snapshots/LineChart-1-firefox-linux.png b/test-vr/__snapshots__/App.spec-vr.tsx-snapshots/LineChart-1-firefox-linux.png
deleted file mode 100644
index 4d7d98dc22..0000000000
Binary files a/test-vr/__snapshots__/App.spec-vr.tsx-snapshots/LineChart-1-firefox-linux.png and /dev/null differ
diff --git a/test-vr/__snapshots__/App.spec-vr.tsx-snapshots/LineChart-1-webkit-linux.png b/test-vr/__snapshots__/App.spec-vr.tsx-snapshots/LineChart-1-webkit-linux.png
deleted file mode 100644
index b025241ce3..0000000000
Binary files a/test-vr/__snapshots__/App.spec-vr.tsx-snapshots/LineChart-1-webkit-linux.png and /dev/null differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/data-on-chart-root-1-chromium-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/data-on-chart-root-1-chromium-linux.png
new file mode 100644
index 0000000000..d355ff64de
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/data-on-chart-root-1-chromium-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/data-on-chart-root-1-firefox-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/data-on-chart-root-1-firefox-linux.png
new file mode 100644
index 0000000000..8db8819714
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/data-on-chart-root-1-firefox-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/data-on-chart-root-1-webkit-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/data-on-chart-root-1-webkit-linux.png
new file mode 100644
index 0000000000..4fcfd5af89
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/data-on-chart-root-1-webkit-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/dataKey-on-YAxis-multiple-data-arrays-1-chromium-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/dataKey-on-YAxis-multiple-data-arrays-1-chromium-linux.png
new file mode 100644
index 0000000000..4e4c51a34f
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/dataKey-on-YAxis-multiple-data-arrays-1-chromium-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/dataKey-on-YAxis-multiple-data-arrays-1-firefox-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/dataKey-on-YAxis-multiple-data-arrays-1-firefox-linux.png
new file mode 100644
index 0000000000..a95eceace2
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/dataKey-on-YAxis-multiple-data-arrays-1-firefox-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/dataKey-on-YAxis-multiple-data-arrays-1-webkit-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/dataKey-on-YAxis-multiple-data-arrays-1-webkit-linux.png
new file mode 100644
index 0000000000..14e6b7db33
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/dataKey-on-YAxis-multiple-data-arrays-1-webkit-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-exclusive-dataKey-1-chromium-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-exclusive-dataKey-1-chromium-linux.png
new file mode 100644
index 0000000000..2e70604f7e
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-exclusive-dataKey-1-chromium-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-exclusive-dataKey-1-firefox-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-exclusive-dataKey-1-firefox-linux.png
new file mode 100644
index 0000000000..7fcfa00b37
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-exclusive-dataKey-1-firefox-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-exclusive-dataKey-1-webkit-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-exclusive-dataKey-1-webkit-linux.png
new file mode 100644
index 0000000000..619b85f1b0
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-exclusive-dataKey-1-webkit-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-1-chromium-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-1-chromium-linux.png
new file mode 100644
index 0000000000..8884abf124
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-1-chromium-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-1-firefox-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-1-firefox-linux.png
new file mode 100644
index 0000000000..1d32b8e24a
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-1-firefox-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-1-webkit-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-1-webkit-linux.png
new file mode 100644
index 0000000000..5ae4f60ba8
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-1-webkit-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-without-XAxis-dataKey-1-chromium-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-without-XAxis-dataKey-1-chromium-linux.png
new file mode 100644
index 0000000000..da3fce52ed
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-without-XAxis-dataKey-1-chromium-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-without-XAxis-dataKey-1-firefox-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-without-XAxis-dataKey-1-firefox-linux.png
new file mode 100644
index 0000000000..55aeeb7096
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-without-XAxis-dataKey-1-firefox-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-without-XAxis-dataKey-1-webkit-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-without-XAxis-dataKey-1-webkit-linux.png
new file mode 100644
index 0000000000..3def238e23
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/multiple-data-arrays-repeated-dataKey-without-XAxis-dataKey-1-webkit-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-1-chromium-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-1-chromium-linux.png
new file mode 100644
index 0000000000..2e70604f7e
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-1-chromium-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-1-firefox-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-1-firefox-linux.png
new file mode 100644
index 0000000000..7fcfa00b37
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-1-firefox-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-1-webkit-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-1-webkit-linux.png
new file mode 100644
index 0000000000..619b85f1b0
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-1-webkit-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-without-XAxis-dataKey-1-chromium-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-without-XAxis-dataKey-1-chromium-linux.png
new file mode 100644
index 0000000000..a0fa9fedab
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-without-XAxis-dataKey-1-chromium-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-without-XAxis-dataKey-1-firefox-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-without-XAxis-dataKey-1-firefox-linux.png
new file mode 100644
index 0000000000..02ca4161e1
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-without-XAxis-dataKey-1-firefox-linux.png differ
diff --git a/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-without-XAxis-dataKey-1-webkit-linux.png b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-without-XAxis-dataKey-1-webkit-linux.png
new file mode 100644
index 0000000000..35d989a982
Binary files /dev/null and b/test-vr/__snapshots__/tests/AreaChart.stacked.spec-vr.tsx-snapshots/single-data-array-without-XAxis-dataKey-1-webkit-linux.png differ
diff --git a/test-vr/tests/AreaChart.stacked.spec-vr.tsx b/test-vr/tests/AreaChart.stacked.spec-vr.tsx
new file mode 100644
index 0000000000..57578c1e11
--- /dev/null
+++ b/test-vr/tests/AreaChart.stacked.spec-vr.tsx
@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import { pageData } from '../../storybook/stories/data';
+import { Area, AreaChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from '../../src';
+
+test('data on chart root', async ({ mount }) => {
+  const component = await mount(
+    <AreaChart width={800} height={500} data={pageData}>
+      <CartesianGrid strokeDasharray="3 3" />
+      <XAxis dataKey="name" allowDuplicatedCategory={false} />
+      <YAxis interval="preserveEnd" />
+      <Legend />
+      <Tooltip defaultIndex={3} />
+      <Area dataKey="pv" stackId="a" stroke="#8884d8" fill="#8884d8" />
+      <Area dataKey="uv" stackId="a" stroke="#82ca9d" fill="#82ca9d" />
+    </AreaChart>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+const dataMerged = [
+  {
+    name: 'a',
+    value1: 5,
+    value2: 10,
+    value3: 23,
+  },
+  {
+    name: 'b',
+    value1: 25,
+    value2: 10,
+    value3: 13,
+  },
+];
+
+test('single data array', async ({ mount }) => {
+  const component = await mount(
+    <AreaChart width={500} height={400} data={dataMerged}>
+      <XAxis dataKey="name" allowDuplicatedCategory={false} />
+      <YAxis dataKey="sum" />
+      <Legend />
+      <Area dataKey="value1" stackId="1" stroke="red" fill="red" />
+      <Area dataKey="value2" stackId="1" stroke="green" fill="green" />
+      <Area dataKey="value3" stackId="1" stroke="blue" fill="blue" />
+      <Tooltip defaultIndex={1} />
+    </AreaChart>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('single data array without XAxis dataKey', async ({ mount }) => {
+  const component = await mount(
+    <AreaChart width={500} height={400} data={dataMerged}>
+      <XAxis allowDuplicatedCategory={false} />
+      <YAxis dataKey="sum" />
+      <Legend />
+      <Area dataKey="value1" stackId="1" stroke="red" fill="red" />
+      <Area dataKey="value2" stackId="1" stroke="green" fill="green" />
+      <Area dataKey="value3" stackId="1" stroke="blue" fill="blue" />
+      <Tooltip defaultIndex={1} />
+    </AreaChart>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+const data1Value1 = [
+  { name: 'a', value1: 5 },
+  { name: 'b', value1: 25 },
+];
+const data2Value2 = [
+  { name: 'a', value2: 10 },
+  { name: 'b', value2: 10 },
+];
+const data3Value3 = [
+  { name: 'a', value3: 23 },
+  { name: 'b', value3: 13 },
+];
+
+test('multiple data arrays, exclusive dataKey', async ({ mount }) => {
+  const component = await mount(
+    <AreaChart width={500} height={400}>
+      <XAxis dataKey="name" allowDuplicatedCategory={false} />
+      <YAxis dataKey="sum" />
+      <Legend />
+      <Area data={data1Value1} dataKey="value1" stackId="1" stroke="red" fill="red" />
+      <Area data={data2Value2} dataKey="value2" stackId="1" stroke="green" fill="green" />
+      <Area data={data3Value3} dataKey="value3" stackId="1" stroke="blue" fill="blue" />
+      <Tooltip defaultIndex={1} />
+    </AreaChart>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+const data1 = [
+  { name: 'a', value: 5 },
+  { name: 'b', value: 25 },
+];
+const data2 = [
+  { name: 'a', value: 10 },
+  { name: 'b', value: 10 },
+];
+const data3 = [
+  { name: 'a', value: 23 },
+  { name: 'b', value: 13 },
+];
+
+test('multiple data arrays, repeated dataKey', async ({ mount }) => {
+  // https://github.com/recharts/recharts/issues/6073
+  const component = await mount(
+    <AreaChart width={500} height={400}>
+      <XAxis dataKey="name" allowDuplicatedCategory={false} />
+      <YAxis dataKey="value" />
+      <Legend />
+      <Area data={data1} dataKey="value" stackId="1" stroke="red" fill="rgba(255,0,0,0.5)" name="Area 1" id="area1" />
+      <Area data={data2} dataKey="value" stackId="1" stroke="green" fill="rgba(0,128,0,0.5)" name="Area 2" />
+      <Area data={data3} dataKey="value" stackId="1" stroke="blue" fill="rgba(0,0,255,0.5)" name="Area 3" />
+      <Tooltip defaultIndex={1} />
+    </AreaChart>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('multiple data arrays, repeated dataKey, without XAxis dataKey', async ({ mount }) => {
+  const component = await mount(
+    <AreaChart width={500} height={400}>
+      <XAxis allowDuplicatedCategory={false} />
+      <YAxis dataKey="value" />
+      <Legend />
+      <Area data={data1} dataKey="value" stackId="1" stroke="red" fill="rgba(255,0,0,0.5)" name="Area 1" />
+      <Area data={data2} dataKey="value" stackId="1" stroke="green" fill="rgba(0,128,0,0.5)" name="Area 2" />
+      <Area data={data3} dataKey="value" stackId="1" stroke="blue" fill="rgba(0,0,255,0.5)" name="Area 3" />
+      <Tooltip defaultIndex={1} />
+    </AreaChart>,
+  );
+  await expect(component).toHaveScreenshot();
+});
+
+test('dataKey on YAxis, multiple data arrays', async ({ mount }) => {
+  const component = await mount(
+    <AreaChart width={500} height={400}>
+      <XAxis dataKey="name" allowDuplicatedCategory={false} />
+      <YAxis dataKey="value" />
+      <Legend />
+      {/* @ts-expect-error looks like typescript is correct here, the chart does not render */}
+      <Area data={data1} stackId="1" stroke="red" fill="red" />
+      {/* @ts-expect-error looks like typescript is correct here, the chart does not render */}
+      <Area data={data2} stackId="1" stroke="green" fill="green" />
+      {/* @ts-expect-error looks like typescript is correct here, the chart does not render */}
+      <Area data={data3} stackId="1" stroke="blue" fill="blue" />
+      <Tooltip defaultIndex={1} />
+    </AreaChart>,
+  );
+  await expect(component).toHaveScreenshot();
+});
diff --git a/test/cartesian/Brush.stacked.spec.tsx b/test/cartesian/Brush.stacked.spec.tsx
index b56ccdb13e..80d87a7875 100644
--- a/test/cartesian/Brush.stacked.spec.tsx
+++ b/test/cartesian/Brush.stacked.spec.tsx
@@ -146,7 +146,8 @@ describe('Brush in a stacked chart', () => {
           ],
           stackedData: expect.toBeRechartsStackedData([
             [
-              // 5 items only, because the brush has been moved
+              // 6 elements for each stack, because the index is applied later
+              [0, 2400],
               [0, 4567],
               [0, 1398],
               [0, 9800],
@@ -154,6 +155,7 @@ describe('Brush in a stacked chart', () => {
               [0, 4800],
             ],
             [
+              [2400, 2800],
               [4567, 4867],
               [1398, 1698],
               [9800, 10000],
diff --git a/test/chart/AreaChart.stacked.spec.tsx b/test/chart/AreaChart.stacked.spec.tsx
new file mode 100644
index 0000000000..b003b156f4
--- /dev/null
+++ b/test/chart/AreaChart.stacked.spec.tsx
@@ -0,0 +1,1182 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { Area, AreaChart, Tooltip, XAxis, YAxis } from '../../src';
+import { createSelectorTestCase } from '../helper/createSelectorTestCase';
+import { expectAreaCurve } from '../helper/expectAreaCurve';
+import { AreaSettings, selectArea, selectGraphicalItemStackedData } from '../../src/state/selectors/areaSelectors';
+import { selectDisplayedData, selectStackGroups } from '../../src/state/selectors/axisSelectors';
+import { StackId } from '../../src/util/ChartUtils';
+import { ExpectedStackedDataSeries, expectGraphicalItemSettings } from '../helper/expectStackGroups';
+import { ChartData } from '../../src/state/chartDataSlice';
+import { StackGroup } from '../../src/util/stacks/stackTypes';
+
+const data1 = [
+  { name: 'a', value: 5 },
+  { name: 'b', value: 25 },
+];
+const data2 = [
+  { name: 'a', value: 10 },
+  { name: 'b', value: 10 },
+];
+const data3 = [
+  { name: 'a', value: 23 },
+  { name: 'b', value: 13 },
+];
+const data1Value1 = [
+  { name: 'a', value1: 5 },
+  { name: 'b', value1: 25 },
+];
+const data2Value2 = [
+  { name: 'a', value2: 10 },
+  { name: 'b', value2: 10 },
+];
+const data3Value3 = [
+  { name: 'a', value3: 23 },
+  { name: 'b', value3: 13 },
+];
+const dataMerged = [
+  {
+    name: 'a',
+    value1: 5,
+    value2: 10,
+    value3: 23,
+  },
+  {
+    name: 'b',
+    value1: 25,
+    value2: 10,
+    value3: 13,
+  },
+];
+
+describe('AreaChart stacked', () => {
+  describe('with single data array', () => {
+    const areaSettings1: AreaSettings = {
+      barSize: undefined,
+      id: 'area1',
+      connectNulls: false,
+      baseValue: 0,
+      dataKey: 'value1',
+      stackId: '1',
+      data: undefined,
+    };
+
+    const areaSettings2: AreaSettings = {
+      barSize: undefined,
+      id: 'area2',
+      connectNulls: false,
+      baseValue: 0,
+      dataKey: 'value2',
+      stackId: '1',
+      data: undefined,
+    };
+
+    const renderTestCase = createSelectorTestCase(({ children }) => (
+      <AreaChart width={500} height={400} data={dataMerged}>
+        <XAxis dataKey="name" allowDuplicatedCategory={false} />
+        <YAxis dataKey="sum" />
+        <Tooltip />
+        <Area
+          type="monotone"
+          dataKey={areaSettings1.dataKey}
+          stackId={areaSettings1.stackId}
+          id={areaSettings1.id}
+          stroke="red"
+          fill="red"
+        />
+        <Area
+          type="monotone"
+          dataKey={areaSettings2.dataKey}
+          stackId={areaSettings2.stackId}
+          stroke="green"
+          fill="green"
+          id={areaSettings2.id}
+        />
+        <Area type="monotone" dataKey="value3" stackId="1" id="area3" stroke="blue" fill="blue" />
+        {children}
+      </AreaChart>
+    ));
+
+    it('should select displayed data', () => {
+      const { spy } = renderTestCase(state => selectDisplayedData(state, 'xAxis', 0, false));
+      const expected: ChartData = [
+        { name: 'a', value1: 5, value2: 10, value3: 23 },
+        { name: 'b', value1: 25, value2: 10, value3: 13 },
+      ];
+      expect(spy).toHaveBeenLastCalledWith(expected);
+    });
+
+    it('should select stack groups for all areas', () => {
+      const { spy } = renderTestCase(state => selectStackGroups(state, 'yAxis', 0, false));
+      const expected: Record<StackId, StackGroup> = {
+        '1': {
+          graphicalItems: [
+            expectGraphicalItemSettings({
+              barSize: undefined,
+              data: undefined,
+              dataKey: 'value1',
+              id: 'area1',
+              stackId: '1',
+            }),
+            expectGraphicalItemSettings({
+              barSize: undefined,
+              data: undefined,
+              dataKey: 'value2',
+              id: 'area2',
+              stackId: '1',
+            }),
+            expectGraphicalItemSettings({
+              barSize: undefined,
+              data: undefined,
+              dataKey: 'value3',
+              id: 'area3',
+              stackId: '1',
+            }),
+          ],
+          stackedData: expect.toBeRechartsStackedData([
+            [
+              [0, 5],
+              [0, 25],
+            ],
+            [
+              [5, 15],
+              [25, 35],
+            ],
+            [
+              [15, 38],
+              [35, 48],
+            ],
+          ]),
+        },
+      };
+      expect(spy).toHaveBeenLastCalledWith(expected);
+    });
+
+    it('should select data stacks for the first area', () => {
+      const { spy } = renderTestCase(state => selectGraphicalItemStackedData(state, 0, 0, false, areaSettings1));
+      const expected: ExpectedStackedDataSeries = [
+        [0, 5],
+        [0, 25],
+      ];
+      expect(spy).toHaveBeenLastCalledWith(expect.toBeRechartsStackedSeries(expected));
+    });
+
+    it('should select data stacks for the second area', () => {
+      const { spy } = renderTestCase(state => selectGraphicalItemStackedData(state, 0, 0, false, areaSettings2));
+      const expected: ExpectedStackedDataSeries = [
+        [5, 15],
+        [25, 35],
+      ];
+      expect(spy).toHaveBeenLastCalledWith(expect.toBeRechartsStackedSeries(expected));
+    });
+
+    it('should select points for the first area', () => {
+      const { spy } = renderTestCase(state => selectArea(state, 0, 0, false, areaSettings1));
+      const expected = {
+        baseLine: [
+          {
+            x: 65,
+            y: 365,
+            payload: {
+              name: 'a',
+              value1: 5,
+              value2: 10,
+              value3: 23,
+            },
+          },
+          {
+            x: 495,
+            y: 365,
+            payload: {
+              name: 'b',
+              value1: 25,
+              value2: 10,
+              value3: 13,
+            },
+          },
+        ],
+        isRange: false,
+        points: [
+          {
+            payload: {
+              name: 'a',
+              value1: 5,
+              value2: 10,
+              value3: 23,
+            },
+            value: expect.toBeRechartsStackedSeriesPoint([0, 5]),
+            x: 65,
+            y: 335,
+          },
+          {
+            payload: {
+              name: 'b',
+              value1: 25,
+              value2: 10,
+              value3: 13,
+            },
+            value: expect.toBeRechartsStackedSeriesPoint([0, 25]),
+            x: 495,
+            y: 214.99999999999997,
+          },
+        ],
+      };
+      expect(spy).toHaveBeenLastCalledWith(expected);
+    });
+
+    it('should select points for the second area', () => {
+      const { spy } = renderTestCase(state => selectArea(state, 0, 0, false, areaSettings2));
+      expect(spy).toHaveBeenLastCalledWith({
+        baseLine: [
+          // y-value of the first area becomes the baseline for the second area
+          {
+            x: 65,
+            y: 335,
+            payload: {
+              name: 'a',
+              value1: 5,
+              value2: 10,
+              value3: 23,
+            },
+          },
+          {
+            x: 495,
+            y: 214.99999999999997,
+            payload: {
+              name: 'b',
+              value1: 25,
+              value2: 10,
+              value3: 13,
+            },
+          },
+        ],
+        isRange: false,
+        points: [
+          {
+            payload: {
+              name: 'a',
+              value1: 5,
+              value2: 10,
+              value3: 23,
+            },
+            // this should be 5 -> 15 because the first area has 5 and the second area has 10
+            value: expect.toBeRechartsStackedSeriesPoint([5, 15]),
+            x: 65,
+            y: 275,
+          },
+          {
+            payload: {
+              name: 'b',
+              value1: 25,
+              value2: 10,
+              value3: 13,
+            },
+            // this should be 25 -> 35 because the first area has 25 and the second area has 10
+            value: expect.toBeRechartsStackedSeriesPoint([25, 35]),
+            x: 495,
+            y: 154.99999999999997,
+          },
+        ],
+      });
+    });
+
+    it('should render three stacked areas', () => {
+      const { container } = renderTestCase();
+      expectAreaCurve(container, [{ d: 'M65,335L495,215' }, { d: 'M65,275L495,155' }, { d: 'M65,137L495,77' }]);
+    });
+  });
+
+  describe('with single data array, and without explicit XAxis dataKey', () => {
+    const areaSettings1: AreaSettings = {
+      barSize: undefined,
+      id: 'area1',
+      connectNulls: false,
+      baseValue: 0,
+      dataKey: 'value1',
+      stackId: '1',
+      data: undefined,
+    };
+
+    const areaSettings2: AreaSettings = {
+      barSize: undefined,
+      id: 'area2',
+      connectNulls: false,
+      baseValue: 0,
+      dataKey: 'value2',
+      stackId: '1',
+      data: undefined,
+    };
+
+    const renderTestCase = createSelectorTestCase(({ children }) => (
+      <AreaChart width={500} height={400} data={dataMerged}>
+        <XAxis allowDuplicatedCategory={false} />
+        <YAxis dataKey="sum" />
+        <Tooltip />
+        <Area
+          type="monotone"
+          dataKey={areaSettings1.dataKey}
+          stackId={areaSettings1.stackId}
+          id={areaSettings1.id}
+          stroke="red"
+          fill="red"
+        />
+        <Area
+          type="monotone"
+          dataKey={areaSettings2.dataKey}
+          stackId={areaSettings2.stackId}
+          stroke="green"
+          fill="green"
+          id={areaSettings2.id}
+        />
+        <Area type="monotone" dataKey="value3" stackId="1" id="area3" stroke="blue" fill="blue" />
+        {children}
+      </AreaChart>
+    ));
+
+    it('should select displayed data', () => {
+      const { spy } = renderTestCase(state => selectDisplayedData(state, 'xAxis', 0, false));
+      const expected: ChartData = [
+        { name: 'a', value1: 5, value2: 10, value3: 23 },
+        { name: 'b', value1: 25, value2: 10, value3: 13 },
+      ];
+      expect(spy).toHaveBeenLastCalledWith(expected);
+    });
+
+    it('should select stack groups for all areas', () => {
+      const { spy } = renderTestCase(state => selectStackGroups(state, 'yAxis', 0, false));
+      const expected: Record<StackId, StackGroup> = {
+        '1': {
+          graphicalItems: [
+            expectGraphicalItemSettings({
+              barSize: undefined,
+              data: undefined,
+              dataKey: 'value1',
+              id: 'area1',
+              stackId: '1',
+            }),
+            expectGraphicalItemSettings({
+              barSize: undefined,
+              data: undefined,
+              dataKey: 'value2',
+              id: 'area2',
+              stackId: '1',
+            }),
+            expectGraphicalItemSettings({
+              barSize: undefined,
+              data: undefined,
+              dataKey: 'value3',
+              id: 'area3',
+              stackId: '1',
+            }),
+          ],
+          stackedData: expect.toBeRechartsStackedData([
+            [
+              [0, 5],
+              [0, 25],
+            ],
+            [
+              [5, 15],
+              [25, 35],
+            ],
+            [
+              [15, 38],
+              [35, 48],
+            ],
+          ]),
+        },
+      };
+      expect(spy).toHaveBeenLastCalledWith(expected);
+    });
+
+    it('should select data stacks for the first area', () => {
+      const { spy } = renderTestCase(state => selectGraphicalItemStackedData(state, 0, 0, false, areaSettings1));
+      const expected: ExpectedStackedDataSeries = [
+        [0, 5],
+        [0, 25],
+      ];
+      expect(spy).toHaveBeenLastCalledWith(expect.toBeRechartsStackedSeries(expected));
+    });
+
+    it('should select data stacks for the second area', () => {
+      const { spy } = renderTestCase(state => selectGraphicalItemStackedData(state, 0, 0, false, areaSettings2));
+      const expected: ExpectedStackedDataSeries = [
+        [5, 15],
+        [25, 35],
+      ];
+      expect(spy).toHaveBeenLastCalledWith(expect.toBeRechartsStackedSeries(expected));
+    });
+
+    it('should select points for the first area', () => {
+      const { spy } = renderTestCase(state => selectArea(state, 0, 0, false, areaSettings1));
+      const expected = {
+        baseLine: [
+          {
+            x: 65,
+            y: 365,
+            payload: {
+              name: 'a',
+              value1: 5,
+              value2: 10,
+              value3: 23,
+            },
+          },
+          {
+            x: 495,
+            y: 365,
+            payload: {
+              name: 'b',
+              value1: 25,
+              value2: 10,
+              value3: 13,
+            },
+          },
+        ],
+        isRange: false,
+        points: [
+          {
+            payload: {
+              name: 'a',
+              value1: 5,
+              value2: 10,
+              value3: 23,
+            },
+            value: expect.toBeRechartsStackedSeriesPoint([0, 5]),
+            x: 65,
+            y: 335,
+          },
+          {
+            payload: {
+              name: 'b',
+              value1: 25,
+              value2: 10,
+              value3: 13,
+            },
+            value: expect.toBeRechartsStackedSeriesPoint([0, 25]),
+            x: 495,
+            y: 214.99999999999997,
+          },
+        ],
+      };
+      expect(spy).toHaveBeenLastCalledWith(expected);
+    });
+
+    it('should select points for the second area', () => {
+      const { spy } = renderTestCase(state => selectArea(state, 0, 0, false, areaSettings2));
+      expect(spy).toHaveBeenLastCalledWith({
+        baseLine: [
+          // y-value of the first area becomes the baseline for the second area
+          {
+            x: 65,
+            y: 335,
+            payload: {
+              name: 'a',
+              value1: 5,
+              value2: 10,
+              value3: 23,
+            },
+          },
+          {
+            x: 495,
+            y: 214.99999999999997,
+            payload: {
+              name: 'b',
+              value1: 25,
+              value2: 10,
+              value3: 13,
+            },
+          },
+        ],
+        isRange: false,
+        points: [
+          {
+            payload: {
+              name: 'a',
+              value1: 5,
+              value2: 10,
+              value3: 23,
+            },
+            // this should be 5 -> 15 because the first area has 5 and the second area has 10
+            value: expect.toBeRechartsStackedSeriesPoint([5, 15]),
+            x: 65,
+            y: 275,
+          },
+          {
+            payload: {
+              name: 'b',
+              value1: 25,
+              value2: 10,
+              value3: 13,
+            },
+            // this should be 25 -> 35 because the first area has 25 and the second area has 10
+            value: expect.toBeRechartsStackedSeriesPoint([25, 35]),
+            x: 495,
+            y: 154.99999999999997,
+          },
+        ],
+      });
+    });
+
+    it('should render three stacked areas', () => {
+      const { container } = renderTestCase();
+      expectAreaCurve(container, [{ d: 'M65,335L495,215' }, { d: 'M65,275L495,155' }, { d: 'M65,137L495,77' }]);
+    });
+  });
+
+  describe('with multiple data arrays but each has their own dataKey', () => {
+    const areaSettings1: AreaSettings = {
+      barSize: undefined,
+      id: 'area1',
+      connectNulls: false,
+      baseValue: 0,
+      dataKey: 'value1',
+      stackId: '1',
+      data: data1Value1,
+    };
+
+    const areaSettings2: AreaSettings = {
+      barSize: undefined,
+      id: 'area2',
+      connectNulls: false,
+      baseValue: 0,
+      dataKey: 'value2',
+      stackId: '1',
+      data: data2Value2,
+    };
+
+    const renderTestCase = createSelectorTestCase(({ children }) => (
+      <AreaChart width={500} height={400}>
+        <XAxis dataKey="name" allowDuplicatedCategory={false} />
+        <YAxis dataKey="sum" />
+        <Tooltip />
+        <Area
+          data={areaSettings1.data}
+          id={areaSettings1.id}
+          type="monotone"
+          dataKey={areaSettings1.dataKey}
+          stackId={areaSettings1.stackId}
+          stroke="red"
+          fill="red"
+        />
+        <Area
+          data={data2Value2}
+          id={areaSettings2.id}
+          type="monotone"
+          dataKey="value2"
+          stackId="1"
+          stroke="green"
+          fill="green"
+        />
+        <Area data={data3Value3} id="area3" type="monotone" dataKey="value3" stackId="1" stroke="blue" fill="blue" />
+        {children}
+      </AreaChart>
+    ));
+
+    it('should select displayed data', () => {
+      const { spy } = renderTestCase(state => selectDisplayedData(state, 'xAxis', 0, false));
+      const expected: ChartData = [
+        { name: 'a', value1: 5 },
+        { name: 'b', value1: 25 },
+        { name: 'a', value2: 10 },
+        { name: 'b', value2: 10 },
+        { name: 'a', value3: 23 },
+        { name: 'b', value3: 13 },
+      ];
+      expect(spy).toHaveBeenLastCalledWith(expected);
+    });
+
+    it('should select stack groups for all areas', () => {
+      const { spy } = renderTestCase(state => selectStackGroups(state, 'yAxis', 0, false));
+      const expected: Record<StackId, StackGroup> = {
+        '1': {
+          graphicalItems: [
+            expectGraphicalItemSettings({
+              id: 'area1',
+              barSize: undefined,
+              data: [
+                { name: 'a', value1: 5 },
+                { name: 'b', value1: 25 },
+              ],
+              dataKey: 'value1',
+              stackId: '1',
+            }),
+            expectGraphicalItemSettings({
+              id: 'area2',
+              barSize: undefined,
+              data: [
+                { name: 'a', value2: 10 },
+                { name: 'b', value2: 10 },
+              ],
+              dataKey: 'value2',
+              stackId: '1',
+            }),
+            expectGraphicalItemSettings({
+              id: 'area3',
+              barSize: undefined,
+              data: [
+                { name: 'a', value3: 23 },
+                { name: 'b', value3: 13 },
+              ],
+              dataKey: 'value3',
+              stackId: '1',
+            }),
+          ],
+          stackedData: expect.toBeRechartsStackedData([
+            [
+              [0, 5],
+              [0, 25],
+            ],
+            [
+              [5, 15],
+              [25, 35],
+            ],
+            [
+              [15, 38],
+              [35, 48],
+            ],
+          ]),
+        },
+      };
+      expect(spy).toHaveBeenLastCalledWith(expected);
+    });
+
+    it('should select data stacks for the first area', () => {
+      const { spy } = renderTestCase(state => selectGraphicalItemStackedData(state, 0, 0, false, areaSettings1));
+      const expected: ExpectedStackedDataSeries = [
+        [0, 5],
+        [0, 25],
+      ];
+      expect(spy).toHaveBeenLastCalledWith(expect.toBeRechartsStackedSeries(expected));
+    });
+
+    it('should select data stacks for the second area', () => {
+      const { spy } = renderTestCase(state => selectGraphicalItemStackedData(state, 0, 0, false, areaSettings2));
+      const expected: ExpectedStackedDataSeries = [
+        [5, 15],
+        [25, 35],
+      ];
+      expect(spy).toHaveBeenLastCalledWith(expect.toBeRechartsStackedSeries(expected));
+    });
+
+    it('should select points for the first area', () => {
+      const { spy } = renderTestCase(state => selectArea(state, 0, 0, false, areaSettings1));
+      const expected = {
+        baseLine: [
+          { x: 65, y: 365, payload: { name: 'a', value1: 5 } },
+          { x: 495, y: 365, payload: { name: 'b', value1: 25 } },
+        ],
+        isRange: false,
+        points: [
+          {
+            payload: { name: 'a', value1: 5 },
+            value: expect.toBeRechartsStackedSeriesPoint([0, 5]),
+            x: 65,
+            y: 335,
+          },
+          {
+            payload: { name: 'b', value1: 25 },
+            value: expect.toBeRechartsStackedSeriesPoint([0, 25]),
+            x: 495,
+            y: 214.99999999999997,
+          },
+        ],
+      };
+      expect(spy).toHaveBeenLastCalledWith(expected);
+    });
+
+    it('should select points for the second area', () => {
+      const { spy } = renderTestCase(state => selectArea(state, 0, 0, false, areaSettings2));
+      expect(spy).toHaveBeenLastCalledWith({
+        baseLine: [
+          // baseline.y from second point is the same as points.y from first point
+          { x: 65, y: 335, payload: { name: 'a', value2: 10 } },
+          { x: 495, y: 214.99999999999997, payload: { name: 'b', value2: 10 } },
+        ],
+        isRange: false,
+        points: [
+          {
+            payload: { name: 'a', value2: 10 },
+            // this should be 5 -> 15 because the first area has 5 and the second area has 10
+            value: expect.toBeRechartsStackedSeriesPoint([5, 15]),
+            x: 65,
+            y: 275,
+          },
+          {
+            payload: { name: 'b', value2: 10 },
+            // this should be 25 -> 35 because the first area has 25 and the second area has 10
+            value: expect.toBeRechartsStackedSeriesPoint([25, 35]),
+            x: 495,
+            y: 154.99999999999997,
+          },
+        ],
+      });
+    });
+
+    it('should render three stacked areas', () => {
+      const { container } = renderTestCase();
+      expectAreaCurve(container, [{ d: 'M65,335L495,215' }, { d: 'M65,275L495,155' }, { d: 'M65,137L495,77' }]);
+    });
+  });
+
+  describe('with multiple data arrays with the same dataKey', () => {
+    /*
+     * https://github.com/recharts/recharts/issues/6073
+     * https://stackblitz.com/edit/react-qarbpqfn?file=src%2FExample.tsx
+     * Multiple Area components with the same stackId and individual data arrays.
+     */
+
+    const areaSettings1: AreaSettings = {
+      barSize: undefined,
+      id: 'area1',
+      connectNulls: false,
+      baseValue: 0,
+      dataKey: 'value',
+      stackId: '1',
+      data: data1,
+    };
+
+    const areaSettings2: AreaSettings = {
+      barSize: undefined,
+      id: 'area2',
+      connectNulls: false,
+      baseValue: 0,
+      dataKey: 'value',
+      stackId: '1',
+      data: data2,
+    };
+
+    const renderTestCase = createSelectorTestCase(({ children }) => (
+      <AreaChart width={500} height={400}>
+        <XAxis dataKey="name" allowDuplicatedCategory={false} />
+        <YAxis dataKey="value" />
+        <Tooltip />
+        <Area
+          data={areaSettings1.data}
+          type="monotone"
+          dataKey={areaSettings1.dataKey}
+          stackId={areaSettings1.stackId}
+          id={areaSettings1.id}
+          stroke="red"
+          fill="red"
+        />
+        <Area
+          data={areaSettings2.data}
+          type="monotone"
+          dataKey={areaSettings2.dataKey}
+          stackId={areaSettings2.stackId}
+          id={areaSettings2.id}
+          stroke="green"
+          fill="green"
+        />
+        <Area data={data3} type="monotone" dataKey="value" stackId="1" id="area3" stroke="blue" fill="blue" />
+        {children}
+      </AreaChart>
+    ));
+
+    it('should select displayed data', () => {
+      const { spy } = renderTestCase(state => selectDisplayedData(state, 'xAxis', 0, false));
+      const expected: ChartData = [
+        { name: 'a', value: 5 },
+        { name: 'b', value: 25 },
+        { name: 'a', value: 10 },
+        { name: 'b', value: 10 },
+        { name: 'a', value: 23 },
+        { name: 'b', value: 13 },
+      ];
+      expect(spy).toHaveBeenLastCalledWith(expected);
+    });
+
+    it('should select stack groups for all areas', () => {
+      const { spy } = renderTestCase(state => selectStackGroups(state, 'yAxis', 0, false));
+      const expected: Record<StackId, StackGroup> = {
+        '1': {
+          graphicalItems: [
+            expectGraphicalItemSettings({
+              id: 'area1',
+              barSize: undefined,
+              data: [
+                { name: 'a', value: 5 },
+                { name: 'b', value: 25 },
+              ],
+              dataKey: 'value',
+              stackId: '1',
+            }),
+            expectGraphicalItemSettings({
+              id: 'area2',
+              barSize: undefined,
+              data: [
+                { name: 'a', value: 10 },
+                { name: 'b', value: 10 },
+              ],
+              dataKey: 'value',
+              stackId: '1',
+            }),
+            expectGraphicalItemSettings({
+              id: 'area3',
+              barSize: undefined,
+              data: [
+                { name: 'a', value: 23 },
+                { name: 'b', value: 13 },
+              ],
+              dataKey: 'value',
+              stackId: '1',
+            }),
+          ],
+          stackedData: expect.toBeRechartsStackedData([
+            [
+              [0, 5],
+              [0, 25],
+            ],
+            [
+              [5, 15],
+              [25, 35],
+            ],
+            [
+              [15, 38],
+              [35, 48],
+            ],
+          ]),
+        },
+      };
+      expect(spy).toHaveBeenLastCalledWith(expected);
+    });
+
+    it('should select data stacks for the first area', () => {
+      const { spy } = renderTestCase(state => selectGraphicalItemStackedData(state, 0, 0, false, areaSettings1));
+      const expected: ExpectedStackedDataSeries = [
+        [0, 5],
+        [0, 25],
+      ];
+      expect(spy).toHaveBeenLastCalledWith(expect.toBeRechartsStackedSeries(expected));
+    });
+
+    it('should select data stacks for the second area', () => {
+      const { spy } = renderTestCase(state => selectGraphicalItemStackedData(state, 0, 0, false, areaSettings2));
+      const expected: ExpectedStackedDataSeries = [
+        [5, 15],
+        [25, 35],
+      ];
+      expect(spy).toHaveBeenLastCalledWith(expect.toBeRechartsStackedSeries(expected));
+    });
+
+    it('should select points for the first area', () => {
+      const { spy } = renderTestCase(state => selectArea(state, 0, 0, false, areaSettings1));
+      const expected = {
+        baseLine: [
+          {
+            x: 65,
+            y: 365,
+            payload: {
+              name: 'a',
+              value: 5,
+            },
+          },
+          {
+            x: 495,
+            y: 365,
+            payload: {
+              name: 'b',
+              value: 25,
+            },
+          },
+        ],
+        isRange: false,
+        points: [
+          {
+            payload: { name: 'a', value: 5 },
+            value: expect.toBeRechartsStackedSeriesPoint([0, 5]),
+            x: 65,
+            y: 335,
+          },
+          {
+            payload: { name: 'b', value: 25 },
+            value: expect.toBeRechartsStackedSeriesPoint([0, 25]),
+            x: 495,
+            y: 214.99999999999997,
+          },
+        ],
+      };
+      expect(spy).toHaveBeenLastCalledWith(expected);
+    });
+
+    it('should select points for the second area', () => {
+      const { spy } = renderTestCase(state => selectArea(state, 0, 0, false, areaSettings2));
+      expect(spy).toHaveBeenLastCalledWith({
+        baseLine: [
+          {
+            x: 65,
+            y: 335,
+            payload: {
+              name: 'a',
+              value: 10,
+            },
+          },
+          {
+            x: 495,
+            y: 214.99999999999997,
+            payload: {
+              name: 'b',
+              value: 10,
+            },
+          },
+        ],
+        isRange: false,
+        points: [
+          {
+            payload: { name: 'a', value: 10 },
+            // this should be 5 -> 15 because the first area has 5 and the second area has 10
+            value: expect.toBeRechartsStackedSeriesPoint([5, 15]),
+            x: 65,
+            y: 275,
+          },
+          {
+            payload: { name: 'b', value: 10 },
+            // this should be 25 -> 35 because the first area has 25 and the second area has 10
+            value: expect.toBeRechartsStackedSeriesPoint([25, 35]),
+            x: 495,
+            y: 154.99999999999997,
+          },
+        ],
+      });
+    });
+
+    it('should render three stacked areas', () => {
+      const { container } = renderTestCase();
+      expectAreaCurve(container, [{ d: 'M65,335L495,215' }, { d: 'M65,275L495,155' }, { d: 'M65,137L495,77' }]);
+    });
+  });
+
+  describe('with multiple data arrays with the same dataKey, and without explicit XAxis dataKey', () => {
+    /*
+     * https://github.com/recharts/recharts/issues/6073
+     * https://stackblitz.com/edit/react-qarbpqfn?file=src%2FExample.tsx
+     * This is a regression test for the issue where multiple Area components with the same stackId
+     * were not stacked correctly when they had individual data arrays.
+     *
+     * This test shows the problem, but it's not actually fixed in the code.
+     */
+
+    const areaSettings1: AreaSettings = {
+      barSize: undefined,
+      id: 'area1',
+      connectNulls: false,
+      baseValue: 0,
+      dataKey: 'value',
+      stackId: '1',
+      data: data1,
+    };
+
+    const areaSettings2: AreaSettings = {
+      barSize: undefined,
+      id: 'area2',
+      connectNulls: false,
+      baseValue: 0,
+      dataKey: 'value',
+      stackId: '1',
+      data: data2,
+    };
+
+    const renderTestCase = createSelectorTestCase(({ children }) => (
+      <AreaChart width={500} height={400}>
+        <XAxis allowDuplicatedCategory={false} />
+        <YAxis dataKey="value" />
+        <Tooltip />
+        <Area
+          data={areaSettings1.data}
+          type="monotone"
+          dataKey={areaSettings1.dataKey}
+          stackId={areaSettings1.stackId}
+          id={areaSettings1.id}
+          stroke="red"
+          fill="red"
+        />
+        <Area
+          data={areaSettings2.data}
+          type="monotone"
+          dataKey={areaSettings2.dataKey}
+          stackId={areaSettings2.stackId}
+          id={areaSettings2.id}
+          stroke="green"
+          fill="green"
+        />
+        <Area data={data3} type="monotone" dataKey="value" stackId="1" id="area3" stroke="blue" fill="blue" />
+        {children}
+      </AreaChart>
+    ));
+
+    it('should select displayed data', () => {
+      const { spy } = renderTestCase(state => selectDisplayedData(state, 'xAxis', 0, false));
+      const expected: ChartData = [
+        { name: 'a', value: 5 },
+        { name: 'b', value: 25 },
+        { name: 'a', value: 10 },
+        { name: 'b', value: 10 },
+        { name: 'a', value: 23 },
+        { name: 'b', value: 13 },
+      ];
+      expect(spy).toHaveBeenLastCalledWith(expected);
+    });
+
+    it('should select stack groups for all areas', () => {
+      const { spy } = renderTestCase(state => selectStackGroups(state, 'yAxis', 0, false));
+      const expected: Record<StackId, StackGroup> = {
+        '1': {
+          graphicalItems: [
+            expectGraphicalItemSettings({
+              id: 'area1',
+              barSize: undefined,
+              data: [
+                { name: 'a', value: 5 },
+                { name: 'b', value: 25 },
+              ],
+              dataKey: 'value',
+              stackId: '1',
+            }),
+            expectGraphicalItemSettings({
+              id: 'area2',
+              barSize: undefined,
+              data: [
+                { name: 'a', value: 10 },
+                { name: 'b', value: 10 },
+              ],
+              dataKey: 'value',
+              stackId: '1',
+            }),
+            expectGraphicalItemSettings({
+              id: 'area3',
+              barSize: undefined,
+              data: [
+                { name: 'a', value: 23 },
+                { name: 'b', value: 13 },
+              ],
+              dataKey: 'value',
+              stackId: '1',
+            }),
+          ],
+          stackedData: expect.toBeRechartsStackedData([
+            [
+              [0, 5],
+              [0, 25],
+            ],
+            [
+              [5, 15],
+              [25, 35],
+            ],
+            [
+              [15, 38],
+              [35, 48],
+            ],
+          ]),
+        },
+      };
+      expect(spy).toHaveBeenLastCalledWith(expected);
+    });
+
+    it('should select data stacks for the first area', () => {
+      const { spy } = renderTestCase(state => selectGraphicalItemStackedData(state, 0, 0, false, areaSettings1));
+      const expected: ExpectedStackedDataSeries = [
+        [0, 5],
+        [0, 25],
+      ];
+      expect(spy).toHaveBeenLastCalledWith(expect.toBeRechartsStackedSeries(expected));
+    });
+
+    it('should select data stacks for the second area', () => {
+      const { spy } = renderTestCase(state => selectGraphicalItemStackedData(state, 0, 0, false, areaSettings2));
+      const expected: ExpectedStackedDataSeries = [
+        [5, 15],
+        [25, 35],
+      ];
+      expect(spy).toHaveBeenLastCalledWith(expect.toBeRechartsStackedSeries(expected));
+    });
+
+    it('should select points for the first area', () => {
+      const { spy } = renderTestCase(state => selectArea(state, 0, 0, false, areaSettings1));
+      const expected = {
+        baseLine: [
+          {
+            x: 65,
+            y: 365,
+            payload: {
+              name: 'a',
+              value: 5,
+            },
+          },
+          {
+            x: 151,
+            y: 365,
+            payload: {
+              name: 'b',
+              value: 25,
+            },
+          },
+        ],
+        isRange: false,
+        points: [
+          {
+            payload: { name: 'a', value: 5 },
+            value: expect.toBeRechartsStackedSeriesPoint([0, 5]),
+            x: 65,
+            y: 335,
+          },
+          {
+            payload: { name: 'b', value: 25 },
+            value: expect.toBeRechartsStackedSeriesPoint([0, 25]),
+            x: 151,
+            y: 214.99999999999997,
+          },
+        ],
+      };
+      expect(spy).toHaveBeenLastCalledWith(expected);
+    });
+
+    it('should select points for the second area', () => {
+      const { spy } = renderTestCase(state => selectArea(state, 0, 0, false, areaSettings2));
+      expect(spy).toHaveBeenLastCalledWith({
+        baseLine: [
+          {
+            x: 65,
+            y: 335,
+            payload: {
+              name: 'a',
+              value: 10,
+            },
+          },
+          {
+            x: 151,
+            y: 214.99999999999997,
+            payload: {
+              name: 'b',
+              value: 10,
+            },
+          },
+        ],
+        isRange: false,
+        points: [
+          {
+            payload: { name: 'a', value: 10 },
+            // this should be 5 -> 15 because the first area has 5 and the second area has 10
+            value: expect.toBeRechartsStackedSeriesPoint([5, 15]),
+            x: 65,
+            y: 275,
+          },
+          {
+            payload: { name: 'b', value: 10 },
+            // this should be 25 -> 35 because the first area has 25 and the second area has 10
+            value: expect.toBeRechartsStackedSeriesPoint([25, 35]),
+            x: 151,
+            y: 154.99999999999997,
+          },
+        ],
+      });
+    });
+
+    it('should render three stacked areas', () => {
+      const { container } = renderTestCase();
+      expectAreaCurve(container, [{ d: 'M65,335L151,215' }, { d: 'M65,275L151,155' }, { d: 'M65,137L151,77' }]);
+    });
+  });
+
+  describe.todo('when dataKey is defined on YAxis instead of individual Areas');
+  describe.todo('when XAxis is type number');
+  describe.todo('vertical charts');
+});
diff --git a/test/chart/BarChart.spec.tsx b/test/chart/BarChart.spec.tsx
index 729bd4f3ab..97c5c7c1f7 100644
--- a/test/chart/BarChart.spec.tsx
+++ b/test/chart/BarChart.spec.tsx
@@ -660,7 +660,7 @@ describe('<BarChart />', () => {
               x: 68.75,
               y: 5,
             },
-            height: 9.600000000000001,
+            height: 9.599999999999994,
             name: 'food',
             payload: {
               name: 'food',
@@ -670,13 +670,13 @@ describe('<BarChart />', () => {
             pv: 2400,
             tooltipPosition: {
               x: 68.75,
-              y: 38.599999999999994,
+              y: 40.2,
             },
             uv: 400,
-            value: [400, 2800],
+            value: 2400,
             width: 0,
             x: 68.75,
-            y: 33.8,
+            y: 35.400000000000006,
           },
           {
             background: {
@@ -695,13 +695,13 @@ describe('<BarChart />', () => {
             pv: 4567,
             tooltipPosition: {
               x: 76.25,
-              y: 34.666,
+              y: 35.866,
             },
             uv: 300,
-            value: [300, 4867],
+            value: 4567,
             width: 0,
             x: 76.25,
-            y: 25.531999999999996,
+            y: 26.732,
           },
           {
             background: {
@@ -710,7 +710,7 @@ describe('<BarChart />', () => {
               x: 83.75,
               y: 5,
             },
-            height: 5.591999999999999,
+            height: 5.592000000000006,
             name: 'storage',
             payload: {
               name: 'storage',
@@ -720,13 +720,13 @@ describe('<BarChart />', () => {
             pv: 1398,
             tooltipPosition: {
               x: 83.75,
-              y: 41.004,
+              y: 42.20399999999999,
             },
             uv: 300,
-            value: [300, 1698],
+            value: 1398,
             width: 0,
             x: 83.75,
-            y: 38.208,
+            y: 39.407999999999994,
           },
           {
             background: {
@@ -745,13 +745,13 @@ describe('<BarChart />', () => {
             pv: 9800,
             tooltipPosition: {
               x: 91.25,
-              y: 24.6,
+              y: 25.400000000000002,
             },
             uv: 200,
-            value: [200, 10000],
+            value: 9800,
             width: 0,
             x: 91.25,
-            y: 5,
+            y: 5.800000000000001,
           },
         ]);
       });
@@ -940,11 +940,10 @@ describe('<BarChart />', () => {
         </BarChart>,
       );
 
-      // stacked bars should have values which are arrays, if they are not then they are not stacked
       expect(seriesOneBarOneEntry).toBeDefined();
       expect(seriesTwoBarOneEntry).toBeDefined();
-      expect(seriesOneBarOneEntry.value).toEqual([0, 400]);
-      expect(seriesTwoBarOneEntry.value).toEqual([400, 2800]);
+      expect(seriesOneBarOneEntry.value).toEqual(400);
+      expect(seriesTwoBarOneEntry.value).toEqual(2400);
 
       expectBars(container, [
         {
@@ -2353,14 +2352,14 @@ describe('<BarChart />', () => {
         size: 150,
         tooltipPosition: {
           x: 120,
-          y: 55,
+          y: 145,
         },
         topBox: 200,
         topWhisker: 200,
-        value: [450, 650],
+        value: 200,
         width: 88,
         x: 76,
-        y: 35,
+        y: 125,
       },
       {
         average: 550,
@@ -2386,14 +2385,14 @@ describe('<BarChart />', () => {
         size: 250,
         tooltipPosition: {
           x: 230,
-          y: 15,
+          y: 155,
         },
         topBox: 100,
         topWhisker: 100,
-        value: [700, 800],
+        value: 100,
         width: 88,
         x: 186,
-        y: 5,
+        y: 145,
       },
       {
         average: 400,
@@ -2419,14 +2418,14 @@ describe('<BarChart />', () => {
         size: 350,
         tooltipPosition: {
           x: 340,
-          y: 25,
+          y: 145,
         },
         topBox: 200,
         topWhisker: 200,
-        value: [600, 800],
+        value: 200,
         width: 88,
         x: 296,
-        y: 5,
+        y: 125,
       },
     ]);
 
diff --git a/test/chart/LineChart.spec.tsx b/test/chart/LineChart.spec.tsx
index f48c49a302..2192c2b373 100644
--- a/test/chart/LineChart.spec.tsx
+++ b/test/chart/LineChart.spec.tsx
@@ -1828,7 +1828,7 @@ describe('<LineChart /> with dataKey as a function', () => {
       </LineChart>,
     );
 
-    expect(spy).toHaveBeenCalledTimes(data1.length * 6);
+    expect(spy).toHaveBeenCalledTimes(data1.length * 9);
     expect(spy).toHaveBeenNthCalledWith(1, data1[0]);
     expect(spy).toHaveBeenNthCalledWith(2, data1[1]);
     expect(spy).toHaveBeenNthCalledWith(3, data1[2]);
@@ -1841,7 +1841,7 @@ describe('<LineChart /> with dataKey as a function', () => {
       </LineChart>,
     );
 
-    expect(spy).toHaveBeenCalledTimes(data2.length * 6);
+    expect(spy).toHaveBeenCalledTimes(data2.length * 9);
     expect(spy).toHaveBeenNthCalledWith(1, data2[0]);
     expect(spy).toHaveBeenNthCalledWith(2, data2[1]);
     expect(spy).toHaveBeenNthCalledWith(3, data2[2]);
@@ -1867,7 +1867,7 @@ describe('<LineChart /> with dataKey as a function', () => {
 
     const { container } = render(<Reproduction />);
     expectLines(container, [{ d: 'M5,198.333L150,101.667L295,5' }]);
-    expect(dataKey1Spy).toHaveBeenCalledTimes(data1.length * 7);
+    expect(dataKey1Spy).toHaveBeenCalledTimes(data1.length * 10);
     expect(dataKey1Spy).toHaveBeenNthCalledWith(1, data1[0]);
     expect(dataKey1Spy).toHaveBeenLastCalledWith(data1[2]);
     expect(dataKey2Spy).toHaveBeenCalledTimes(0);
@@ -1875,9 +1875,9 @@ describe('<LineChart /> with dataKey as a function', () => {
     fireEvent.click(screen.getByText('Use data2'));
 
     expectLines(container, [{ d: 'M5,5L150,101.667L295,198.333' }]);
-    expect(dataKey1Spy).toHaveBeenCalledTimes(data1.length * 11);
+    expect(dataKey1Spy).toHaveBeenCalledTimes(data1.length * 14);
 
-    expect(dataKey2Spy).toHaveBeenCalledTimes(data2.length * 7);
+    expect(dataKey2Spy).toHaveBeenCalledTimes(data2.length * 10);
     expect(dataKey2Spy).toHaveBeenNthCalledWith(1, data2[0]);
     expect(dataKey2Spy).toHaveBeenLastCalledWith(data2[2]);
   });
diff --git a/test/helper/expectStackGroups.ts b/test/helper/expectStackGroups.ts
index d3aa5f4b64..87226419fb 100644
--- a/test/helper/expectStackGroups.ts
+++ b/test/helper/expectStackGroups.ts
@@ -1,24 +1,29 @@
-import { SeriesPoint } from 'victory-vendor/d3-shape';
-import { StackDataPoint, StackGroup } from '../../src/util/stacks/stackTypes';
+import { expect } from 'vitest';
+import { StackDataPoint, StackSeries } from '../../src/util/stacks/stackTypes';
+import { MaybeStackedGraphicalItem } from '../../src/state/selectors/barSelectors';
+
+export type ExpectedStackedDataSeries = ReadonlyArray<StackDataPoint>;
 
 /*
  * Almost the same type as StackData, but with the data
  * being just an array of arrays of objects instead of a d3-stack object.
  */
-type ExpectedStackedData = ReadonlyArray<ReadonlyArray<StackDataPoint>>;
+export type ExpectedStackedData = ReadonlyArray<ExpectedStackedDataSeries>;
 
-function seriesPointToTuple(seriesPoint: SeriesPoint<unknown>): StackDataPoint {
+function seriesPointToTuple(seriesPoint: ReadonlyArray<number>): StackDataPoint {
   return [seriesPoint[0], seriesPoint[1]];
 }
 
-function seriesToArray(series: StackGroup['stackedData']): ExpectedStackedData {
-  return series.map((s): ReadonlyArray<StackDataPoint> => {
-    const array: Array<StackDataPoint> = [];
-    s.forEach(item => {
-      array.push(seriesPointToTuple(item));
-    });
-    return array;
+const actualSeriesToExpectedSeries = (s: ReadonlyArray<StackDataPoint>): ExpectedStackedDataSeries => {
+  const array: Array<StackDataPoint> = [];
+  s.forEach(item => {
+    array.push(seriesPointToTuple(item));
   });
+  return array;
+};
+
+function seriesToArray(series: ReadonlyArray<ReadonlyArray<StackDataPoint>>): ExpectedStackedData {
+  return series.map(actualSeriesToExpectedSeries);
 }
 
 /**
@@ -43,6 +48,13 @@ export function expectStackedData(received: unknown, expected: ExpectedStackedDa
   expect(seriesToArray(received)).toEqual(expected);
 }
 
+export function expectStackedSeries(received: unknown, expected: ExpectedStackedDataSeries): void {
+  if (!Array.isArray(received)) {
+    throw new Error(`stackedSeries error: expected ${received} to be an array`);
+  }
+  expect(actualSeriesToExpectedSeries(received)).toEqual(expected);
+}
+
 function rechartsStackedDataMatcher(received: unknown, expected: ExpectedStackedData) {
   try {
     expectStackedData(received, expected);
@@ -60,8 +72,53 @@ function rechartsStackedDataMatcher(received: unknown, expected: ExpectedStacked
   }
 }
 
+function rechartsStackedSeriesMatcher(
+  received: unknown,
+  expected: ExpectedStackedDataSeries,
+): { pass: boolean; message: () => string } {
+  try {
+    expectStackedSeries(received, expected);
+    return {
+      pass: true,
+      message: () => 'Expected stack series to not match',
+    };
+  } catch (e) {
+    // Uncomment the `debugger` here to see the actual error message, or place a breakpoint in your IDE
+    // debugger;
+    return {
+      pass: false,
+      message: e.message,
+    };
+  }
+}
+
+function rechartsStackedSeriesPointMatcher(
+  received: unknown,
+  expected: StackDataPoint,
+): { pass: boolean; message: () => string } {
+  try {
+    if (!Array.isArray(received)) {
+      throw new Error(`stackedSeriesPoint error: expected ${received} to be an array`);
+    }
+    expect(seriesPointToTuple(received)).toEqual(expected);
+    return {
+      pass: true,
+      message: () => 'Expected stack series point to not match',
+    };
+  } catch (e) {
+    // Uncomment the `debugger` here to see the actual error message, or place a breakpoint in your IDE
+    // debugger;
+    return {
+      pass: false,
+      message: e.message,
+    };
+  }
+}
+
 expect.extend({
   toBeRechartsStackedData: rechartsStackedDataMatcher,
+  toBeRechartsStackedSeries: rechartsStackedSeriesMatcher,
+  toBeRechartsStackedSeriesPoint: rechartsStackedSeriesPointMatcher,
 });
 
 interface CustomMatchers {
@@ -74,7 +131,9 @@ interface CustomMatchers {
    *
    * @param expectedStackedData expected stacked data
    */
-  toBeRechartsStackedData: (expectedStackedData: ExpectedStackedData) => void;
+  toBeRechartsStackedData: (expectedStackedData: ExpectedStackedData) => ReadonlyArray<StackSeries>;
+  toBeRechartsStackedSeries: (expectedStackedSeries: ExpectedStackedDataSeries) => StackSeries;
+  toBeRechartsStackedSeriesPoint: (expectedStackedSeriesPoint: StackDataPoint) => StackDataPoint;
 }
 
 declare module 'vitest' {
@@ -82,3 +141,12 @@ declare module 'vitest' {
   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   interface AsymmetricMatchersContaining extends CustomMatchers {}
 }
+
+/**
+ * Vitest helpers are typed to return `any` which disables type checking in the whole test if used.
+ * @param expected the expected settings for the graphical item
+ * @return the expected settings wrapped in an object containing matcher functions
+ */
+export function expectGraphicalItemSettings(expected: MaybeStackedGraphicalItem): MaybeStackedGraphicalItem {
+  return expect.objectContaining(expected);
+}
diff --git a/test/state/selectors/combiners/combineDisplayedStackedData.spec.ts b/test/state/selectors/combiners/combineDisplayedStackedData.spec.ts
new file mode 100644
index 0000000000..f910fc0ada
--- /dev/null
+++ b/test/state/selectors/combiners/combineDisplayedStackedData.spec.ts
@@ -0,0 +1,117 @@
+import { describe, it, expect } from 'vitest';
+import { combineDisplayedStackedData } from '../../../../src/state/selectors/combiners/combineDisplayedStackedData';
+import { GraphicalItemSettings } from '../../../../src/state/graphicalItemsSlice';
+import { ChartDataState } from '../../../../src/state/chartDataSlice';
+import { BaseCartesianAxis } from '../../../../src/state/cartesianAxisSlice';
+
+const emptyAxisSettings: BaseCartesianAxis = {
+  type: 'number',
+  id: 'emptyAxis',
+  domain: [],
+  dataKey: null,
+  scale: 'sequential',
+  unit: '',
+  name: '',
+  allowDuplicatedCategory: false,
+  allowDataOverflow: false,
+  reversed: false,
+  includeHidden: false,
+};
+
+function createMockBaseCartesianAxis(partialBaseAxis: Partial<BaseCartesianAxis>): BaseCartesianAxis {
+  return {
+    ...emptyAxisSettings,
+    ...partialBaseAxis,
+  };
+}
+
+describe('combineDisplayedStackedData', () => {
+  const emptyChartDataState: ChartDataState = {
+    chartData: [],
+    dataStartIndex: 0,
+    dataEndIndex: 0,
+    computedData: undefined,
+  };
+
+  it('should return empty array when no cartesian items are provided', () => {
+    const result = combineDisplayedStackedData([], emptyChartDataState, createMockBaseCartesianAxis({ dataKey: null }));
+    expect(result).toEqual([]);
+  });
+
+  it('should stack data points by stack identifier', () => {
+    const cartesianItems: ReadonlyArray<GraphicalItemSettings> = [
+      {
+        data: [
+          { value: 10, name: 'a' },
+          { value: 20, name: 'b' },
+        ],
+        id: 'id1',
+        dataKey: 'value',
+        hide: false,
+        stackId: 'a',
+        barSize: '',
+      },
+      {
+        data: [
+          { value: 30, name: 'a' },
+          { value: 40, name: 'b' },
+        ],
+        id: 'id2',
+        dataKey: 'value',
+        hide: false,
+        stackId: 'a',
+        barSize: '',
+      },
+    ];
+
+    const result = combineDisplayedStackedData(
+      cartesianItems,
+      emptyChartDataState,
+      createMockBaseCartesianAxis({ dataKey: 'name' }),
+    );
+
+    expect(result).toEqual([
+      { id1: 10, id2: 30 },
+      { id1: 20, id2: 40 },
+    ]);
+  });
+
+  it('should ignore stackIds because another selected down the road handles that', () => {
+    const cartesianItems: ReadonlyArray<GraphicalItemSettings> = [
+      {
+        data: [
+          { value: 10, name: 'a' },
+          { value: 20, name: 'b' },
+        ],
+        id: 'id1',
+        dataKey: 'value',
+        hide: false,
+        stackId: 'a',
+        barSize: '',
+      },
+      {
+        data: [
+          { value: 30, name: 'a' },
+          { value: 40, name: 'b' },
+        ],
+        id: 'id2',
+        dataKey: 'value',
+        hide: false,
+        stackId: 'b',
+        barSize: '',
+      },
+    ];
+
+    const result = combineDisplayedStackedData(
+      cartesianItems,
+      emptyChartDataState,
+      createMockBaseCartesianAxis({ dataKey: 'name' }),
+    );
+
+    // merged anyway, stackId will be figured out later
+    expect(result).toEqual([
+      { id1: 10, id2: 30 },
+      { id1: 20, id2: 40 },
+    ]);
+  });
+});