diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte
index 5ff471b72..d4f6058c4 100644
--- a/ts/graphs/GraphsPage.svelte
+++ b/ts/graphs/GraphsPage.svelte
@@ -3,19 +3,18 @@
 </script>
 
 <script lang="typescript">
-    import RangeBox from './RangeBox.svelte'
-
+    import type { SvelteComnponent } from 'svelte/internal';
     import type { I18n } from "anki/i18n";
     import type pb from "anki/backend_proto";
     import { getGraphData, RevlogRange } from "./graph-helpers";
 
     export let i18n: I18n;
     export let nightMode: boolean;
-    export let graphs: any[];
+    export let graphs: SvelteComponent[];
 
     export let search: string;
     export let days: number;
-    export let withRangeBox: boolean;
+    export let controller: SvelteComponent;
 
     let active = false;
     let sourceData: pb.BackendProto.GraphsOut | null = null;
@@ -42,14 +41,14 @@
     refreshWith(search, days)
 </script>
 
-{#if withRangeBox}
-    <RangeBox {i18n} {search} {days} {active} on:update={refresh} />
+{#if controller}
+    <svelte:component this={controller} {i18n} {search} {days} {active} on:update={refresh} />
 {/if}
 
 {#if sourceData}
     <div tabindex="-1" class="no-focus-outline">
-        {#each graphs as Graph}
-            <Graph {sourceData} {revlogRange} {i18n} {nightMode} />
+        {#each graphs as graph}
+            <svelte:component this={graph} {sourceData} {revlogRange} {i18n} {nightMode} />
         {/each}
     </div>
 {/if}
diff --git a/ts/graphs/bootstrap.ts b/ts/graphs/bootstrap.ts
index fba7bc183..98bd84616 100644
--- a/ts/graphs/bootstrap.ts
+++ b/ts/graphs/bootstrap.ts
@@ -1,10 +1,13 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+import type { SvelteComponent } from 'svelte/internal';
+
 import { setupI18n } from "anki/i18n";
 import GraphsPage from "./GraphsPage.svelte";
 import { checkNightMode } from "anki/nightmode";
-import { RevlogRange } from "./graph-helpers";
+
+export { default as RangeBox } from './RangeBox.svelte';
 
 export { default as IntervalsGraph } from "./IntervalsGraph.svelte";
 export { default as EaseGraph } from "./EaseGraph.svelte";
@@ -20,10 +23,10 @@ export { RevlogRange } from "./graph-helpers";
 
 export function graphs(
     target: HTMLDivElement,
-    graphs: any[], {
+    graphs: SvelteComponent[], {
         search = "deck:current",
         days = 365,
-        withRangeBox = true,
+        controller = null,
     } = {},
 ): void {
     const nightMode = checkNightMode();
@@ -37,7 +40,7 @@ export function graphs(
                 nightMode,
                 search,
                 days,
-                withRangeBox,
+                controller,
             },
         });
     });
diff --git a/ts/graphs/graphs.html b/ts/graphs/graphs.html
index 403df40bc..49027af7b 100644
--- a/ts/graphs/graphs.html
+++ b/ts/graphs/graphs.html
@@ -23,7 +23,9 @@
                 anki.HourGraph,
                 anki.ButtonsGraph,
                 anki.AddedGraph,
-            ],
+            ], {
+                controller: anki.RangeBox,
+            }
         );
     </script>
 </html>