diff --git a/.changeset/witty-moons-develop.md b/.changeset/witty-moons-develop.md
new file mode 100644
index 0000000000..12bc576048
--- /dev/null
+++ b/.changeset/witty-moons-develop.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": minor
+---
+
+Fix interactive graph editor in storybook to display and persist options
diff --git a/packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx
index 830f844d45..27bcf4d35a 100644
--- a/packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx
+++ b/packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx
@@ -598,4 +598,21 @@ describe("InteractiveGraphEditor", () => {
         // Assert
         expect(ref.current?.getSaveWarnings()).toEqual([]);
     });
+
+    test("buildGraphKey returns the correct key", async () => {
+        // Arrange
+        const graph: PerseusGraphType = {
+            type: "polygon",
+            numSides: 4,
+            snapTo: "grid",
+            showAngles: true,
+            showSides: true,
+        };
+
+        // Act
+        const key = InteractiveGraphEditor.buildGraphKey(graph);
+
+        // Assert
+        expect(key).toEqual("polygon:4:grid:true:true");
+    });
 });
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx
index cb04933609..6a8e9efd21 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx
@@ -30,6 +30,7 @@ import type {
     PerseusInteractiveGraphWidgetOptions,
     APIOptionsWithDefaults,
     LockedFigure,
+    PerseusGraphType,
 } from "@khanacademy/perseus";
 import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
@@ -198,6 +199,20 @@ class InteractiveGraphEditor extends React.Component<Props> {
         DeprecationMixin.UNSAFE_componentWillMount.call(this);
     }
 
+    static buildGraphKey(correct: PerseusGraphType) {
+        const testGraphKey: any[] = [];
+        for (const key in correct) {
+            if (correct[key]) {
+                typeof correct[key] === "number" ||
+                typeof correct[key] === "string" ||
+                typeof correct[key] === "boolean"
+                    ? testGraphKey.push(correct[key])
+                    : testGraphKey.push(0);
+            }
+        }
+        return testGraphKey.join(":");
+    }
+
     render() {
         let graph;
         let equationString;
@@ -247,10 +262,10 @@ class InteractiveGraphEditor extends React.Component<Props> {
                     this.props.onChange({correct: correct});
                 },
             } as const;
-
             // This is used to force a remount of the graph component
             // when there's a significant change
-            const graphKey = `${correct.type}:${correct.numSegments || 0}`;
+            const graphKey = InteractiveGraphEditor.buildGraphKey(correct);
+
             graph = (
                 // There are a bunch of props that renderer.jsx passes to widgets via
                 // getWidgetProps() and widget-container.jsx that the editors don't