diff --git a/packages/pie/src/hooks.ts b/packages/pie/src/hooks.ts
index 5fdb669cdb..9ccfbb2d50 100644
--- a/packages/pie/src/hooks.ts
+++ b/packages/pie/src/hooks.ts
@@ -20,6 +20,9 @@ import {
     CommonPieProps,
 } from './types'
 
+const idIsActive = (id: DatumId, activeId: null | DatumId | DatumId[]) =>
+    Array.isArray(activeId) ? activeId.indexOf(id) > -1 : activeId === id
+
 /**
  * Format data so that we get a consistent data structure.
  * It will also add the `formattedValue` and `color` property.
@@ -138,14 +141,12 @@ export const usePieArcs = <RawDatum>({
                         index: arc.index,
                         startAngle: arc.startAngle,
                         endAngle: arc.endAngle,
-                        innerRadius:
-                            activeId === arc.data.id
-                                ? innerRadius - activeInnerRadiusOffset
-                                : innerRadius,
-                        outerRadius:
-                            activeId === arc.data.id
-                                ? outerRadius + activeOuterRadiusOffset
-                                : outerRadius,
+                        innerRadius: idIsActive(arc.data.id, activeId)
+                            ? innerRadius - activeInnerRadiusOffset
+                            : innerRadius,
+                        outerRadius: idIsActive(arc.data.id, activeId)
+                            ? outerRadius + activeOuterRadiusOffset
+                            : outerRadius,
                         thickness: outerRadius - innerRadius,
                         padAngle: arc.padAngle,
                         angle,
diff --git a/storybook/stories/pie/Pie.stories.tsx b/storybook/stories/pie/Pie.stories.tsx
index ee38ddc9e5..43b458e112 100644
--- a/storybook/stories/pie/Pie.stories.tsx
+++ b/storybook/stories/pie/Pie.stories.tsx
@@ -282,6 +282,76 @@ export const ControlledActiveId: Story = {
     render: () => <ControlledPies />,
 }
 
+const ControlledPiesMultipleActiveIds = () => {
+    const [activeId, setActiveId] = useState<string>(commonProperties.data[1].id)
+    const [additionalActiveIds, setAdditionalActiveIds] = useState<string>([])
+    function addActiveId(id) {
+        setAdditionalActiveIds(additionalActiveIds.concat(id))
+    }
+    function removeActiveId(id) {
+        setAdditionalActiveIds(additionalActiveIds.filter(x => x !== id))
+    }
+    function handleCheckboxChange(id, checked) {
+        if (checked) addActiveId(id)
+        if (!checked) removeActiveId(id)
+    }
+    function handlePieClick(id) {
+        if (additionalActiveIds.indexOf(id) > -1) {
+            removeActiveId(id)
+        } else {
+            addActiveId(id)
+        }
+    }
+    const allActiveIds = [activeId, ...additionalActiveIds]
+    return (
+        <div>
+            <div
+                style={{
+                    marginBottom: '10px',
+                }}
+            >
+                <h3>Active IDs:</h3>
+                {commonProperties.data.map(x => (
+                    <div key={x.id}>
+                        <label>
+                            <input
+                                type="checkbox"
+                                checked={additionalActiveIds.indexOf(x.id) > -1}
+                                onChange={evt => handleCheckboxChange(x.id, evt.target.checked)}
+                            />
+                            {x.id}
+                        </label>
+                    </div>
+                ))}
+            </div>
+            <div
+                style={{
+                    width: '800px',
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(2, 1fr)',
+                }}
+            >
+                <Pie
+                    {...controlledPieProps}
+                    activeId={allActiveIds}
+                    onActiveIdChange={setActiveId}
+                    onClick={slice => handlePieClick(slice.id)}
+                />
+                <Pie
+                    {...controlledPieProps}
+                    activeId={allActiveIds}
+                    onActiveIdChange={setActiveId}
+                    onClick={slice => handlePieClick(slice.id)}
+                />
+            </div>
+        </div>
+    )
+}
+
+export const ControlledMultipleActiveIds: Story = {
+    render: () => <ControlledPiesMultipleActiveIds />,
+}
+
 const PieWithCustomLegend = () => {
     const [customLegends, setCustomLegends] = useState<LegendDatum<SampleDatum>[]>([])