diff --git a/packages/visx-demo/src/sandboxes/visx-xychart/Example.tsx b/packages/visx-demo/src/sandboxes/visx-xychart/Example.tsx
index 2ff0c93dd..5d1e0b9ad 100644
--- a/packages/visx-demo/src/sandboxes/visx-xychart/Example.tsx
+++ b/packages/visx-demo/src/sandboxes/visx-xychart/Example.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import cityTemperature, { CityTemperature } from '@visx/mock-data/lib/mocks/cityTemperature';
+import { CityTemperature } from '@visx/mock-data/lib/mocks/cityTemperature';
 import {
   AnimatedAxis,
   AnimatedGrid,
   DataProvider,
   BarSeries,
+  BarStack,
   LineSeries,
   Tooltip,
   XYChart,
@@ -17,20 +18,19 @@ type Props = {
   height: number;
 };
 
-const xScaleConfig = { type: 'band', paddingInner: 0.3 } as const;
-const yScaleConfig = { type: 'linear' } as const;
-const numTicks = 4;
-const data = cityTemperature.slice(150, 225);
-const getDate = (d: CityTemperature) => d.date;
-const getSfTemperature = (d: CityTemperature) => Number(d['San Francisco']);
-const getNyTemperature = (d: CityTemperature) => Number(d['New York']);
+type City = 'San Francisco' | 'New York' | 'Austin';
 
 export default function Example({ height }: Props) {
   return (
     <ExampleControls>
       {({
+        accessors,
         animationTrajectory,
+        config,
+        data,
+        numTicks,
         renderBarSeries,
+        renderBarStack,
         renderHorizontally,
         renderLineSeries,
         sharedTooltip,
@@ -45,11 +45,7 @@ export default function Example({ height }: Props) {
         xAxisOrientation,
         yAxisOrientation,
       }) => (
-        <DataProvider
-          theme={theme}
-          xScale={renderHorizontally ? yScaleConfig : xScaleConfig}
-          yScale={renderHorizontally ? xScaleConfig : yScaleConfig}
-        >
+        <DataProvider theme={theme} xScale={config.x} yScale={config.y}>
           <XYChart height={Math.min(400, height)}>
             <CustomChartBackground />
             <AnimatedGrid
@@ -59,23 +55,56 @@ export default function Example({ height }: Props) {
               animationTrajectory={animationTrajectory}
               numTicks={numTicks}
             />
+            {renderBarStack && (
+              <g fillOpacity={renderLineSeries ? 0.5 : 1}>
+                <BarStack horizontal={renderHorizontally}>
+                  <BarSeries
+                    dataKey="New York"
+                    data={data}
+                    xAccessor={accessors.x['New York']}
+                    yAccessor={accessors.y['New York']}
+                  />
+                  <BarSeries
+                    dataKey="San Francisco"
+                    data={data}
+                    xAccessor={accessors.x['San Francisco']}
+                    yAccessor={accessors.y['San Francisco']}
+                  />
+                  <BarSeries
+                    dataKey="Austin"
+                    data={data}
+                    xAccessor={accessors.x.Austin}
+                    yAccessor={accessors.y.Austin}
+                  />
+                </BarStack>
+              </g>
+            )}
             {renderBarSeries && (
               <BarSeries
                 dataKey="New York"
                 data={data}
-                xAccessor={renderHorizontally ? getNyTemperature : getDate}
-                yAccessor={renderHorizontally ? getDate : getNyTemperature}
+                xAccessor={accessors.x['New York']}
+                yAccessor={accessors.y['New York']}
                 horizontal={renderHorizontally}
               />
             )}
             {renderLineSeries && (
-              <LineSeries
-                dataKey="San Francisco"
-                data={data}
-                xAccessor={renderHorizontally ? getSfTemperature : getDate}
-                yAccessor={renderHorizontally ? getDate : getSfTemperature}
-                horizontal={!renderHorizontally}
-              />
+              <>
+                <LineSeries
+                  dataKey="San Francisco"
+                  data={renderBarStack ? data : data}
+                  xAccessor={accessors.x['San Francisco']}
+                  yAccessor={accessors.y['San Francisco']}
+                  horizontal={!renderHorizontally}
+                />
+                <LineSeries
+                  dataKey="Austin"
+                  data={renderBarStack ? data : data}
+                  xAccessor={accessors.x.Austin}
+                  yAccessor={accessors.y.Austin}
+                  horizontal={!renderHorizontally}
+                />
+              </>
             )}
             <AnimatedAxis
               key={`time-axis-${animationTrajectory}-${renderHorizontally}`}
@@ -101,27 +130,32 @@ export default function Example({ height }: Props) {
                 renderTooltip={({ tooltipData, colorScale }) => (
                   <>
                     {/** date */}
-                    {tooltipData?.nearestDatum?.datum
-                      ? getDate(tooltipData?.nearestDatum?.datum)
-                      : 'No date'}
+                    {(tooltipData?.nearestDatum?.datum &&
+                      accessors.date(tooltipData?.nearestDatum?.datum)) ||
+                      'No date'}
                     <br />
                     <br />
                     {/** temperatures */}
                     {((sharedTooltip
                       ? Object.keys(tooltipData?.datumByKey ?? {})
                       : [tooltipData?.nearestDatum?.key]
-                    ).filter(key => key) as string[]).map(key => (
-                      <div key={key}>
+                    ).filter(city => city) as City[]).map(city => (
+                      <div key={city}>
                         <em
                           style={{
-                            color: colorScale?.(key),
+                            color: colorScale?.(city),
                             textDecoration:
-                              tooltipData?.nearestDatum?.key === key ? 'underline' : undefined,
+                              tooltipData?.nearestDatum?.key === city ? 'underline' : undefined,
                           }}
                         >
-                          {key}
+                          {city}
                         </em>{' '}
-                        {tooltipData?.datumByKey[key].datum[key as keyof CityTemperature]}° F
+                        {tooltipData?.nearestDatum?.datum
+                          ? accessors[renderHorizontally ? 'x' : 'y'][city](
+                              tooltipData?.nearestDatum?.datum,
+                            )
+                          : '–'}
+                        ° F
                       </div>
                     ))}
                   </>
diff --git a/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx b/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx
index c11d8cd6e..584584c13 100644
--- a/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx
+++ b/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx
@@ -1,13 +1,47 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { lightTheme, darkTheme, XYChartTheme } from '@visx/xychart';
 import { AnimationTrajectory } from '@visx/react-spring/lib/types';
+import cityTemperature, { CityTemperature } from '@visx/mock-data/lib/mocks/cityTemperature';
 import customTheme from './customTheme';
 
+const dateScaleConfig = { type: 'band', paddingInner: 0.3 } as const;
+const temperatureScaleConfig = { type: 'linear' } as const;
+const numTicks = 4;
+const data = cityTemperature.slice(200, 275);
+const dataSmall = data.slice(25);
+const getDate = (d: CityTemperature) => d.date;
+const getSfTemperature = (d: CityTemperature) => Number(d['San Francisco']);
+const getNegativeSFTemperature = (d: CityTemperature) => -getSfTemperature(d);
+const getNyTemperature = (d: CityTemperature) => Number(d['New York']);
+const getAustinTemperature = (d: CityTemperature) => Number(d.Austin);
+
+type Accessor = (d: CityTemperature) => number | string;
+
+interface Accessors {
+  'San Francisco': Accessor;
+  'New York': Accessor;
+  Austin: Accessor;
+}
+
+type SimpleScaleConfig = { type: 'band' | 'linear'; paddingInner?: number };
+
 type ProvidedProps = {
+  accessors: {
+    x: Accessors;
+    y: Accessors;
+    date: Accessor;
+  };
+  config: {
+    x: SimpleScaleConfig;
+    y: SimpleScaleConfig;
+  };
   animationTrajectory: AnimationTrajectory;
+  data: CityTemperature[];
+  numTicks: number;
   renderHorizontally: boolean;
   renderBarSeries: boolean;
+  renderBarStack: boolean;
   renderLineSeries: boolean;
   sharedTooltip: boolean;
   showGridColumns: boolean;
@@ -29,7 +63,7 @@ type ControlsProps = {
 export default function ExampleControls({ children }: ControlsProps) {
   const [theme, setTheme] = useState<XYChartTheme>(darkTheme);
   const [animationTrajectory, setAnimationTrajectory] = useState<AnimationTrajectory>('center');
-  const [gridProps, setGridProps] = useState<[boolean, boolean]>([true, true]);
+  const [gridProps, setGridProps] = useState<[boolean, boolean]>([false, false]);
   const [showGridRows, showGridColumns] = gridProps;
   const [xAxisOrientation, setXAxisOrientation] = useState<'top' | 'bottom'>('bottom');
   const [yAxisOrientation, setYAxisOrientation] = useState<'left' | 'right'>('right');
@@ -40,24 +74,63 @@ export default function ExampleControls({ children }: ControlsProps) {
   const [snapTooltipToDatumX, setSnapTooltipToDatumX] = useState(true);
   const [snapTooltipToDatumY, setSnapTooltipToDatumY] = useState(true);
   const [sharedTooltip, setSharedTooltip] = useState(true);
-  const [renderBarSeries, setRenderBarSeries] = useState(true);
-  const [renderLineSeries, setRenderLineSeries] = useState(true);
+  const [renderBarOrBarStack, setRenderBarOrBarStack] = useState<'bar' | 'barstack'>('barstack');
+  const [renderLineSeries, setRenderLineSeries] = useState(false);
+  const [negativeValues, setNegativeValues] = useState(false);
+
+  const accessors = useMemo(
+    () => ({
+      x: {
+        'San Francisco': renderHorizontally
+          ? negativeValues
+            ? getNegativeSFTemperature
+            : getSfTemperature
+          : getDate,
+        'New York': renderHorizontally ? getNyTemperature : getDate,
+        Austin: renderHorizontally ? getAustinTemperature : getDate,
+      },
+      y: {
+        'San Francisco': renderHorizontally
+          ? getDate
+          : negativeValues
+          ? getNegativeSFTemperature
+          : getSfTemperature,
+        'New York': renderHorizontally ? getDate : getNyTemperature,
+        Austin: renderHorizontally ? getDate : getAustinTemperature,
+      },
+      date: getDate,
+    }),
+    [renderHorizontally, negativeValues],
+  );
+
+  const config = useMemo(
+    () => ({
+      x: renderHorizontally ? temperatureScaleConfig : dateScaleConfig,
+      y: renderHorizontally ? dateScaleConfig : temperatureScaleConfig,
+    }),
+    [renderHorizontally],
+  );
 
   return (
     <>
       {children({
+        accessors,
         animationTrajectory,
-        renderBarSeries,
+        config,
+        data: renderBarOrBarStack === 'bar' ? data : dataSmall,
+        numTicks,
+        renderBarSeries: renderBarOrBarStack === 'bar',
+        renderBarStack: renderBarOrBarStack === 'barstack',
         renderHorizontally,
-        renderLineSeries,
+        renderLineSeries: renderBarOrBarStack === 'bar' && renderLineSeries,
         sharedTooltip,
         showGridColumns,
         showGridRows,
         showHorizontalCrosshair,
         showTooltip,
         showVerticalCrosshair,
-        snapTooltipToDatumX,
-        snapTooltipToDatumY,
+        snapTooltipToDatumX: renderBarOrBarStack === 'bar' && snapTooltipToDatumX,
+        snapTooltipToDatumY: renderBarOrBarStack === 'bar' && snapTooltipToDatumY,
         theme,
         xAxisOrientation,
         yAxisOrientation,
@@ -237,7 +310,7 @@ export default function ExampleControls({ children }: ControlsProps) {
           <label>
             <input
               type="checkbox"
-              disabled={!showTooltip}
+              disabled={!showTooltip || renderBarOrBarStack === 'barstack'}
               onChange={() => setSnapTooltipToDatumX(!snapTooltipToDatumX)}
               checked={showTooltip && snapTooltipToDatumX}
             />{' '}
@@ -246,7 +319,7 @@ export default function ExampleControls({ children }: ControlsProps) {
           <label>
             <input
               type="checkbox"
-              disabled={!showTooltip}
+              disabled={!showTooltip || renderBarOrBarStack === 'barstack'}
               onChange={() => setSnapTooltipToDatumY(!snapTooltipToDatumY)}
               checked={showTooltip && snapTooltipToDatumY}
             />{' '}
@@ -293,12 +366,32 @@ export default function ExampleControls({ children }: ControlsProps) {
           </label>
           <label>
             <input
-              type="checkbox"
-              onChange={() => setRenderBarSeries(!renderBarSeries)}
-              checked={renderBarSeries}
+              type="radio"
+              onChange={() => setRenderBarOrBarStack('bar')}
+              checked={renderBarOrBarStack === 'bar'}
             />{' '}
             bar
           </label>
+          <label>
+            <input
+              type="radio"
+              onChange={() => setRenderBarOrBarStack('barstack')}
+              checked={renderBarOrBarStack === 'barstack'}
+            />{' '}
+            bar stack
+          </label>
+        </div>
+        {/** data */}
+        <div>
+          <strong>data</strong>
+          <label>
+            <input
+              type="checkbox"
+              onChange={() => setNegativeValues(!negativeValues)}
+              checked={negativeValues}
+            />{' '}
+            negative values (SF)
+          </label>
         </div>
       </div>
       <style jsx>{`
diff --git a/packages/visx-demo/src/sandboxes/visx-xychart/customTheme.ts b/packages/visx-demo/src/sandboxes/visx-xychart/customTheme.ts
index 201cd9307..9cc416ca1 100644
--- a/packages/visx-demo/src/sandboxes/visx-xychart/customTheme.ts
+++ b/packages/visx-demo/src/sandboxes/visx-xychart/customTheme.ts
@@ -2,7 +2,7 @@ import { buildChartTheme } from '@visx/xychart';
 
 export default buildChartTheme({
   backgroundColor: '#f09ae9',
-  colors: ['rgba(255,231,143,0.8)', '#6a097d', '#ffc1fa'],
+  colors: ['rgba(255,231,143,0.8)', '#6a097d', '#d6e0f0'],
   gridColor: '#336d88',
   gridColorDark: '#1d1b38',
   labelStyles: { fill: '#1d1b38' },
diff --git a/packages/visx-xychart/package.json b/packages/visx-xychart/package.json
index de618637f..d6312e501 100644
--- a/packages/visx-xychart/package.json
+++ b/packages/visx-xychart/package.json
@@ -55,7 +55,8 @@
     "@visx/tooltip": "1.0.0",
     "@visx/voronoi": "1.0.0",
     "classnames": "^2.2.5",
-    "d3-array": "2.6.0",
+    "d3-array": "^2.6.0",
+    "d3-shape":"^2.0.0",
     "mitt": "^2.1.0",
     "prop-types": "^15.6.2"
   },
diff --git a/packages/visx-xychart/src/components/series/BarSeries.tsx b/packages/visx-xychart/src/components/series/BarSeries.tsx
index 00d3a8aa9..6f59ec5d0 100644
--- a/packages/visx-xychart/src/components/series/BarSeries.tsx
+++ b/packages/visx-xychart/src/components/series/BarSeries.tsx
@@ -11,7 +11,7 @@ import findNearestDatumY from '../../utils/findNearestDatumY';
 import useEventEmitter, { HandlerParams } from '../../hooks/useEventEmitter';
 import TooltipContext from '../../context/TooltipContext';
 
-type BarSeriesProps<
+export type BarSeriesProps<
   XScale extends AxisScale,
   YScale extends AxisScale,
   Datum extends object
@@ -88,12 +88,11 @@ function BarSeries<XScale extends AxisScale, YScale extends AxisScale, Datum ext
 
   const { showTooltip, hideTooltip } = useContext(TooltipContext) ?? {};
   const handleMouseMove = useCallback(
-    (params: HandlerParams | undefined) => {
+    (params?: HandlerParams) => {
       const { svgPoint } = params || {};
       if (svgPoint && width && height && showTooltip) {
         const datum = (horizontal ? findNearestDatumY : findNearestDatumX)({
           point: svgPoint,
-          key: dataKey,
           data,
           xScale,
           yScale,
diff --git a/packages/visx-xychart/src/components/series/BarStack.tsx b/packages/visx-xychart/src/components/series/BarStack.tsx
new file mode 100644
index 000000000..5928670a6
--- /dev/null
+++ b/packages/visx-xychart/src/components/series/BarStack.tsx
@@ -0,0 +1,223 @@
+import React, { useContext, useCallback, useMemo, useEffect } from 'react';
+import { SeriesPoint, stack as d3stack } from 'd3-shape';
+import { PositionScale, StackPathConfig } from '@visx/shape/lib/types';
+import { getFirstItem, getSecondItem } from '@visx/shape/lib/util/accessors';
+import stackOffset from '@visx/shape/lib/util/stackOffset';
+import stackOrder from '@visx/shape/lib/util/stackOrder';
+
+import { extent } from 'd3-array';
+import getBandwidth from '@visx/shape/lib/util/getBandwidth';
+import { BarSeriesProps } from './BarSeries';
+import DataContext from '../../context/DataContext';
+import { BarStackDatum, CombinedStackData, DataContextType } from '../../types';
+import TooltipContext from '../../context/TooltipContext';
+import useEventEmitter, { HandlerParams } from '../../hooks/useEventEmitter';
+import isValidNumber from '../../typeguards/isValidNumber';
+import isChildWithProps from '../../typeguards/isChildWithProps';
+import combineBarBarStackData, { getStackValue } from '../../utils/combineBarStackData';
+import getBarStackRegistryData from '../../utils/getBarStackRegistryData';
+import findNearestStackDatum from '../../utils/findNearestStackDatum';
+
+export type BarStackProps<Datum extends object> = {
+  /** Whether to render the Stack horizontally instead of vertically. */
+  horizontal?: boolean;
+  /** `BarSeries` elements */
+  children: JSX.Element | JSX.Element[];
+} & Pick<StackPathConfig<Datum, string>, 'offset' | 'order'>;
+
+function BarStack<
+  XScale extends PositionScale,
+  YScale extends PositionScale,
+  Datum extends object
+>({ children, horizontal, order, offset }: BarStackProps<Datum>) {
+  type StackBar = SeriesPoint<CombinedStackData<XScale, YScale>>;
+  const {
+    xScale,
+    yScale,
+    colorScale,
+    dataRegistry,
+    registerData,
+    unregisterData,
+    width,
+    height,
+  } = (useContext(DataContext) as unknown) as DataContextType<
+    XScale,
+    YScale,
+    BarStackDatum<XScale, YScale>
+  >;
+
+  const barSeriesChildren = useMemo(
+    () =>
+      React.Children.toArray(children).filter(child =>
+        isChildWithProps<BarSeriesProps<XScale, YScale, Datum>>(child),
+      ),
+    [children],
+  ) as React.ReactElement<BarSeriesProps<XScale, YScale, Datum>>[];
+
+  // extract data keys from child series
+  const dataKeys: string[] = useMemo(
+    () => barSeriesChildren.filter(child => child.props.dataKey).map(child => child.props.dataKey),
+    [barSeriesChildren],
+  );
+
+  // group all child data by stack value (`x` for vertical, `y` for horizontal)
+  // this format is needed by d3Stack
+  const combinedData = useMemo(
+    () => combineBarBarStackData<XScale, YScale, Datum>(barSeriesChildren, horizontal),
+    [horizontal, barSeriesChildren],
+  );
+
+  // update the domain to account for the (directional) stacked value
+  const comprehensiveDomain = useMemo(
+    () =>
+      extent(
+        (extent(combinedData, d => d.positiveSum) as [number, number]).concat(
+          extent(combinedData, d => d.negativeSum) as [number, number],
+        ),
+      ) as [number, number],
+    [combinedData],
+  );
+
+  // stack data
+  const stackedData = useMemo(() => {
+    const hasSomeNegativeValues =
+      comprehensiveDomain.length > 0 && comprehensiveDomain.some(num => num < 0);
+
+    const stack = d3stack<CombinedStackData<XScale, YScale>, string>();
+    stack.keys(dataKeys);
+    if (order) stack.order(stackOrder(order));
+    if (offset || hasSomeNegativeValues) stack.offset(stackOffset(offset || 'diverging'));
+
+    return stack(combinedData);
+  }, [combinedData, dataKeys, comprehensiveDomain, order, offset]);
+
+  // register all child data using the stack-transformed values
+  useEffect(() => {
+    const dataToRegister = getBarStackRegistryData(stackedData, comprehensiveDomain, horizontal);
+    registerData(dataToRegister);
+
+    // unregister data on unmount
+    return () => unregisterData(Object.keys(dataToRegister));
+  }, [
+    comprehensiveDomain,
+    horizontal,
+    stackedData,
+    registerData,
+    unregisterData,
+    barSeriesChildren,
+  ]);
+
+  // register mouse listeners
+  const { showTooltip, hideTooltip } = useContext(TooltipContext) ?? {};
+
+  const handleMouseMove = useCallback(
+    (params: HandlerParams | undefined) => {
+      const { svgPoint } = params || {};
+
+      // invoke showTooltip for each key so all data is available in context,
+      // and let Tooltip find the nearest point among them
+      dataKeys.forEach(key => {
+        const entry = dataRegistry.get(key);
+        const childData = barSeriesChildren.find(child => child.props.dataKey === key)?.props.data;
+        if (childData && svgPoint && width && height && showTooltip) {
+          const datum = findNearestStackDatum(
+            {
+              point: svgPoint,
+              data: entry.data,
+              xScale,
+              yScale,
+              xAccessor: entry.xAccessor,
+              yAccessor: entry.yAccessor,
+              width,
+              height,
+            },
+            childData,
+            horizontal,
+          );
+
+          if (datum) {
+            showTooltip({
+              key,
+              svgPoint,
+              ...datum,
+            });
+          }
+        }
+      });
+    },
+    [
+      barSeriesChildren,
+      dataRegistry,
+      dataKeys,
+      horizontal,
+      xScale,
+      yScale,
+      width,
+      height,
+      showTooltip,
+    ],
+  );
+  useEventEmitter('mousemove', handleMouseMove);
+  useEventEmitter('mouseout', hideTooltip);
+
+  // if scales and data are not available in the registry, bail
+  if (dataKeys.some(key => dataRegistry.get(key) == null) || !xScale || !yScale || !colorScale) {
+    return null;
+  }
+
+  const barThickness = getBandwidth(horizontal ? yScale : xScale);
+  const halfBarThickness = barThickness / 2;
+
+  let getWidth: (bar: StackBar) => number | undefined;
+  let getHeight: (bar: StackBar) => number | undefined;
+  let getX: (bar: StackBar) => number | undefined;
+  let getY: (bar: StackBar) => number | undefined;
+
+  if (horizontal) {
+    getWidth = bar => (xScale(getSecondItem(bar)) || 0) - (xScale(getFirstItem(bar)) || 0);
+    getHeight = () => barThickness;
+    getX = bar => xScale(getFirstItem(bar));
+    getY = bar =>
+      'bandwidth' in yScale
+        ? yScale(getStackValue(bar.data))
+        : Math.max((yScale(getStackValue(bar.data)) || 0) - halfBarThickness);
+  } else {
+    getWidth = () => barThickness;
+    getHeight = bar => (yScale(getFirstItem(bar)) || 0) - (yScale(getSecondItem(bar)) || 0);
+    getX = bar =>
+      'bandwidth' in xScale
+        ? xScale(getStackValue(bar.data))
+        : Math.max((xScale(getStackValue(bar.data)) || 0) - halfBarThickness);
+    getY = bar => yScale(getSecondItem(bar));
+  }
+
+  return (
+    <g className="visx-bar-stack">
+      {stackedData.map((barStack, stackIndex) => {
+        const entry = dataRegistry.get(barStack.key);
+        if (!entry) return null;
+
+        return barStack.map((bar, index) => {
+          const barX = getX(bar);
+          if (!isValidNumber(barX)) return null;
+          const barY = getY(bar);
+          if (!isValidNumber(barY)) return null;
+
+          return (
+            <rect
+              key={`${stackIndex}-${barStack.key}-${index}`}
+              x={barX}
+              y={barY}
+              width={getWidth(bar)}
+              height={getHeight(bar)}
+              fill={colorScale(barStack.key)}
+              stroke="transparent"
+            />
+          );
+        });
+      })}
+    </g>
+  );
+}
+
+export default BarStack;
diff --git a/packages/visx-xychart/src/components/series/LineSeries.tsx b/packages/visx-xychart/src/components/series/LineSeries.tsx
index aca60c037..b66d8e02a 100644
--- a/packages/visx-xychart/src/components/series/LineSeries.tsx
+++ b/packages/visx-xychart/src/components/series/LineSeries.tsx
@@ -36,12 +36,11 @@ function LineSeries<XScale extends AxisScale, YScale extends AxisScale, Datum ex
   const color = colorScale?.(dataKey) ?? theme?.colors?.[0] ?? '#222';
 
   const handleMouseMove = useCallback(
-    (params: HandlerParams | undefined) => {
+    (params?: HandlerParams) => {
       const { svgPoint } = params || {};
       if (svgPoint && width && height && showTooltip) {
         const datum = (horizontal ? findNearestDatumX : findNearestDatumY)({
           point: svgPoint,
-          key: dataKey,
           data,
           xScale,
           yScale,
diff --git a/packages/visx-xychart/src/enhancers/withRegisteredData.tsx b/packages/visx-xychart/src/enhancers/withRegisteredData.tsx
index efe138cc1..73c79da7c 100644
--- a/packages/visx-xychart/src/enhancers/withRegisteredData.tsx
+++ b/packages/visx-xychart/src/enhancers/withRegisteredData.tsx
@@ -31,11 +31,9 @@ export default function withRegisteredData<
       >,
   ) {
     const { dataKey, data, xAccessor, yAccessor } = props;
-    const { xScale, yScale, dataRegistry } = useContext(DataContext) as DataContextType<
-      XAxis,
-      YAxis,
-      Datum
-    >;
+    const { xScale, yScale, dataRegistry } = (useContext(
+      DataContext,
+    ) as unknown) as DataContextType<XAxis, YAxis, Datum>;
 
     useEffect(() => {
       if (dataRegistry) dataRegistry.registerData({ key: dataKey, data, xAccessor, yAccessor });
diff --git a/packages/visx-xychart/src/hooks/useDataRegistry.ts b/packages/visx-xychart/src/hooks/useDataRegistry.ts
index 5d6c000da..ef42472e0 100644
--- a/packages/visx-xychart/src/hooks/useDataRegistry.ts
+++ b/packages/visx-xychart/src/hooks/useDataRegistry.ts
@@ -1,23 +1,32 @@
 import { AxisScale } from '@visx/axis';
 import { useMemo, useState } from 'react';
 import DataRegistry from '../classes/DataRegistry';
+import { DataContextType } from '../types';
 
 /** Hook that returns an API equivalent to DataRegistry but which updates as needed for use as a hook. */
 export default function useDataRegistry<
   XScale extends AxisScale,
   YScale extends AxisScale,
   Datum extends object
->() {
+>(): DataContextType<XScale, YScale, Datum>['dataRegistry'] {
   const [, forceUpdate] = useState(Math.random());
   const privateRegistry = useMemo(() => new DataRegistry<XScale, YScale, Datum>(), []);
 
   return useMemo(
     () => ({
-      registerData: (...params: Parameters<typeof DataRegistry.prototype.registerData>) => {
+      registerData: (
+        ...params: Parameters<
+          DataContextType<XScale, YScale, Datum>['dataRegistry']['registerData']
+        >
+      ) => {
         privateRegistry.registerData(...params);
         forceUpdate(Math.random());
       },
-      unregisterData: (...params: Parameters<typeof DataRegistry.prototype.unregisterData>) => {
+      unregisterData: (
+        ...params: Parameters<
+          DataContextType<XScale, YScale, Datum>['dataRegistry']['unregisterData']
+        >
+      ) => {
         privateRegistry.unregisterData(...params);
         forceUpdate(Math.random());
       },
diff --git a/packages/visx-xychart/src/hooks/useDimensions.ts b/packages/visx-xychart/src/hooks/useDimensions.ts
index 47c9e16e8..ba79fad14 100644
--- a/packages/visx-xychart/src/hooks/useDimensions.ts
+++ b/packages/visx-xychart/src/hooks/useDimensions.ts
@@ -6,11 +6,16 @@ const INITIAL_DIMENSIONS = {
   margin: { top: 0, right: 0, bottom: 0, left: 0 },
 };
 
-type Dimensions = typeof INITIAL_DIMENSIONS;
+export type Dimensions = typeof INITIAL_DIMENSIONS;
 
 /** A hook for accessing and setting memoized width, height, and margin chart dimensions. */
-export default function useDimensions(): [Dimensions, (dims: Dimensions) => void] {
-  const [dimensions, privateSetDimensions] = useState<Dimensions>(INITIAL_DIMENSIONS);
+export default function useDimensions(
+  initialDimensions?: Partial<Dimensions>,
+): [Dimensions, (dims: Dimensions) => void] {
+  const [dimensions, privateSetDimensions] = useState<Dimensions>({
+    ...INITIAL_DIMENSIONS,
+    ...initialDimensions,
+  });
 
   // expose a setter with better memoization logic
   const publicSetDimensions = useCallback(
diff --git a/packages/visx-xychart/src/index.ts b/packages/visx-xychart/src/index.ts
index fa702b894..22a4bfe70 100644
--- a/packages/visx-xychart/src/index.ts
+++ b/packages/visx-xychart/src/index.ts
@@ -8,6 +8,7 @@ export { default as XYChart } from './components/XYChart';
 
 // series components
 export { default as BarSeries } from './components/series/BarSeries';
+export { default as BarStack } from './components/series/BarStack';
 export { default as LineSeries } from './components/series/LineSeries';
 
 // context
diff --git a/packages/visx-xychart/src/providers/DataProvider.tsx b/packages/visx-xychart/src/providers/DataProvider.tsx
index 28139495c..afc559fd2 100644
--- a/packages/visx-xychart/src/providers/DataProvider.tsx
+++ b/packages/visx-xychart/src/providers/DataProvider.tsx
@@ -7,7 +7,7 @@ import { XYChartTheme } from '../types';
 import ThemeContext from '../context/ThemeContext';
 import DataContext from '../context/DataContext';
 import useDataRegistry from '../hooks/useDataRegistry';
-import useDimensions from '../hooks/useDimensions';
+import useDimensions, { Dimensions } from '../hooks/useDimensions';
 import useScales from '../hooks/useScales';
 
 /** Props that can be passed to initialize/update the provider config. */
@@ -15,6 +15,7 @@ export type DataProviderProps<
   XScaleConfig extends ScaleConfig<AxisScaleOutput, any, any>,
   YScaleConfig extends ScaleConfig<AxisScaleOutput, any, any>
 > = {
+  initialDimensions?: Partial<Dimensions>;
   theme?: XYChartTheme;
   xScale: XScaleConfig;
   yScale: YScaleConfig;
@@ -26,6 +27,7 @@ export default function DataProvider<
   YScaleConfig extends ScaleConfig<AxisScaleOutput>,
   Datum extends object
 >({
+  initialDimensions,
   theme: propsTheme,
   xScale: xScaleConfig,
   yScale: yScaleConfig,
@@ -36,7 +38,7 @@ export default function DataProvider<
   // a ThemeProvider is not present.
   const contextTheme = useContext(ThemeContext);
   const theme = propsTheme || contextTheme;
-  const [{ width, height, margin }, setDimensions] = useDimensions();
+  const [{ width, height, margin }, setDimensions] = useDimensions(initialDimensions);
   const innerWidth = width - (margin?.left ?? 0) - (margin?.right ?? 0);
   const innerHeight = height - (margin?.top ?? 0) - (margin?.bottom ?? 0);
 
diff --git a/packages/visx-xychart/src/typeguards/isChildWithProps.ts b/packages/visx-xychart/src/typeguards/isChildWithProps.ts
new file mode 100644
index 000000000..886fd8104
--- /dev/null
+++ b/packages/visx-xychart/src/typeguards/isChildWithProps.ts
@@ -0,0 +1,8 @@
+import React from 'react';
+
+/** Returns whether the React.ReactNode has props (and therefore is an `Element` versus primative type) */
+export default function isChildWithProps<P extends object>(
+  child: React.ReactNode,
+): child is React.ComponentType<P> {
+  return !!child && typeof child === 'object' && 'props' in child && child.props != null;
+}
diff --git a/packages/visx-xychart/src/types/data.ts b/packages/visx-xychart/src/types/data.ts
index 0cdad1243..76e3d9b4f 100644
--- a/packages/visx-xychart/src/types/data.ts
+++ b/packages/visx-xychart/src/types/data.ts
@@ -1,5 +1,5 @@
-import { AxisScale, AxisScaleOutput } from '@visx/axis';
-import { ScaleTypeToD3Scale, ScaleInput, D3Scale } from '@visx/scale';
+import { AxisScale } from '@visx/axis';
+import { ScaleTypeToD3Scale, ScaleInput } from '@visx/scale';
 import DataRegistry from '../classes/DataRegistry';
 import { XYChartTheme } from './theme';
 
@@ -24,9 +24,9 @@ export interface DataRegistryEntry<XScale extends AxisScale, YScale extends Axis
   /** whether the entry supports mouse events. */
   mouseEvents?: boolean;
   /** Optionally update the xScale. */
-  xScale?: <Scale extends D3Scale<AxisScaleOutput>>(xScale: Scale) => Scale;
+  xScale?: <Scale extends AxisScale>(xScale: Scale) => Scale;
   /** Optionally update the yScale. */
-  yScale?: <Scale extends D3Scale<AxisScaleOutput>>(yScale: Scale) => Scale;
+  yScale?: <Scale extends AxisScale>(yScale: Scale) => Scale;
   /** Legend shape for the data key. */
   legendShape?: LegendShape;
 }
diff --git a/packages/visx-xychart/src/types/event.ts b/packages/visx-xychart/src/types/event.ts
index 3973f2a41..73a907b47 100644
--- a/packages/visx-xychart/src/types/event.ts
+++ b/packages/visx-xychart/src/types/event.ts
@@ -14,7 +14,6 @@ export type NearestDatumArgs<
   xAccessor: (d: Datum) => ScaleInput<XScale>;
   yAccessor: (d: Datum) => ScaleInput<YScale>;
   data: Datum[];
-  key: string;
   width: number;
   height: number;
   xScale: XScale;
diff --git a/packages/visx-xychart/src/types/series.ts b/packages/visx-xychart/src/types/series.ts
index bd1fc175f..7ace990dc 100644
--- a/packages/visx-xychart/src/types/series.ts
+++ b/packages/visx-xychart/src/types/series.ts
@@ -1,5 +1,6 @@
 import { AxisScale } from '@visx/axis';
 import { ScaleInput } from '@visx/scale';
+import { Series, SeriesPoint } from 'd3-shape';
 
 export type SeriesProps<
   XScale extends AxisScale,
@@ -15,3 +16,17 @@ export type SeriesProps<
   /** Given a Datum, returns the y-scale value. */
   yAccessor: (d: Datum) => ScaleInput<YScale>;
 };
+
+// BarStack transforms its child series Datum into CombinedData<XScale, YScale>
+export type BarStackDatum<XScale extends AxisScale, YScale extends AxisScale> = SeriesPoint<
+  CombinedStackData<XScale, YScale>
+>;
+
+export type BarStackData<XScale extends AxisScale, YScale extends AxisScale> = Series<
+  CombinedStackData<XScale, YScale>,
+  string
+>[];
+
+export type CombinedStackData<XScale extends AxisScale, YScale extends AxisScale> = {
+  [dataKey: string]: ScaleInput<XScale> | ScaleInput<YScale>;
+} & { stack: ScaleInput<XScale> | ScaleInput<YScale>; positiveSum: number; negativeSum: number };
diff --git a/packages/visx-xychart/src/utils/combineBarStackData.ts b/packages/visx-xychart/src/utils/combineBarStackData.ts
new file mode 100644
index 000000000..00051f891
--- /dev/null
+++ b/packages/visx-xychart/src/utils/combineBarStackData.ts
@@ -0,0 +1,48 @@
+import React from 'react';
+import { AxisScale } from '@visx/axis';
+import { BarSeriesProps } from '../components/series/BarSeries';
+import { CombinedStackData } from '../types';
+
+/** Returns the value which forms a stack group. */
+export const getStackValue = <XScale extends AxisScale, YScale extends AxisScale>(
+  d: Pick<CombinedStackData<XScale, YScale>, 'stack'>,
+) => d.stack;
+
+/**
+ * Merges `BarSeries` `data` by their `stack` value which forms the stack grouping
+ * (`x` if vertical, `y` if horizontal) and returns `CombinedStackData[]`.
+ */
+export default function combineBarStackData<
+  XScale extends AxisScale,
+  YScale extends AxisScale,
+  Datum extends object
+>(
+  barSeriesChildren: React.ReactElement<BarSeriesProps<XScale, YScale, Datum>>[],
+  horizontal?: boolean,
+): CombinedStackData<XScale, YScale>[] {
+  const dataByStackValue: {
+    [stackValue: string]: CombinedStackData<XScale, YScale>;
+  } = {};
+
+  barSeriesChildren.forEach(child => {
+    const { dataKey, data, xAccessor, yAccessor } = child.props;
+
+    // this should exist but double check
+    if (!xAccessor || !yAccessor) return;
+
+    const [stackFn, valueFn] = horizontal ? [yAccessor, xAccessor] : [xAccessor, yAccessor];
+
+    data.forEach(d => {
+      const stack = stackFn(d);
+      const numericValue = valueFn(d);
+      const stackKey = String(stack);
+      if (!dataByStackValue[stackKey]) {
+        dataByStackValue[stackKey] = { stack, positiveSum: 0, negativeSum: 0 };
+      }
+      dataByStackValue[stackKey][dataKey] = numericValue;
+      dataByStackValue[stackKey][numericValue >= 0 ? 'positiveSum' : 'negativeSum'] += numericValue;
+    });
+  });
+
+  return Object.values(dataByStackValue);
+}
diff --git a/packages/visx-xychart/src/utils/findNearestStackDatum.ts b/packages/visx-xychart/src/utils/findNearestStackDatum.ts
new file mode 100644
index 000000000..42624b842
--- /dev/null
+++ b/packages/visx-xychart/src/utils/findNearestStackDatum.ts
@@ -0,0 +1,44 @@
+import { AxisScale } from '@visx/axis';
+import { getFirstItem, getSecondItem } from '@visx/shape/lib/util/accessors';
+import findNearestDatumY from './findNearestDatumY';
+import findNearestDatumX from './findNearestDatumX';
+import { BarStackDatum, NearestDatumArgs } from '../types';
+
+/**
+ * This is a wrapper around findNearestDatumX/Y for BarStack, accounting for a
+ * Bar's d0 and d1, not just d1 (which findNearestDatum uses). Additionally,
+ * returns the BarSeries original `Datum`, not the `BarStackDatum` so
+ * Tooltip typing is correct.
+ */
+export default function findNearestStackDatum<
+  XScale extends AxisScale,
+  YScale extends AxisScale,
+  Datum extends object
+>(
+  nearestDatumArgs: NearestDatumArgs<XScale, YScale, BarStackDatum<XScale, YScale>>,
+  barSeriesData: Datum[],
+  horizontal?: boolean,
+) {
+  const { xScale, yScale, point } = nearestDatumArgs;
+  const datum = (horizontal ? findNearestDatumY : findNearestDatumX)(nearestDatumArgs);
+  const barSeriesDatum = datum?.index == null ? null : barSeriesData[datum.index];
+
+  return datum && barSeriesDatum && point
+    ? {
+        index: datum.index,
+        datum: barSeriesDatum,
+        distanceX: horizontal // if mouse is ON the bar, set 0 distance
+          ? point.x >= (xScale(getFirstItem(datum.datum)) ?? Infinity) &&
+            point.x <= (xScale(getSecondItem(datum.datum)) ?? -Infinity)
+            ? 0
+            : datum.distanceX
+          : datum.distanceX,
+        distanceY: horizontal
+          ? datum.distanceY // if mouse is ON the bar, set 0 distance
+          : point.y <= (yScale(getFirstItem(datum.datum)) ?? -Infinity) &&
+            point.y >= (yScale(getSecondItem(datum.datum)) ?? Infinity)
+          ? 0
+          : datum.distanceY,
+      }
+    : null;
+}
diff --git a/packages/visx-xychart/src/utils/getBarStackRegistryData.ts b/packages/visx-xychart/src/utils/getBarStackRegistryData.ts
new file mode 100644
index 000000000..b935ad5f7
--- /dev/null
+++ b/packages/visx-xychart/src/utils/getBarStackRegistryData.ts
@@ -0,0 +1,47 @@
+import { AxisScale } from '@visx/axis';
+import { getSecondItem } from '@visx/shape/lib/util/accessors';
+import { extent } from 'd3-array';
+import { BarStackData, BarStackDatum, DataRegistryEntry } from '../types';
+
+const getStack = <XScale extends AxisScale, YScale extends AxisScale>(
+  bar: BarStackDatum<XScale, YScale>,
+) => bar?.data?.stack;
+
+const getNumericValue = <XScale extends AxisScale, YScale extends AxisScale>(
+  bar: BarStackDatum<XScale, YScale>,
+) => getSecondItem(bar); // corresponds to y1, the upper value (topline).
+
+/** Constructs the `DataRegistryEntry`s for a BarStack, using the stacked data. */
+export default function getBarStackRegistryData<XScale extends AxisScale, YScale extends AxisScale>(
+  stackedData: BarStackData<XScale, YScale>,
+  comprehensiveDomain: [number, number],
+  horizontal?: boolean,
+) {
+  const [xAccessor, yAccessor] = horizontal
+    ? [getNumericValue, getStack]
+    : [getStack, getNumericValue];
+  return stackedData
+    .map((data, index) => {
+      const entry: DataRegistryEntry<XScale, YScale, BarStackDatum<XScale, YScale>> = {
+        key: data.key,
+        data,
+        xAccessor,
+        yAccessor,
+      };
+
+      // update the numeric domain to account for full data stack
+      // only need to do this for one key
+      if (comprehensiveDomain.length > 0 && index === 0) {
+        if (horizontal) {
+          entry.xScale = scale =>
+            scale.domain(extent(scale.domain().concat(comprehensiveDomain))) as typeof scale;
+        } else {
+          entry.yScale = scale =>
+            scale.domain(extent(scale.domain().concat(comprehensiveDomain))) as typeof scale;
+        }
+      }
+
+      return entry;
+    })
+    .filter(entry => entry) as DataRegistryEntry<XScale, YScale, BarStackDatum<XScale, YScale>>[];
+}
diff --git a/packages/visx-xychart/test/components/BarStack.test.tsx b/packages/visx-xychart/test/components/BarStack.test.tsx
new file mode 100644
index 000000000..1a71a3c75
--- /dev/null
+++ b/packages/visx-xychart/test/components/BarStack.test.tsx
@@ -0,0 +1,83 @@
+import React, { useContext } from 'react';
+import { mount } from 'enzyme';
+import { BarStack, BarSeries, DataProvider, DataContext } from '../../src';
+
+const providerProps = {
+  initialDimensions: { width: 100, height: 100 },
+  xScale: { type: 'linear' },
+  yScale: { type: 'linear' },
+} as const;
+
+const accessors = {
+  xAccessor: (d: { x: number }) => d.x,
+  yAccessor: (d: { y: number }) => d.y,
+};
+
+const series1 = {
+  key: 'bar1',
+  data: [
+    { x: 10, y: 5 },
+    { x: 7, y: 5 },
+  ],
+  ...accessors,
+};
+
+const series2 = {
+  key: 'bar2',
+  data: [
+    { x: 10, y: 5 },
+    { x: 7, y: 20 },
+  ],
+  ...accessors,
+};
+
+describe('<BarStack />', () => {
+  it('should be defined', () => {
+    expect(BarSeries).toBeDefined();
+  });
+
+  it('should render rects', () => {
+    const wrapper = mount(
+      <DataProvider {...providerProps}>
+        <svg>
+          <BarStack horizontal>
+            <BarSeries dataKey={series1.key} {...series1} />
+            <BarSeries dataKey={series2.key} {...series2} />
+          </BarStack>
+        </svg>
+      </DataProvider>,
+    );
+    expect(wrapper.find('rect')).toHaveLength(4);
+  });
+
+  it('should update scale domain to include stack sums including negative values', () => {
+    expect.hasAssertions();
+
+    function Assertion() {
+      const { yScale, dataRegistry } = useContext(DataContext);
+      if (yScale && dataRegistry?.keys().length === 2) {
+        expect(yScale.domain()).toEqual([-20, 10]);
+      }
+      return null;
+    }
+
+    mount(
+      <DataProvider {...providerProps}>
+        <svg>
+          <BarStack>
+            <BarSeries dataKey={series1.key} {...series1} />
+            <BarSeries
+              dataKey={series2.key}
+              {...series2}
+              data={[
+                { x: 10, y: 5 },
+                { x: 7, y: -20 },
+              ]}
+            />
+          </BarStack>
+        </svg>
+        <Assertion />
+      </DataProvider>,
+    );
+  });
+});
diff --git a/packages/visx-xychart/test/mocks/getDataContext.ts b/packages/visx-xychart/test/mocks/getDataContext.ts
index ab3b6c4bc..c916c1f8a 100644
--- a/packages/visx-xychart/test/mocks/getDataContext.ts
+++ b/packages/visx-xychart/test/mocks/getDataContext.ts
@@ -8,16 +8,18 @@ const height = 10;
 const margin = { top: 0, right: 0, bottom: 0, left: 0 };
 const noOp = () => {};
 
-const getDataContext = (
-  entries?: Parameters<typeof DataRegistry.prototype.registerData>[0],
-): DataContextType<any, any, any> => {
+function getDataContext(entries?: Parameters<typeof DataRegistry.prototype.registerData>[0]) {
   const dataRegistry = new DataRegistry();
   if (entries) dataRegistry.registerData(entries);
 
-  const mockContext = {
+  const mockContext: DataContextType<any, any, any> = {
     dataRegistry,
-    registerData: dataRegistry.registerData,
-    unregisterData: dataRegistry.unregisterData,
+    registerData: data => {
+      dataRegistry.registerData(data);
+    },
+    unregisterData: keys => {
+      dataRegistry.unregisterData(keys);
+    },
     xScale: scaleLinear({ domain: [0, 10], range: [0, width] }),
     yScale: scaleLinear({ domain: [0, 10], range: [0, height] }),
     colorScale: scaleOrdinal({ domain: ['sf', 'ny', 'la'], range: ['purple', 'violet', 'grape'] }),
@@ -31,6 +33,6 @@ const getDataContext = (
   };
 
   return mockContext;
-};
+}
 
 export default getDataContext;
diff --git a/packages/visx-xychart/test/utils/combineBarStackData.test.tsx b/packages/visx-xychart/test/utils/combineBarStackData.test.tsx
new file mode 100644
index 000000000..926d4a8d9
--- /dev/null
+++ b/packages/visx-xychart/test/utils/combineBarStackData.test.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { BarSeries } from '../../src';
+import combineBarStackData from '../../src/utils/combineBarStackData';
+
+const accessors = {
+  xAccessor: (d: { x: number }) => d.x,
+  yAccessor: (d: { y: number }) => d.y,
+};
+
+const series1 = {
+  dataKey: 'bar1',
+  data: [
+    { x: 10, y: 5 },
+    { x: 7, y: -5 },
+  ],
+  ...accessors,
+};
+
+const series2 = {
+  dataKey: 'bar2',
+  data: [
+    { x: 10, y: 5 },
+    { x: 7, y: 20 },
+  ],
+  ...accessors,
+};
+
+const seriesChildren = [
+  <BarSeries key={series1.dataKey} {...series1} />,
+  <BarSeries key={series2.dataKey} {...series2} />,
+];
+
+describe('combineBarStackData', () => {
+  it('should be defined', () => {
+    expect(combineBarStackData).toBeDefined();
+  });
+
+  it('should combine data by x stack value when horizontal=false', () => {
+    expect(combineBarStackData(seriesChildren)).toEqual([
+      { stack: 7, bar1: -5, bar2: 20, positiveSum: 20, negativeSum: -5 },
+      { stack: 10, bar1: 5, bar2: 5, positiveSum: 10, negativeSum: 0 },
+    ]);
+  });
+  it('should combine data by y stack value when horizontal=true', () => {
+    expect(combineBarStackData(seriesChildren, true)).toEqual([
+      { stack: 5, bar1: 10, bar2: 10, positiveSum: 20, negativeSum: 0 },
+      { stack: 20, bar1: undefined, bar2: 7, positiveSum: 7, negativeSum: 0 },
+      { stack: -5, bar1: 7, bar2: undefined, positiveSum: 7, negativeSum: 0 },
+    ]);
+  });
+});
diff --git a/packages/visx-xychart/test/utils/findNearestDatum.test.ts b/packages/visx-xychart/test/utils/findNearestDatum.test.ts
index c7ca389fb..c70ed30c8 100644
--- a/packages/visx-xychart/test/utils/findNearestDatum.test.ts
+++ b/packages/visx-xychart/test/utils/findNearestDatum.test.ts
@@ -4,12 +4,12 @@ import findNearestDatumX from '../../src/utils/findNearestDatumX';
 import findNearestDatumY from '../../src/utils/findNearestDatumY';
 import findNearestDatumXY from '../../src/utils/findNearestDatumXY';
 import findNearestDatumSingleDimension from '../../src/utils/findNearestDatumSingleDimension';
-import { NearestDatumArgs } from '../../lib';
+import findNearestStackDatum from '../../src/utils/findNearestStackDatum';
+import { BarStackDatum, NearestDatumArgs } from '../../src';
 
 type Datum = { xVal: number; yVal: string };
 
 const params: NearestDatumArgs<AxisScale, AxisScale, Datum> = {
-  key: 'visx',
   width: 10,
   height: 10,
   point: { x: 3, y: 8 },
@@ -110,3 +110,28 @@ describe('findNearestDatumSingleDimension', () => {
     ).toEqual({ xVal: 8, yVal: '8' });
   });
 });
+
+describe('findNearestStackDatum', () => {
+  it('should be defined', () => {
+    expect(findNearestStackDatum).toBeDefined();
+  });
+
+  it('should find the nearest datum', () => {
+    const d1 = { yVal: '🍌' };
+    const d2 = { yVal: '🚀' };
+    expect(
+      findNearestStackDatum(
+        ({
+          ...params,
+          // type is not technically correct, but coerce for test
+        } as unknown) as NearestDatumArgs<
+          AxisScale,
+          AxisScale,
+          BarStackDatum<AxisScale, AxisScale>
+        >,
+        [d1, d2],
+        true,
+      )!.datum,
+    ).toEqual(d2); // nearest datum index=1
+  });
+});