diff --git a/ts/graphs/CardCounts.svelte b/ts/graphs/CardCounts.svelte
index 5f6675138..4c753c13c 100644
--- a/ts/graphs/CardCounts.svelte
+++ b/ts/graphs/CardCounts.svelte
@@ -5,7 +5,6 @@
     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;
@@ -18,9 +17,10 @@
 
     let graphData = (null as unknown) as GraphData;
     let tableData = (null as unknown) as TableDatum[];
+    let cardCountsSeparateInactive = false;
 
     $: {
-        graphData = gatherData(sourceData, $cardCountsSeparateInactive, 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 {i18n} />
+        <SeparateInactiveCheckbox {i18n} bind:cardCountsSeparateInactive />
     </div>
 
     <div class="counts-outer">
diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte
index 6a461f6a8..a38d20f15 100644
--- a/ts/graphs/GraphsPage.svelte
+++ b/ts/graphs/GraphsPage.svelte
@@ -4,8 +4,10 @@
 <script lang="typescript">
     import type { SvelteComponent } from "svelte/internal";
     import type { I18n } from "anki/i18n";
+    import type { PreferenceStore } from "./preferences";
     import type pb from "anki/backend_proto";
-    import { getGraphData, getGraphPreferences, RevlogRange } from "./graph-helpers";
+    import { getGraphData, RevlogRange } from "./graph-helpers";
+    import { getPreferences } from "./preferences";
 
     export let i18n: I18n;
     export let nightMode: boolean;
@@ -17,12 +19,18 @@
 
     let active = false;
     let sourceData: pb.BackendProto.GraphsOut | null = null;
+    let preferences: PreferenceStore | null = null;
     let revlogRange: RevlogRange;
 
+    const preferencesPromise = getPreferences();
+
     const refreshWith = async (search: string, days: number) => {
         active = true;
         try {
-            sourceData = await getGraphData(search, days);
+            [sourceData, preferences] = await Promise.all([
+                getGraphData(search, days),
+                preferencesPromise,
+            ]);
             revlogRange = days > 365 || days === 0 ? RevlogRange.All : RevlogRange.Year;
         } catch (e) {
             sourceData = null;
diff --git a/ts/graphs/SeparateInactiveCheckbox.svelte b/ts/graphs/SeparateInactiveCheckbox.svelte
index 405a58f83..f998c5ceb 100644
--- a/ts/graphs/SeparateInactiveCheckbox.svelte
+++ b/ts/graphs/SeparateInactiveCheckbox.svelte
@@ -1,13 +1,13 @@
 <script lang="typescript">
     import type { I18n } from "anki/i18n";
-    import { cardCountsSeparateInactive } from "./preferences";
 
     export let i18n: I18n;
+    export let cardCountsSeparateInactive: boolean;
 
     const label = i18n.tr(i18n.TR.STATISTICS_COUNTS_SEPARATE_SUSPENDED_BURIED_CARDS);
 </script>
 
 <label>
-    <input type="checkbox" bind:checked={$cardCountsSeparateInactive} />
+    <input type="checkbox" bind:checked={cardCountsSeparateInactive} />
     {label}
 </label>
diff --git a/ts/graphs/preferences.ts b/ts/graphs/preferences.ts
index 8d03bfe59..a4e37ac90 100644
--- a/ts/graphs/preferences.ts
+++ b/ts/graphs/preferences.ts
@@ -1,15 +1,69 @@
+import { getGraphPreferences } from "./graph-helpers";
 import { writable } from "svelte/store";
+import type pb from "anki/backend_proto";
 
-function createPreference(initialValue: unknown) {
+interface CustomStore<T> {
+    subscribe: (getter: (value: T) => void) => () => void;
+    set: (value: T) => void;
+    get: () => T;
+}
+
+export type PreferenceStore = {
+    [K in keyof pb.BackendProto.GraphsPreferencesOut]: CustomStore<
+        pb.BackendProto.GraphsPreferencesOut[K]
+    >;
+};
+
+function createPreference<T>(
+    initialValue: T,
+    savePreferences: () => void
+): CustomStore<T> {
     const { subscribe, set } = writable(initialValue);
 
     return {
         subscribe,
-        set: (v: unknown) => {
+        set: (v: T): void => {
             set(v);
+            savePreferences();
+        },
+        get: (): T => {
+            let result: any /* T */;
+            subscribe((value: T) => (result = value))();
+            return result;
         },
     };
 }
 
-export const calendarFirstDayOfWeek = createPreference(0);
-export const cardCountsSeparateInactive = createPreference(false);
+function preparePreferences(
+    graphsPreferences: pb.BackendProto.GraphsPreferencesOut,
+    save: (prefs: pb.BackendProto.GraphsPreferencesOut) => void
+): PreferenceStore {
+    const preferences: Partial<PreferenceStore> = {};
+
+    function constructPreferences(): pb.BackendProto.GraphsPreferencesOut {
+        const payload: Partial<pb.BackendProto.GraphsPreferencesOut> = {};
+        for (const [key, pref] of Object.entries(preferences as PreferenceStore)) {
+            payload[key] = pref.get();
+        }
+        return payload as pb.BackendProto.GraphsPreferencesOut;
+    }
+
+    function savePreferences(): void {
+        const preferences = constructPreferences();
+        save(preferences);
+    }
+
+    for (const [key, value] of Object.entries(graphsPreferences)) {
+        preferences[key] = createPreference(value, savePreferences);
+    }
+
+    return preferences as PreferenceStore;
+}
+
+export async function getPreferences() {
+    const initialPreferences = await getGraphPreferences();
+
+    return preparePreferences(initialPreferences, (prefs) => {
+        console.log("preferences to save", prefs);
+    });
+}
diff --git a/ts/tsconfig.json b/ts/tsconfig.json
index 4e8f96d8c..883e2130b 100644
--- a/ts/tsconfig.json
+++ b/ts/tsconfig.json
@@ -3,7 +3,7 @@
     "compilerOptions": {
         "target": "es6",
         "module": "es6",
-        "lib": ["es2016", "es2019.array", "dom", "dom.iterable"],
+        "lib": ["es2017", "es2019.array", "dom", "dom.iterable"],
         "baseUrl": ".",
         "paths": {
             "anki/*": ["../bazel-bin/ts/lib/*"]