diff --git a/ts/graphs/BUILD.bazel b/ts/graphs/BUILD.bazel
index 0db44c94d..34d8083bc 100644
--- a/ts/graphs/BUILD.bazel
+++ b/ts/graphs/BUILD.bazel
@@ -71,6 +71,7 @@ ts_library(
         "@npm//d3-transition",
         "@npm//lodash.debounce",
         "@npm//lodash.throttle",
+        "@npm//svelte",
     ],
 )
 
diff --git a/ts/graphs/CardCounts.svelte b/ts/graphs/CardCounts.svelte
index 3a8489632..5f6675138 100644
--- a/ts/graphs/CardCounts.svelte
+++ b/ts/graphs/CardCounts.svelte
@@ -5,11 +5,11 @@
     import type pb from "anki/backend_proto";
     import type { I18n } from "anki/i18n";
     import SeparateInactiveCheckbox from "./SeparateInactiveCheckbox.svelte";
+    import { cardCountsSeparateInactive } from "./preferences";
 
     export let sourceData: pb.BackendProto.GraphsOut;
     export let i18n: I18n;
 
-    let separateInactive = true;
     let svg = null as HTMLElement | SVGElement | null;
 
     let bounds = defaultGraphBounds();
@@ -20,7 +20,7 @@
     let tableData = (null as unknown) as TableDatum[];
 
     $: {
-        graphData = gatherData(sourceData, separateInactive, i18n);
+        graphData = gatherData(sourceData, $cardCountsSeparateInactive, i18n);
         tableData = renderCards(svg as any, bounds, graphData);
     }
 
@@ -56,7 +56,7 @@
     <h1>{graphData.title}</h1>
 
     <div class="range-box-inner">
-        <SeparateInactiveCheckbox bind:separateInactive {i18n} />
+        <SeparateInactiveCheckbox {i18n} />
     </div>
 
     <div class="counts-outer">
diff --git a/ts/graphs/SeparateInactiveCheckbox.svelte b/ts/graphs/SeparateInactiveCheckbox.svelte
index 24fac6072..405a58f83 100644
--- a/ts/graphs/SeparateInactiveCheckbox.svelte
+++ b/ts/graphs/SeparateInactiveCheckbox.svelte
@@ -1,10 +1,13 @@
 <script lang="typescript">
     import type { I18n } from "anki/i18n";
+    import { cardCountsSeparateInactive } from "./preferences";
 
     export let i18n: I18n;
-    export let separateInactive: boolean = true;
 
     const label = i18n.tr(i18n.TR.STATISTICS_COUNTS_SEPARATE_SUSPENDED_BURIED_CARDS);
 </script>
 
-<label> <input type="checkbox" bind:checked={separateInactive} /> {label} </label>
+<label>
+    <input type="checkbox" bind:checked={$cardCountsSeparateInactive} />
+    {label}
+</label>
diff --git a/ts/graphs/preferences.ts b/ts/graphs/preferences.ts
new file mode 100644
index 000000000..8d03bfe59
--- /dev/null
+++ b/ts/graphs/preferences.ts
@@ -0,0 +1,15 @@
+import { writable } from "svelte/store";
+
+function createPreference(initialValue: unknown) {
+    const { subscribe, set } = writable(initialValue);
+
+    return {
+        subscribe,
+        set: (v: unknown) => {
+            set(v);
+        },
+    };
+}
+
+export const calendarFirstDayOfWeek = createPreference(0);
+export const cardCountsSeparateInactive = createPreference(false);