diff --git a/packages/pie/src/Pie.tsx b/packages/pie/src/Pie.tsx
index b37a0b842..d543754ed 100644
--- a/packages/pie/src/Pie.tsx
+++ b/packages/pie/src/Pie.tsx
@@ -76,6 +76,7 @@ const InnerPie = <RawDatum extends MayHaveLabel>({
     tooltip = defaultProps.tooltip,
     activeId: activeIdFromProps,
     onActiveIdChange,
+    defaultActiveId,
 
     transitionMode = defaultProps.transitionMode,
 
@@ -121,6 +122,7 @@ const InnerPie = <RawDatum extends MayHaveLabel>({
         activeOuterRadiusOffset,
         activeId: activeIdFromProps,
         onActiveIdChange,
+        defaultActiveId,
     })
 
     const boundDefs = bindDefs(defs, dataWithArc, fill)
diff --git a/packages/pie/src/PieCanvas.tsx b/packages/pie/src/PieCanvas.tsx
index a270588e1..60f3dba83 100644
--- a/packages/pie/src/PieCanvas.tsx
+++ b/packages/pie/src/PieCanvas.tsx
@@ -35,7 +35,7 @@ const InnerPieCanvas = <RawDatum extends MayHaveLabel>({
     width,
     height,
     margin: partialMargin,
-    pixelRatio = 1,
+    pixelRatio = defaultProps.pixelRatio,
 
     colors = defaultProps.colors,
 
@@ -67,6 +67,9 @@ const InnerPieCanvas = <RawDatum extends MayHaveLabel>({
     onClick,
     onMouseMove,
     tooltip = defaultProps.tooltip,
+    activeId: activeIdFromProps,
+    onActiveIdChange,
+    defaultActiveId,
 
     legends = defaultProps.legends,
 }: PieCanvasProps<RawDatum>) => {
@@ -101,6 +104,9 @@ const InnerPieCanvas = <RawDatum extends MayHaveLabel>({
             cornerRadius,
             activeInnerRadiusOffset,
             activeOuterRadiusOffset,
+            activeId: activeIdFromProps,
+            onActiveIdChange,
+            defaultActiveId,
         })
 
     const getBorderColor = useInheritedColor<ComputedDatum<RawDatum>>(borderColor, theme)
diff --git a/storybook/stories/pie/PieCanvas.stories.tsx b/storybook/stories/pie/PieCanvas.stories.tsx
new file mode 100644
index 000000000..b070c1cbe
--- /dev/null
+++ b/storybook/stories/pie/PieCanvas.stories.tsx
@@ -0,0 +1,163 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { generateProgrammingLanguageStats } from '@nivo/generators'
+import { PieCanvas } from '@nivo/pie'
+import { nivoTheme } from '../nivo-theme'
+
+const meta: Meta<typeof PieCanvas> = {
+    title: 'PieCanvas',
+    component: PieCanvas,
+    tags: ['autodocs'],
+    argTypes: {
+        legends: {
+            control: 'boolean',
+        },
+    },
+    args: {
+        legends: false,
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof PieCanvas>
+
+const commonProperties = {
+    width: 900,
+    height: 500,
+    margin: { top: 80, right: 120, bottom: 80, left: 120 },
+    data: generateProgrammingLanguageStats(true, 9).map(({ label, ...d }) => ({
+        id: label,
+        ...d,
+    })),
+    activeOuterRadiusOffset: 8,
+    theme: nivoTheme,
+}
+
+const legends = [
+    {
+        anchor: 'bottom' as const,
+        direction: 'row' as const,
+        toggleSerie: true,
+        translateY: 56,
+        itemWidth: 100,
+        itemHeight: 18,
+        itemTextColor: '#999',
+        symbolSize: 18,
+        symbolShape: 'circle' as const,
+        effects: [
+            {
+                on: 'hover' as const,
+                style: {
+                    itemTextColor: '#000',
+                },
+            },
+        ],
+    },
+]
+
+export const Basic: Story = {
+    render: args => <PieCanvas {...commonProperties} legends={args.legends ? legends : []} />,
+}
+
+export const Donut: Story = {
+    render: () => <PieCanvas {...commonProperties} innerRadius={0.6} />,
+}
+
+/**
+ * It is possible to use colors coming from the provided dataset instead of using
+ * a color scheme, to do so, you should pass:
+ *
+ * ```
+ * colors={{ datum: 'data.color' }}
+ * ```
+ *
+ * given that each data point you pass has a `color` property.
+ *
+ * It's also possible to pass a function if you want to handle more advanced computation:
+ *
+ * ```
+ * colors={(datum) => datum.color}
+ * ```
+ */
+export const UsingColorsFromData: Story = {
+    render: () => <PieCanvas {...commonProperties} colors={{ datum: 'data.color' }} />,
+}
+
+export const FormattedValues: Story = {
+    render: () => (
+        <PieCanvas
+            {...commonProperties}
+            arcLabelsRadiusOffset={0.7}
+            valueFormat={value =>
+                `${Number(value).toLocaleString('ru-RU', {
+                    minimumFractionDigits: 2,
+                })} ₽`
+            }
+        />
+    ),
+}
+
+export const CustomTooltip: Story = {
+    render: () => (
+        <PieCanvas
+            {...commonProperties}
+            tooltip={({ datum: { id, value, color } }) => (
+                <div
+                    style={{
+                        padding: 12,
+                        color,
+                        background: '#222222',
+                    }}
+                >
+                    <span>Look, I'm custom :)</span>
+                    <br />
+                    <strong>
+                        {id}: {value}
+                    </strong>
+                </div>
+            )}
+            theme={{
+                tooltip: {
+                    container: {
+                        background: '#333',
+                    },
+                },
+            }}
+        />
+    ),
+}
+
+const controlledPieProps = {
+    ...commonProperties,
+    width: 400,
+    height: 400,
+    margin: { top: 60, right: 80, bottom: 60, left: 80 },
+    innerRadius: 0.4,
+    padAngle: 0.3,
+    cornerRadius: 3,
+    activeOuterRadiusOffset: 12,
+    activeInnerRadiusOffset: 12,
+    arcLinkLabelsDiagonalLength: 10,
+    arcLinkLabelsStraightLength: 10,
+}
+
+const ControlledPies = () => {
+    const [activeId, setActiveId] = useState<string>(commonProperties.data[1].id)
+
+    return (
+        <div
+            style={{
+                width: '800px',
+                display: 'grid',
+                gridTemplateColumns: 'repeat(2, 1fr)',
+            }}
+        >
+            <PieCanvas {...controlledPieProps} activeId={activeId} onActiveIdChange={setActiveId} />
+            <PieCanvas {...controlledPieProps} activeId={activeId} onActiveIdChange={setActiveId} />
+        </div>
+    )
+}
+
+export const ControlledActiveId: Story = {
+    render: () => <ControlledPies />,
+}
diff --git a/website/src/data/components/pie/meta.yml b/website/src/data/components/pie/meta.yml
index b7d68a9d6..6a687f413 100644
--- a/website/src/data/components/pie/meta.yml
+++ b/website/src/data/components/pie/meta.yml
@@ -41,7 +41,11 @@ PieCanvas:
   tags:
     - radial
     - canvas
-  stories: []
+  stories:
+    - label: Using colors from data
+      link: piecanvas--using-colors-from-data
+    - label: Sync activeId between two pies
+      link: piecanvas--controlled-active-id
   description: |
     A variation around the [Pie](self:/pie) component. Well suited for
     large data sets as it does not impact DOM tree depth, however you'll
diff --git a/website/src/data/components/pie/props.ts b/website/src/data/components/pie/props.ts
index 06e8a7939..3f4a726cf 100644
--- a/website/src/data/components/pie/props.ts
+++ b/website/src/data/components/pie/props.ts
@@ -510,7 +510,7 @@ const props: ChartProperty[] = [
     },
     {
         key: 'activeId',
-        flavors: ['svg'],
+        flavors: ['svg', 'canvas'],
         help: `Programmatically control the \`activeId\`.`,
         description: `
             This property should be used with \`onActiveIdChange\`,
@@ -531,7 +531,7 @@ const props: ChartProperty[] = [
     },
     {
         key: 'onActiveIdChange',
-        flavors: ['svg'],
+        flavors: ['svg', 'canvas'],
         help: `Programmatically control the \`activeId\`.`,
         description: `
             This property should be used with \`activeId\`,
@@ -552,7 +552,7 @@ const props: ChartProperty[] = [
     },
     {
         key: 'defaultActiveId',
-        flavors: ['svg'],
+        flavors: ['svg', 'canvas'],
         help: `Default \`activeId\`.`,
         description: `
             You can use this property in case you want to define a default \`activeId\`,