diff --git a/README.md b/README.md
index 7161bcb10..7e7fa6b7f 100644
--- a/README.md
+++ b/README.md
@@ -128,10 +128,8 @@ The build includes a docker image build which may be easier to deploy. See [wodi
 
 ### Quickly test drive a feature branch
 
-Use the `./scripts/run-version.sh` script
+Use the `./scripts/run-version.sh` script setting the branch references for the app and api (defaults to main for both):
 
 ```
 ./scripts/run-version.sh --app mrc-1234 --api mrc-2345
 ```
-
-setting the branch references for the app and api (defaults to main for both).
diff --git a/app/static/package-lock.json b/app/static/package-lock.json
index 97ca57d67..54aeea1aa 100644
--- a/app/static/package-lock.json
+++ b/app/static/package-lock.json
@@ -13,6 +13,7 @@
                 "@types/d3-format": "^3.0.1",
                 "axios": "^0.26.0",
                 "bootstrap": "^5.1.3",
+                "color": "^4.2.3",
                 "csv-parse": "^5.2.1",
                 "d3-format": "^3.1.0",
                 "i18next": "^22.4.11",
@@ -32,6 +33,7 @@
             "devDependencies": {
                 "@playwright/test": "1.37.0",
                 "@types/bootstrap": "^5.2.6",
+                "@types/color": "^3.0.6",
                 "@types/jest": "^27.4.0",
                 "@types/markdown-it": "^12.2.3",
                 "@types/plotly.js-basic-dist-min": "^2.12.1",
@@ -3388,6 +3390,30 @@
                 "@popperjs/core": "^2.9.2"
             }
         },
+        "node_modules/@types/color": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.6.tgz",
+            "integrity": "sha512-NMiNcZFRUAiUUCCf7zkAelY8eV3aKqfbzyFQlXpPIEeoNDbsEHGpb854V3gzTsGKYj830I5zPuOwU/TP5/cW6A==",
+            "dev": true,
+            "dependencies": {
+                "@types/color-convert": "*"
+            }
+        },
+        "node_modules/@types/color-convert": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.3.tgz",
+            "integrity": "sha512-2Q6wzrNiuEvYxVQqhh7sXM2mhIhvZR/Paq4FdsQkOMgWsCIkKvSGj8Le1/XalulrmgOzPMqNa0ix+ePY4hTrfg==",
+            "dev": true,
+            "dependencies": {
+                "@types/color-name": "*"
+            }
+        },
+        "node_modules/@types/color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-hulKeREDdLFesGQjl96+4aoJSHY5b2GRjagzzcqCfIrWhe5vkCqIvrLbqzBaI1q94Vg8DNJZZqTR5ocdWmWclg==",
+            "dev": true
+        },
         "node_modules/@types/connect": {
             "version": "3.4.35",
             "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -10102,20 +10128,21 @@
             }
         },
         "node_modules/color": {
-            "version": "3.2.1",
-            "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
-            "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
-            "dev": true,
+            "version": "4.2.3",
+            "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+            "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
             "dependencies": {
-                "color-convert": "^1.9.3",
-                "color-string": "^1.6.0"
+                "color-convert": "^2.0.1",
+                "color-string": "^1.9.0"
+            },
+            "engines": {
+                "node": ">=12.5.0"
             }
         },
         "node_modules/color-convert": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
             "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-            "dev": true,
             "dependencies": {
                 "color-name": "~1.1.4"
             },
@@ -10126,34 +10153,17 @@
         "node_modules/color-name": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-            "dev": true
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "node_modules/color-string": {
             "version": "1.9.0",
             "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.0.tgz",
             "integrity": "sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==",
-            "dev": true,
             "dependencies": {
                 "color-name": "^1.0.0",
                 "simple-swizzle": "^0.2.2"
             }
         },
-        "node_modules/color/node_modules/color-convert": {
-            "version": "1.9.3",
-            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-            "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-            "dev": true,
-            "dependencies": {
-                "color-name": "1.1.3"
-            }
-        },
-        "node_modules/color/node_modules/color-name": {
-            "version": "1.1.3",
-            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-            "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-            "dev": true
-        },
         "node_modules/combined-stream": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -21904,6 +21914,31 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/postcss-colormin/node_modules/color": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+            "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+            "dev": true,
+            "dependencies": {
+                "color-convert": "^1.9.3",
+                "color-string": "^1.6.0"
+            }
+        },
+        "node_modules/postcss-colormin/node_modules/color-convert": {
+            "version": "1.9.3",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+            "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+            "dev": true,
+            "dependencies": {
+                "color-name": "1.1.3"
+            }
+        },
+        "node_modules/postcss-colormin/node_modules/color-name": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+            "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+            "dev": true
+        },
         "node_modules/postcss-colormin/node_modules/picocolors": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
@@ -25110,7 +25145,6 @@
             "version": "0.2.2",
             "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
             "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-            "dev": true,
             "dependencies": {
                 "is-arrayish": "^0.3.1"
             }
@@ -25118,8 +25152,7 @@
         "node_modules/simple-swizzle/node_modules/is-arrayish": {
             "version": "0.3.2",
             "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-            "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-            "dev": true
+            "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
         },
         "node_modules/sisteransi": {
             "version": "1.0.5",
@@ -32080,6 +32113,30 @@
                 "@popperjs/core": "^2.9.2"
             }
         },
+        "@types/color": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.6.tgz",
+            "integrity": "sha512-NMiNcZFRUAiUUCCf7zkAelY8eV3aKqfbzyFQlXpPIEeoNDbsEHGpb854V3gzTsGKYj830I5zPuOwU/TP5/cW6A==",
+            "dev": true,
+            "requires": {
+                "@types/color-convert": "*"
+            }
+        },
+        "@types/color-convert": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.3.tgz",
+            "integrity": "sha512-2Q6wzrNiuEvYxVQqhh7sXM2mhIhvZR/Paq4FdsQkOMgWsCIkKvSGj8Le1/XalulrmgOzPMqNa0ix+ePY4hTrfg==",
+            "dev": true,
+            "requires": {
+                "@types/color-name": "*"
+            }
+        },
+        "@types/color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-hulKeREDdLFesGQjl96+4aoJSHY5b2GRjagzzcqCfIrWhe5vkCqIvrLbqzBaI1q94Vg8DNJZZqTR5ocdWmWclg==",
+            "dev": true
+        },
         "@types/connect": {
             "version": "3.4.35",
             "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -37398,37 +37455,18 @@
             }
         },
         "color": {
-            "version": "3.2.1",
-            "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
-            "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
-            "dev": true,
+            "version": "4.2.3",
+            "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+            "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
             "requires": {
-                "color-convert": "^1.9.3",
-                "color-string": "^1.6.0"
-            },
-            "dependencies": {
-                "color-convert": {
-                    "version": "1.9.3",
-                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-                    "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-                    "dev": true,
-                    "requires": {
-                        "color-name": "1.1.3"
-                    }
-                },
-                "color-name": {
-                    "version": "1.1.3",
-                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-                    "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-                    "dev": true
-                }
+                "color-convert": "^2.0.1",
+                "color-string": "^1.9.0"
             }
         },
         "color-convert": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
             "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-            "dev": true,
             "requires": {
                 "color-name": "~1.1.4"
             }
@@ -37436,14 +37474,12 @@
         "color-name": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-            "dev": true
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "color-string": {
             "version": "1.9.0",
             "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.0.tgz",
             "integrity": "sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==",
-            "dev": true,
             "requires": {
                 "color-name": "^1.0.0",
                 "simple-swizzle": "^0.2.2"
@@ -46863,6 +46899,31 @@
                 "postcss-value-parser": "^3.0.0"
             },
             "dependencies": {
+                "color": {
+                    "version": "3.2.1",
+                    "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+                    "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+                    "dev": true,
+                    "requires": {
+                        "color-convert": "^1.9.3",
+                        "color-string": "^1.6.0"
+                    }
+                },
+                "color-convert": {
+                    "version": "1.9.3",
+                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+                    "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+                    "dev": true,
+                    "requires": {
+                        "color-name": "1.1.3"
+                    }
+                },
+                "color-name": {
+                    "version": "1.1.3",
+                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+                    "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+                    "dev": true
+                },
                 "picocolors": {
                     "version": "0.2.1",
                     "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
@@ -49425,7 +49486,6 @@
             "version": "0.2.2",
             "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
             "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-            "dev": true,
             "requires": {
                 "is-arrayish": "^0.3.1"
             },
@@ -49433,8 +49493,7 @@
                 "is-arrayish": {
                     "version": "0.3.2",
                     "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-                    "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-                    "dev": true
+                    "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
                 }
             }
         },
diff --git a/app/static/package.json b/app/static/package.json
index b68b3811a..b3b57a9e4 100644
--- a/app/static/package.json
+++ b/app/static/package.json
@@ -31,6 +31,7 @@
         "@types/d3-format": "^3.0.1",
         "axios": "^0.26.0",
         "bootstrap": "^5.1.3",
+        "color": "^4.2.3",
         "csv-parse": "^5.2.1",
         "d3-format": "^3.1.0",
         "i18next": "^22.4.11",
@@ -50,6 +51,7 @@
     "devDependencies": {
         "@playwright/test": "1.37.0",
         "@types/bootstrap": "^5.2.6",
+        "@types/color": "^3.0.6",
         "@types/jest": "^27.4.0",
         "@types/markdown-it": "^12.2.3",
         "@types/plotly.js-basic-dist-min": "^2.12.1",
diff --git a/app/static/src/app/components/GraphSettings.vue b/app/static/src/app/components/GraphSettings.vue
new file mode 100644
index 000000000..29fe9aa45
--- /dev/null
+++ b/app/static/src/app/components/GraphSettings.vue
@@ -0,0 +1,76 @@
+<template>
+    <div>
+        <div class="log-scale-y-axis form-check form-check-inline">
+            <label class="form-check-label">Log scale y axis</label>
+            <input type="checkbox" class="form-check-input" style="vertical-align: bottom" v-model="logScaleYAxis" />
+        </div>
+        <div class="lock-y-axis form-check form-check-inline">
+            <label class="form-check-label">Lock y axis</label>
+            <input type="checkbox" class="form-check-input" style="vertical-align: bottom" v-model="lockYAxis" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from "vue";
+import { useStore } from "vuex";
+import { GraphsMutation } from "../store/graphs/mutations";
+
+export default defineComponent({
+    name: "GraphSettings",
+    props: {
+        graphIndex: {
+            type: Number,
+            required: false,
+            default: -1
+        },
+        // fitPlot should be true if graphIndex is not provided - in this case we update the single fit plot settings
+        fitPlot: {
+            type: Boolean,
+            required: true
+        }
+    },
+    setup(props) {
+        const store = useStore();
+        const settings = computed(() =>
+            props.fitPlot ? store.state.graphs.fitGraphSettings : store.state.graphs.config[props.graphIndex].settings
+        );
+        const logScaleYAxis = computed({
+            get() {
+                return settings.value.logScaleYAxis;
+            },
+            set(newValue) {
+                if (props.fitPlot) {
+                    store.commit(`graphs/${GraphsMutation.SetFitLogScaleYAxis}`, newValue);
+                } else {
+                    store.commit(`graphs/${GraphsMutation.SetLogScaleYAxis}`, {
+                        graphIndex: props.graphIndex,
+                        value: newValue
+                    });
+                }
+            }
+        });
+
+        const lockYAxis = computed({
+            get() {
+                return settings.value.lockYAxis;
+            },
+            set(newValue) {
+                if (props.fitPlot) {
+                    store.commit(`graphs/${GraphsMutation.SetFitLockYAxis}`, newValue);
+                } else {
+                    store.commit(`graphs/${GraphsMutation.SetLockYAxis}`, {
+                        graphIndex: props.graphIndex,
+                        value: newValue
+                    });
+                }
+            }
+        });
+
+        return {
+            logScaleYAxis,
+            lockYAxis
+        };
+    }
+});
+</script>
diff --git a/app/static/src/app/components/WodinPlot.vue b/app/static/src/app/components/WodinPlot.vue
index 025f98757..65917d6ed 100644
--- a/app/static/src/app/components/WodinPlot.vue
+++ b/app/static/src/app/components/WodinPlot.vue
@@ -10,14 +10,24 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch, onMounted, onUnmounted, PropType } from "vue";
+import { computed, defineComponent, ref, watch, onMounted, onUnmounted, PropType, Ref } from "vue";
 import { useStore } from "vuex";
 import { EventEmitter } from "events";
-import { newPlot, react, PlotRelayoutEvent, Plots, AxisType, Layout, Config } from "plotly.js-basic-dist-min";
+import {
+    newPlot,
+    react,
+    PlotRelayoutEvent,
+    Plots,
+    AxisType,
+    Layout,
+    Config,
+    LayoutAxis
+} from "plotly.js-basic-dist-min";
 import { WodinPlotData, fadePlotStyle, margin, config } from "../plot";
 import WodinPlotDataSummary from "./WodinPlotDataSummary.vue";
 import { GraphsMutation } from "../store/graphs/mutations";
-import { YAxisRange } from "../store/graphs/state";
+import { GraphConfig, YAxisRange } from "../store/graphs/state";
+import { GraphsGetter } from "../store/graphs/getters";
 
 export default defineComponent({
     name: "WodinPlot",
@@ -44,9 +54,30 @@ export default defineComponent({
             type: Boolean,
             required: false,
             default: true
+        },
+        linkedXAxis: {
+            type: Object as PropType<Partial<LayoutAxis> | null>,
+            required: false,
+            default: null
+        },
+        graphIndex: {
+            type: Number,
+            required: false,
+            default: -1
+        },
+        // We could look up graphConfig from graphIndex - however this causes a specific reactivity bug
+        // when the last plot is deleted and the plot tries to observe the old maximum index before it is updated.
+        graphConfig: {
+            type: Object as PropType<GraphConfig | null>,
+            required: true
+        },
+        fitPlot: {
+            type: Boolean,
+            required: true
         }
     },
-    setup(props) {
+    emits: ["updateXAxis"],
+    setup(props, { emit }) {
         const store = useStore();
 
         const plotStyle = computed(() => (props.fadePlot ? fadePlotStyle : ""));
@@ -59,43 +90,106 @@ export default defineComponent({
 
         const hasPlotData = computed(() => !!baseData.value?.length);
 
-        const yAxisType = computed(() => (store.state.graphs.settings.logScaleYAxis ? "log" : ("linear" as AxisType)));
-        const lockYAxis = computed(() => store.state.graphs.settings.lockYAxis);
-        const yAxisRange = computed(() => store.state.graphs.settings.yAxisRange as YAxisRange);
+        const settings = computed(() =>
+            props.fitPlot ? store.state.graphs.fitGraphSettings : props.graphConfig!.settings
+        );
+        const yAxisType = computed(() => (settings.value.logScaleYAxis ? "log" : ("linear" as AxisType)));
+        const lockYAxis = computed(() => settings.value.lockYAxis);
+        const yAxisRange = computed(() => settings.value.yAxisRange as YAxisRange);
+        const legendWidth = computed(() => store.getters[`graphs/${GraphsGetter.legendWidth}`]);
+
+        // Remember the user's last y axis zoom, when we update from x axis potentially chosen in another graph
+        const lastYAxisFromZoom: Ref<Partial<LayoutAxis> | null> = ref(null);
 
-        const updateAxesRange = () => {
+        const commitYAxisRange = () => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const plotLayout = (plot.value as any).layout;
             const yRange = plotLayout.yaxis?.range;
             if (plotLayout) {
-                store.commit(`graphs/${GraphsMutation.SetYAxisRange}`, yRange);
+                if (props.fitPlot) {
+                    store.commit(`graphs/${GraphsMutation.SetFitYAxisRange}`, yRange);
+                } else {
+                    store.commit(`graphs/${GraphsMutation.SetYAxisRange}`, {
+                        graphIndex: props.graphIndex,
+                        value: yRange
+                    });
+                }
             }
         };
 
-        const relayout = async (event: PlotRelayoutEvent) => {
+        const defaultLayout = (): Partial<Layout> => {
+            // Get generic layout, which will be modifed dynamically as required
+            // Show Time label on final graph only
+            const xAxisTitle = props.fitPlot || props.graphIndex === store.state.graphs.config.length - 1 ? "Time" : "";
+            const result = {
+                margin: { ...margin },
+                xaxis: { title: xAxisTitle },
+                yaxis: { type: yAxisType.value }
+            };
+            if (legendWidth.value) {
+                result.margin.r = legendWidth.value;
+            }
+            return result;
+        };
+
+        const preserveYAxisRange = (layout: Partial<Layout>): Partial<Layout> => {
+            // When updating plot view in response to some data change or event, retain Y axis range in layout
+            // either from the locked range, or from the last range user zoomed to.
+            // (Locked range will survive re-mount and tab change, the last range from zoom will not)
+            const result = { ...layout };
+            if (lockYAxis.value) {
+                result.yaxis = {
+                    ...result.yaxis,
+                    range: [...yAxisRange.value],
+                    autorange: false
+                };
+            } else if (lastYAxisFromZoom.value) {
+                result.yaxis = {
+                    ...result.yaxis,
+                    ...lastYAxisFromZoom.value
+                };
+            }
+            return result;
+        };
+
+        const updateXAxisRange = async (xAxis: Partial<LayoutAxis>) => {
             let data;
-            if (event["xaxis.autorange"] === true) {
+            if (xAxis.autorange) {
                 data = baseData.value;
             } else {
-                const t0 = event["xaxis.range[0]"];
-                const t1 = event["xaxis.range[1]"];
-                if (t0 === undefined || t1 === undefined) {
-                    return;
-                }
-                data = props.plotData(t0, t1, nPoints);
+                data = props.plotData(xAxis.range![0], xAxis.range![1], nPoints);
             }
 
-            const layout: Partial<Layout> = {
-                margin,
-                uirevision: "true",
-                xaxis: { title: "Time", autorange: true },
-                yaxis: { autorange: true, type: yAxisType.value }
-            };
+            const layout = preserveYAxisRange(defaultLayout());
 
             const el = plot.value as HTMLElement;
             await react(el, data, layout, config);
         };
 
+        const axisFromEvent = (event: PlotRelayoutEvent, axisLetter: "x" | "y"): Partial<LayoutAxis> => {
+            return {
+                autorange: event[`${axisLetter}axis.autorange`] || false,
+                range: [event[`${axisLetter}axis.range[0]`], event[`${axisLetter}axis.range[1]`]]
+            };
+        };
+
+        const relayout = async (event: PlotRelayoutEvent) => {
+            if (event["xaxis.autorange"] || (event["xaxis.range[0]"] && event["xaxis.range[1]"])) {
+                const xAxis = axisFromEvent(event, "x");
+                if (props.linkedXAxis) {
+                    // Emit the x axis change, and handle update when options are propagated through prop
+                    emit("updateXAxis", xAxis);
+                } else {
+                    // No linked x axis, so this plot can just update itself directly
+                    await updateXAxisRange(xAxis);
+                }
+            }
+
+            if (event["yaxis.autorange"] || (event["yaxis.range[0]"] && event["yaxis.range[1]"])) {
+                lastYAxisFromZoom.value = axisFromEvent(event, "y");
+            }
+        };
+
         const resize = () => {
             if (plot.value) {
                 Plots.resize(plot.value as HTMLElement);
@@ -110,25 +204,26 @@ export default defineComponent({
 
                 if (hasPlotData.value) {
                     const el = plot.value as unknown;
-                    const layout: Partial<Layout> = {
-                        margin,
-                        yaxis: {
-                            type: yAxisType.value
-                        },
-                        xaxis: { title: "Time" }
-                    };
-
+                    let layout = defaultLayout();
+                    if (!toggleLogScale) {
+                        layout = preserveYAxisRange(layout);
+                    }
                     const configCopy = { ...config } as Partial<Config>;
 
-                    if (lockYAxis.value && !toggleLogScale) {
-                        layout.yaxis!.range = [...yAxisRange.value];
-                        layout.yaxis!.autorange = false;
+                    let data;
+                    if (!props.linkedXAxis || props.linkedXAxis.autorange) {
+                        data = baseData.value;
+                    } else {
+                        data = props.plotData(props.linkedXAxis.range![0], props.linkedXAxis.range![1], nPoints);
                     }
 
-                    newPlot(el as HTMLElement, baseData.value, layout, configCopy);
+                    newPlot(el as HTMLElement, data, layout, configCopy);
 
+                    // We're not locking the YAxis OR we are toggling the log scale (overriding any locked range)
+                    // so commit whatever Y axis range the plot auto-calculates, so we can lock to that in future
+                    // if the user chooses
                     if (!lockYAxis.value || toggleLogScale) {
-                        updateAxesRange();
+                        commitYAxisRange();
                     }
 
                     if (props.recalculateOnRelayout) {
@@ -152,6 +247,14 @@ export default defineComponent({
                 drawPlot(true);
             }
         });
+        watch(
+            () => props.linkedXAxis,
+            () => {
+                if (props.linkedXAxis) {
+                    updateXAxisRange(props.linkedXAxis);
+                }
+            }
+        );
 
         onUnmounted(() => {
             if (resizeObserver) {
diff --git a/app/static/src/app/components/code/CodeTab.vue b/app/static/src/app/components/code/CodeTab.vue
index f72d3260e..dccf09a62 100644
--- a/app/static/src/app/components/code/CodeTab.vue
+++ b/app/static/src/app/components/code/CodeTab.vue
@@ -15,9 +15,7 @@
         </div>
         <error-info :error="error"></error-info>
         <div class="mt-3">
-            <vertical-collapse v-if="showSelectedVariables" title="Select variables" collapse-id="select-variables">
-                <selected-variables></selected-variables>
-            </vertical-collapse>
+            <graph-configs-collapsible></graph-configs-collapsible>
         </div>
     </div>
 </template>
@@ -32,19 +30,18 @@ import CodeEditor from "./CodeEditor.vue";
 import { ModelAction } from "../../store/model/actions";
 import userMessages from "../../userMessages";
 import ErrorInfo from "../ErrorInfo.vue";
-import SelectedVariables from "./SelectedVariables.vue";
-import VerticalCollapse from "../VerticalCollapse.vue";
 import GenericHelp from "../help/GenericHelp.vue";
+import GraphConfigsCollapsible from "../graphConfig/GraphConfigsCollapsible.vue";
 
 export default defineComponent({
     name: "CodeTab",
     components: {
+        GraphConfigsCollapsible,
         GenericHelp,
-        SelectedVariables,
+
         ErrorInfo,
         CodeEditor,
-        VueFeather,
-        VerticalCollapse
+        VueFeather
     },
     setup() {
         const store = useStore();
@@ -55,8 +52,6 @@ export default defineComponent({
         const validIcon = computed(() => (codeIsValid.value ? "check" : "x"));
         const iconValidatedClass = computed(() => (codeIsValid.value ? "text-success" : "text-danger"));
         const iconClass = computed(() => (codeValidating.value ? "code-validating-icon" : iconValidatedClass.value));
-        const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
-        const showSelectedVariables = computed(() => allVariables.value.length && !store.state.model.compileRequired);
         const appIsConfigured = computed(() => store.state.configured);
         const compile = () => store.dispatch(`model/${ModelAction.CompileModel}`);
         const loadingMessage = userMessages.code.isValidating;
@@ -69,7 +64,6 @@ export default defineComponent({
             iconClass,
             compile,
             error,
-            showSelectedVariables,
             codeHelp,
             codeValidating,
             loadingMessage
diff --git a/app/static/src/app/components/code/SelectedVariables.vue b/app/static/src/app/components/code/SelectedVariables.vue
deleted file mode 100644
index 8e40b3c0b..000000000
--- a/app/static/src/app/components/code/SelectedVariables.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-    <div class="ms-2">Click to toggle variables to include in graphs.</div>
-    <div class="selected-variables-panel m-2">
-        <span
-            v-for="variable in allVariables"
-            class="badge variable me-2 mb-2"
-            :style="getStyle(variable)"
-            :key="variable"
-            @click="toggleVariable(variable)"
-            >{{ variable }}</span
-        >
-    </div>
-    <div class="ms-2">
-        <span class="clickable text-primary" id="select-variables-all" @click="selectAll">Select all</span> |
-        <span class="clickable text-primary" id="select-variables-none" @click="selectNone">Select none</span>
-    </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from "vue";
-import { useStore } from "vuex";
-import { GraphsAction } from "../../store/graphs/actions";
-
-export default defineComponent({
-    name: "SelectedVariables",
-    setup() {
-        const store = useStore();
-        const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
-        const selectedVariables = computed<string[]>(() => store.state.graphs.config[0].selectedVariables);
-        const palette = computed(() => store.state.model.paletteModel!);
-
-        const getStyle = (variable: string) => {
-            let bgcolor = "#bbb"; // grey out unselected variables
-            if (selectedVariables.value.includes(variable)) {
-                bgcolor = palette.value[variable]!;
-            }
-            return { "background-color": bgcolor };
-        };
-
-        const updateSelectedVariables = (newVariables: string[]) => {
-            store.dispatch(`graphs/${GraphsAction.UpdateSelectedVariables}`, {
-                graphIndex: 0,
-                selectedVariables: newVariables
-            });
-        };
-
-        const toggleVariable = (variable: string) => {
-            let newVars: string[];
-            if (selectedVariables.value.includes(variable)) {
-                newVars = selectedVariables.value.filter((v) => v !== variable);
-            } else {
-                newVars = [...selectedVariables.value, variable];
-            }
-            updateSelectedVariables(newVars);
-        };
-
-        const selectAll = () => {
-            updateSelectedVariables([...allVariables.value]);
-        };
-
-        const selectNone = () => {
-            updateSelectedVariables([]);
-        };
-
-        return {
-            allVariables,
-            getStyle,
-            toggleVariable,
-            selectAll,
-            selectNone
-        };
-    }
-});
-</script>
-
-<style scoped lang="scss">
-.selected-variables-panel {
-    width: 100%;
-
-    .variable {
-        font-size: large;
-        cursor: pointer;
-    }
-}
-</style>
diff --git a/app/static/src/app/components/fit/FitPlot.vue b/app/static/src/app/components/fit/FitPlot.vue
index cef3f5d8d..a636ae3c1 100644
--- a/app/static/src/app/components/fit/FitPlot.vue
+++ b/app/static/src/app/components/fit/FitPlot.vue
@@ -5,6 +5,8 @@
         :end-time="endTime"
         :plot-data="allPlotData"
         :redrawWatches="solution ? [solution] : []"
+        :fit-plot="true"
+        :graph-config="null"
     >
         <slot></slot>
     </wodin-plot>
diff --git a/app/static/src/app/components/graphConfig/GraphConfig.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
new file mode 100644
index 000000000..ab3cf87ed
--- /dev/null
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -0,0 +1,113 @@
+<template>
+    <div class="graph-config-panel m-2" @drop="onDrop($event)" @dragover.prevent @dragenter.prevent>
+        <button
+            type="button"
+            class="btn btn-sm btn-light bg-transparent border-0 float-end delete-graph"
+            v-if="canDelete"
+            @click="deleteGraph"
+            v-tooltip="'Delete Graph'"
+        >
+            <vue-feather class="inline-icon clickable ms-2" type="trash-2"></vue-feather>
+        </button>
+        <graph-settings :fit-plot="false" :graph-index="graphIndex" class="graph-config-settings mb-1"></graph-settings>
+        <div class="drop-zone" :class="dragging ? 'drop-zone-active' : 'drop-zone-inactive'">
+            <template v-for="variable in selectedVariables" :key="variable">
+                <span
+                    class="badge variable me-2"
+                    :style="getStyle(variable)"
+                    :draggable="true"
+                    @dragstart="startDrag($event, variable)"
+                    @dragend="endDrag"
+                >
+                    <span class="variable-name">{{ variable }}</span>
+                    <span class="variable-delete">
+                        <button @click="removeVariable(graphIndex, variable)" v-tooltip="'Remove variable'">×</button>
+                    </span>
+                </span>
+            </template>
+            <div v-if="!selectedVariables.length" class="drop-zone-instruction p-2 me-4">
+                Drag variables here to select them for this graph. Press the Ctrl or ⌘ key on drag to make a copy of a
+                variable.
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import VueFeather from "vue-feather";
+import { computed, defineComponent } from "vue";
+import { useStore } from "vuex";
+import GraphSettings from "@/app/components/GraphSettings.vue";
+import SelectVariables from "../mixins/selectVariables";
+import { GraphsMutation } from "../../store/graphs/mutations";
+
+export default defineComponent({
+    name: "GraphConfig",
+    components: {
+        GraphSettings,
+        VueFeather
+    },
+    props: {
+        dragging: {
+            type: Boolean,
+            required: true
+        },
+        graphIndex: {
+            type: Number,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        const store = useStore();
+        const { startDrag, endDrag, onDrop, removeVariable } = SelectVariables(store, emit, false, props.graphIndex);
+        const selectedVariables = computed<string[]>(
+            () => store.state.graphs.config[props.graphIndex].selectedVariables
+        );
+        const canDelete = computed(() => store.state.graphs.config.length > 1);
+        const palette = computed(() => store.state.model.paletteModel!);
+
+        const getStyle = (variable: string) => {
+            let bgcolor = "#bbb"; // grey out unselected variables
+            if (selectedVariables.value.includes(variable)) {
+                bgcolor = palette.value[variable]!;
+            }
+            return { "background-color": bgcolor };
+        };
+
+        const deleteGraph = () => {
+            store.commit(`graphs/${GraphsMutation.DeleteGraph}`, props.graphIndex);
+        };
+
+        return {
+            selectedVariables,
+            canDelete,
+            removeVariable,
+            getStyle,
+            startDrag,
+            endDrag,
+            onDrop,
+            deleteGraph
+        };
+    }
+});
+</script>
+
+<style scoped lang="scss">
+.graph-config-panel {
+    border-width: 1px;
+    border-style: solid;
+    border-color: #ccc;
+    padding: 4px;
+    .graph-config-settings {
+        margin-left: 8px;
+    }
+    .selected-variables-panel {
+        width: 100%;
+
+        .variable {
+            font-size: large;
+            cursor: pointer;
+        }
+    }
+}
+</style>
diff --git a/app/static/src/app/components/graphConfig/GraphConfigs.vue b/app/static/src/app/components/graphConfig/GraphConfigs.vue
new file mode 100644
index 000000000..b4978216b
--- /dev/null
+++ b/app/static/src/app/components/graphConfig/GraphConfigs.vue
@@ -0,0 +1,52 @@
+<template>
+    <div id="graph-configs-instruction" class="ms-2">
+        Drag variables to 'Hidden variables' to remove them from your graph, or click 'Add Graph' to create a new graph
+        to move them to.
+    </div>
+    <graph-config
+        v-for="(_, index) in graphConfigs"
+        :graph-index="index"
+        :key="index"
+        :dragging="draggingVariable"
+        @setDragging="setDraggingVariable"
+    ></graph-config>
+    <button class="btn btn-primary mt-2 ms-2" id="add-graph-btn" @click="addGraph">
+        <vue-feather size="20" class="inline-icon" type="plus"></vue-feather>
+        Add Graph
+    </button>
+    <hidden-variables @setDragging="setDraggingVariable" :dragging="draggingVariable"></hidden-variables>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from "vue";
+import { useStore } from "vuex";
+import VueFeather from "vue-feather";
+import HiddenVariables from "./HiddenVariables.vue";
+import GraphConfig from "./GraphConfig.vue";
+import { GraphsAction } from "../../store/graphs/actions";
+
+export default defineComponent({
+    components: {
+        VueFeather,
+        GraphConfig,
+        HiddenVariables
+    },
+    setup() {
+        const store = useStore();
+        const draggingVariable = ref(false); // indicates whether a child component is dragging a variable
+        const setDraggingVariable = (value: boolean) => {
+            draggingVariable.value = value;
+        };
+        const graphConfigs = computed(() => store.state.graphs.config);
+        const addGraph = () => {
+            store.dispatch(`graphs/${GraphsAction.NewGraph}`);
+        };
+        return {
+            draggingVariable,
+            setDraggingVariable,
+            graphConfigs,
+            addGraph
+        };
+    }
+});
+</script>
diff --git a/app/static/src/app/components/graphConfig/GraphConfigsCollapsible.vue b/app/static/src/app/components/graphConfig/GraphConfigsCollapsible.vue
new file mode 100644
index 000000000..b70e17d81
--- /dev/null
+++ b/app/static/src/app/components/graphConfig/GraphConfigsCollapsible.vue
@@ -0,0 +1,28 @@
+<template>
+    <vertical-collapse v-if="showGraphs" title="Graphs" collapse-id="graphs">
+        <graph-configs></graph-configs>
+    </vertical-collapse>
+</template>
+
+<script lang="ts">
+import GraphConfigs from "@/app/components/graphConfig/GraphConfigs.vue";
+import VerticalCollapse from "@/app/components/VerticalCollapse.vue";
+import { computed, defineComponent } from "vue";
+import { useStore } from "vuex";
+
+export default defineComponent({
+    name: "GraphConfigsCollapsible",
+    components: {
+        GraphConfigs,
+        VerticalCollapse
+    },
+    setup() {
+        const store = useStore();
+        const allVariables = computed<string[]>(() => store.state.model.odinModelResponse?.metadata?.variables || []);
+        const showGraphs = computed(() => allVariables.value.length > 0 && !store.state.model.compileRequired);
+        return {
+            showGraphs
+        };
+    }
+});
+</script>
diff --git a/app/static/src/app/components/graphConfig/HiddenVariables.vue b/app/static/src/app/components/graphConfig/HiddenVariables.vue
new file mode 100644
index 000000000..12282a6e6
--- /dev/null
+++ b/app/static/src/app/components/graphConfig/HiddenVariables.vue
@@ -0,0 +1,69 @@
+<template>
+    <div class="hidden-variables-panel m-2" @drop="onDrop($event)" @dragover.prevent @dragenter.prevent>
+        <h5>Hidden variables</h5>
+        <div class="drop-zone" :class="dragging ? 'drop-zone-active' : 'drop-zone-inactive'">
+            <template v-for="variable in hiddenVariables" :key="variable">
+                <span
+                    class="badge variable me-2 mb-2"
+                    :style="getStyle(variable)"
+                    draggable="true"
+                    @dragstart="startDrag($event, variable)"
+                    @dragend="endDrag"
+                >
+                    {{ variable }}
+                </span>
+            </template>
+            <div v-if="!hiddenVariables.length" class="drop-zone-instruction p-2 me-4">
+                Drag variables here to hide them on all graphs.
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { useStore } from "vuex";
+import { GraphsGetter } from "../../store/graphs/getters";
+import SelectVariables from "../mixins/selectVariables";
+import { fadeColor } from "./utils";
+
+export default defineComponent({
+    name: "HiddenVariables",
+    props: {
+        dragging: {
+            type: Boolean,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        const store = useStore();
+        const { startDrag, endDrag, onDrop } = SelectVariables(store, emit, true);
+        const hiddenVariables = computed<string[]>(() => store.getters[`graphs/${GraphsGetter.hiddenVariables}`]);
+        const palette = computed(() => store.state.model.paletteModel!);
+
+        const getStyle = (variable: string) => {
+            const bgcolor = palette.value ? palette.value[variable] : "#eee";
+            return { "background-color": fadeColor(bgcolor) };
+        };
+
+        return {
+            hiddenVariables,
+            getStyle,
+            startDrag,
+            endDrag,
+            onDrop
+        };
+    }
+});
+</script>
+
+<style scoped lang="scss">
+.selected-variables-panel {
+    width: 100%;
+
+    .variable {
+        font-size: large;
+        cursor: pointer;
+    }
+}
+</style>
diff --git a/app/static/src/app/components/graphConfig/utils.ts b/app/static/src/app/components/graphConfig/utils.ts
new file mode 100644
index 000000000..dd407b790
--- /dev/null
+++ b/app/static/src/app/components/graphConfig/utils.ts
@@ -0,0 +1,5 @@
+import * as Color from "color";
+
+export const fadeColor = (color: string): string => {
+    return Color(color).desaturate(0.6).fade(0.4).rgb().string();
+};
diff --git a/app/static/src/app/components/mixins/selectVariables.ts b/app/static/src/app/components/mixins/selectVariables.ts
new file mode 100644
index 000000000..b3364c59a
--- /dev/null
+++ b/app/static/src/app/components/mixins/selectVariables.ts
@@ -0,0 +1,88 @@
+import { Store } from "vuex";
+import { computed } from "vue";
+import { AppState } from "../../store/appState/state";
+import { GraphsAction } from "../../store/graphs/actions";
+
+export interface SelectVariablesMixin {
+    startDrag: (evt: DragEvent, variable: string) => void;
+    endDrag: () => void;
+    onDrop: (evt: DragEvent) => void;
+    removeVariable: (srcGraphIdx: number, variable: string) => void;
+}
+
+export default (
+    store: Store<AppState>,
+    emit: (event: string, ...args: unknown[]) => void,
+    hasHiddenVariables: boolean,
+    graphIndex?: number
+): SelectVariablesMixin => {
+    const thisSrcGraphConfig = hasHiddenVariables ? "hidden" : graphIndex!.toString();
+
+    const startDrag = (event: DragEvent, variable: string) => {
+        const { dataTransfer, ctrlKey, metaKey } = event;
+        const copy = !hasHiddenVariables && (ctrlKey || metaKey);
+        dataTransfer!.dropEffect = "move";
+        dataTransfer!.effectAllowed = "move";
+        dataTransfer!.setData("variable", variable);
+        dataTransfer!.setData("srcGraphConfig", thisSrcGraphConfig);
+        dataTransfer!.setData("copyVar", copy.toString());
+
+        emit("setDragging", true);
+    };
+
+    const endDrag = () => {
+        emit("setDragging", false);
+    };
+
+    const updateSelectedVariables = (graphIdx: number, newVariables: string[]) => {
+        store.dispatch(`graphs/${GraphsAction.UpdateSelectedVariables}`, {
+            graphIndex: graphIdx,
+            selectedVariables: newVariables
+        });
+    };
+
+    const removeVariable = (srcGraphIdx: number, variable: string) => {
+        const srcVariables = store.state.graphs.config[srcGraphIdx].selectedVariables.filter((v) => v !== variable);
+        updateSelectedVariables(srcGraphIdx, srcVariables);
+    };
+
+    const selectedVariables = computed<string[]>(() =>
+        hasHiddenVariables ? [] : store.state.graphs.config[graphIndex!].selectedVariables
+    );
+
+    const onDrop = (evt: DragEvent) => {
+        const { dataTransfer } = evt;
+        const variable = dataTransfer!.getData("variable");
+        const srcGraphConfig = dataTransfer!.getData("srcGraphConfig");
+        if (srcGraphConfig !== thisSrcGraphConfig) {
+            const copy = !hasHiddenVariables && dataTransfer!.getData("copyVar") === "true";
+
+            // add to this graph if necessary - do this before remove so, if a linked variable, it is not unlinked
+            if (!hasHiddenVariables && !selectedVariables.value.includes(variable)) {
+                const newVars = [...selectedVariables.value, variable];
+                updateSelectedVariables(graphIndex!, newVars);
+            }
+
+            if (srcGraphConfig !== "hidden" && !copy) {
+                // Remove variable from all graphs where it occurs if this is HiddenVariables, otherwise from source
+                // graph only
+                if (hasHiddenVariables) {
+                    store.state.graphs.config.forEach((config, index) => {
+                        if (config.selectedVariables.includes(variable)) {
+                            removeVariable(index, variable);
+                        }
+                    });
+                } else {
+                    removeVariable(parseInt(srcGraphConfig, 10), variable);
+                }
+            }
+        }
+    };
+
+    return {
+        removeVariable,
+        startDrag,
+        endDrag,
+        onDrop
+    };
+};
diff --git a/app/static/src/app/components/options/GraphSettings.vue b/app/static/src/app/components/options/GraphSettings.vue
deleted file mode 100644
index 7974c9e40..000000000
--- a/app/static/src/app/components/options/GraphSettings.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-    <div class="container">
-        <div id="log-scale-y-axis" class="row my-2">
-            <div class="col-5">
-                <label class="col-form-label">Log scale y axis</label>
-            </div>
-            <div class="col-6">
-                <input
-                    type="checkbox"
-                    class="form-check-input"
-                    style="vertical-align: bottom"
-                    v-model="logScaleYAxis"
-                />
-            </div>
-        </div>
-        <div id="lock-y-axis" class="row my-2">
-            <div class="col-5">
-                <label class="col-form-label">Lock y axis</label>
-            </div>
-            <div class="col-6">
-                <input type="checkbox" class="form-check-input" style="vertical-align: bottom" v-model="lockYAxis" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed } from "vue";
-import { useStore } from "vuex";
-import { GraphsMutation } from "../../store/graphs/mutations";
-
-export default defineComponent({
-    name: "GraphSettings",
-    setup() {
-        const store = useStore();
-        const logScaleYAxis = computed({
-            get() {
-                return store.state.graphs.settings.logScaleYAxis;
-            },
-            set(newValue) {
-                store.commit(`graphs/${GraphsMutation.SetLogScaleYAxis}`, newValue);
-            }
-        });
-
-        const lockYAxis = computed({
-            get() {
-                return store.state.graphs.settings.lockYAxis;
-            },
-            set(newValue) {
-                store.commit(`graphs/${GraphsMutation.SetLockYAxis}`, newValue);
-            }
-        });
-
-        return {
-            logScaleYAxis,
-            lockYAxis
-        };
-    }
-});
-</script>
diff --git a/app/static/src/app/components/options/OptionsTab.vue b/app/static/src/app/components/options/OptionsTab.vue
index f271e5193..256ead221 100644
--- a/app/static/src/app/components/options/OptionsTab.vue
+++ b/app/static/src/app/components/options/OptionsTab.vue
@@ -16,9 +16,6 @@
         <vertical-collapse v-if="fitTabIsOpen" title="Optimisation" collapse-id="optimisation">
             <optimisation-options></optimisation-options>
         </vertical-collapse>
-        <vertical-collapse v-if="!multiSensitivityOpen" title="Graph Settings" collapse-id="graph-settings">
-            <graph-settings></graph-settings>
-        </vertical-collapse>
         <vertical-collapse
             v-if="!isStochastic"
             title="Advanced Settings"
@@ -30,12 +27,17 @@
         <vertical-collapse v-if="!isStochastic" title="Saved Parameter Sets" collapse-id="parameter-sets">
             <parameter-sets></parameter-sets>
         </vertical-collapse>
+        <graph-configs-collapsible v-if="!fitTabIsOpen"></graph-configs-collapsible>
+        <vertical-collapse v-if="fitTabIsOpen" title="Fit Graph Settings" collapse-id="graph-settings">
+            <graph-settings class="pt-2" :fit-plot="true"></graph-settings>
+        </vertical-collapse>
     </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
+import GraphConfigsCollapsible from "@/app/components/graphConfig/GraphConfigsCollapsible.vue";
 import VerticalCollapse from "../VerticalCollapse.vue";
 import ParameterValues from "./ParameterValues.vue";
 import RunOptions from "./RunOptions.vue";
@@ -43,13 +45,14 @@ import LinkData from "./LinkData.vue";
 import SensitivityOptions from "./SensitivityOptions.vue";
 import OptimisationOptions from "./OptimisationOptions.vue";
 import { AppType, VisualisationTab } from "../../store/appState/state";
-import GraphSettings from "./GraphSettings.vue";
+import GraphSettings from "../GraphSettings.vue";
 import ParameterSets from "./ParameterSets.vue";
 import AdvancedSettings from "./AdvancedSettings.vue";
 
 export default defineComponent({
     name: "OptionsTab",
     components: {
+        GraphConfigsCollapsible,
         ParameterSets,
         LinkData,
         OptimisationOptions,
diff --git a/app/static/src/app/components/run/RunPlot.vue b/app/static/src/app/components/run/RunPlot.vue
index 51841f68c..4754691e9 100644
--- a/app/static/src/app/components/run/RunPlot.vue
+++ b/app/static/src/app/components/run/RunPlot.vue
@@ -4,16 +4,23 @@
         :placeholder-message="placeholderMessage"
         :end-time="endTime"
         :plot-data="allPlotData"
-        :redrawWatches="solution ? [solution, allFitData, selectedVariables, parameterSetSolutions, displayNames] : []"
+        :redrawWatches="
+            solution ? [solution, allFitData, selectedVariables, parameterSetSolutions, displayNames, graphCount] : []
+        "
+        :linked-x-axis="linkedXAxis"
+        :fit-plot="false"
+        :graph-index="graphIndex"
+        :graph-config="graphConfig"
+        @updateXAxis="updateXAxis"
     >
         <slot></slot>
     </wodin-plot>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from "vue";
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, PropType } from "vue";
 import { useStore } from "vuex";
-import { PlotData } from "plotly.js-basic-dist-min";
+import { LayoutAxis, PlotData } from "plotly.js-basic-dist-min";
 import { FitDataGetter } from "../../store/fitData/getters";
 import { odinToPlotly, allFitDataToPlotly, WodinPlotData, filterSeriesSet } from "../../plot";
 import WodinPlot from "../WodinPlot.vue";
@@ -22,101 +29,98 @@ import { OdinSolution, Times } from "../../types/responseTypes";
 import { Dict } from "../../types/utilTypes";
 import { runPlaceholderMessage } from "../../utils";
 import { ParameterSet } from "../../store/run/state";
+import { GraphConfig } from "../../store/graphs/state";
 
-export default defineComponent({
-    name: "RunPlot",
-    props: {
-        fadePlot: Boolean
-    },
-    components: {
-        WodinPlot
-    },
-    setup() {
-        const store = useStore();
-
-        const solution = computed(() => store.state.run.resultOde?.solution);
-        const visibleParameterSetNames = computed(() => store.getters[`run/${RunGetter.visibleParameterSetNames}`]);
-        const parameterSets = computed(() => store.state.run.parameterSets as ParameterSet[]);
-        const displayNames = computed(() => {
-            return parameterSets.value.map((paramSet) => paramSet.displayName);
-        });
-
-        const parameterSetSolutions = computed(() => {
-            const result = {} as Dict<OdinSolution>;
-            Object.keys(store.state.run.parameterSetResults).forEach((name) => {
-                const sln = store.state.run.parameterSetResults[name].solution;
-                if (sln && visibleParameterSetNames.value.includes(name)) {
-                    result[name] = sln;
-                }
-            });
-            return result;
-        });
-
-        const endTime = computed(() => store.state.run.endTime);
-
-        const palette = computed(() => store.state.model.paletteModel);
-
-        const allFitData = computed(() => store.getters[`fitData/${FitDataGetter.allData}`]);
-
-        const selectedVariables = computed(() => store.state.graphs.config[0].selectedVariables);
-        const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, false));
-
-        const allPlotData = (start: number, end: number, points: number): WodinPlotData => {
-            const options = {
-                mode: "grid",
-                tStart: start,
-                tEnd: end,
-                nPoints: points
-            };
-            const result = solution.value && solution.value(options);
-            if (!result) {
-                return [];
-            }
-
-            // 1. Current parameter values
-            const plotOptions = { showLegend: true, includeLegendGroup: true };
-            const allData = [
-                ...odinToPlotly(filterSeriesSet(result, selectedVariables.value), palette.value, plotOptions),
-                ...allFitDataToPlotly(allFitData.value, palette.value, start, end)
-            ];
-
-            // 2. Parameter sets
-            const lineStylesForParamSets = computed(() => store.getters[`run/${RunGetter.lineStylesForParameterSets}`]);
-
-            const updatePlotTraceNameWithParameterSetName = (plotTrace: Partial<PlotData>, setName: string) => {
-                // eslint-disable-next-line no-param-reassign
-                plotTrace.name = `${plotTrace.name} (${setName})`;
-            };
-
-            Object.keys(parameterSetSolutions.value).forEach((name) => {
-                const paramSetSln = parameterSetSolutions.value[name];
-                const paramSetResult = paramSetSln!(options as Times);
-
-                const dash = lineStylesForParamSets.value[name];
-                if (paramSetResult) {
-                    const filteredSetData = filterSeriesSet(paramSetResult, selectedVariables.value);
-                    const paramSetOptions = { dash, showLegend: false, includeLegendGroup: true };
-                    const plotData = odinToPlotly(filteredSetData, palette.value, paramSetOptions);
-                    const currentParamSet = parameterSets.value.find((paramSet) => paramSet.name === name);
-                    plotData.forEach((plotTrace) => {
-                        updatePlotTraceNameWithParameterSetName(plotTrace, currentParamSet!.displayName);
-                    });
-                    allData.push(...plotData);
-                }
-            });
-            return allData;
-        };
-
-        return {
-            placeholderMessage,
-            endTime,
-            solution,
-            allFitData,
-            allPlotData,
-            selectedVariables,
-            parameterSetSolutions,
-            displayNames
-        };
-    }
+const props = defineProps({
+    fadePlot: Boolean,
+    graphIndex: { type: Number, required: true },
+    graphConfig: { type: Object as PropType<GraphConfig>, required: true },
+    linkedXAxis: { type: Object as PropType<Partial<LayoutAxis> | null>, required: true }
+});
+
+const emit = defineEmits<{
+    (e: "updateXAxis", options: Partial<LayoutAxis>): void;
+}>();
+
+const store = useStore();
+
+const solution = computed(() => store.state.run.resultOde?.solution);
+const visibleParameterSetNames = computed(() => store.getters[`run/${RunGetter.visibleParameterSetNames}`]);
+const parameterSets = computed(() => store.state.run.parameterSets as ParameterSet[]);
+const displayNames = computed(() => {
+    return parameterSets.value.map((paramSet) => paramSet.displayName);
+});
+
+const parameterSetSolutions = computed(() => {
+    const result = {} as Dict<OdinSolution>;
+    Object.keys(store.state.run.parameterSetResults).forEach((name) => {
+        const sln = store.state.run.parameterSetResults[name].solution;
+        if (sln && visibleParameterSetNames.value.includes(name)) {
+            result[name] = sln;
+        }
+    });
+    return result;
 });
+
+const endTime = computed(() => store.state.run.endTime);
+
+const palette = computed(() => store.state.model.paletteModel);
+
+const allFitData = computed(() => store.getters[`fitData/${FitDataGetter.allData}`]);
+
+const selectedVariables = computed(() => props.graphConfig.selectedVariables);
+const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, false));
+
+// TODO: put this in the composable in mrc-5572
+const graphCount = computed(() => store.state.graphs.config.length);
+
+const allPlotData = (start: number, end: number, points: number): WodinPlotData => {
+    const options = {
+        mode: "grid",
+        tStart: start,
+        tEnd: end,
+        nPoints: points
+    };
+    const result = solution.value && solution.value(options);
+    if (!result) {
+        return [];
+    }
+
+    // 1. Current parameter values
+    const plotOptions = { showLegend: true, includeLegendGroup: true };
+    const allData = [
+        ...odinToPlotly(filterSeriesSet(result, selectedVariables.value), palette.value, plotOptions),
+        ...allFitDataToPlotly(allFitData.value, palette.value, start, end, props.graphConfig.selectedVariables)
+    ];
+
+    // 2. Parameter sets
+    const lineStylesForParamSets = computed(() => store.getters[`run/${RunGetter.lineStylesForParameterSets}`]);
+
+    const updatePlotTraceNameWithParameterSetName = (plotTrace: Partial<PlotData>, setName: string) => {
+        // eslint-disable-next-line no-param-reassign
+        plotTrace.name = `${plotTrace.name} (${setName})`;
+    };
+
+    Object.keys(parameterSetSolutions.value).forEach((name) => {
+        const paramSetSln = parameterSetSolutions.value[name];
+        const paramSetResult = paramSetSln!(options as Times);
+
+        const dash = lineStylesForParamSets.value[name];
+        if (paramSetResult) {
+            const filteredSetData = filterSeriesSet(paramSetResult, selectedVariables.value);
+            const paramSetOptions = { dash, showLegend: false, includeLegendGroup: true };
+            const plotData = odinToPlotly(filteredSetData, palette.value, paramSetOptions);
+            const currentParamSet = parameterSets.value.find((paramSet) => paramSet.name === name);
+            plotData.forEach((plotTrace) => {
+                updatePlotTraceNameWithParameterSetName(plotTrace, currentParamSet!.displayName);
+            });
+            allData.push(...plotData);
+        }
+    });
+    return allData;
+};
+
+const updateXAxis = (options: Partial<LayoutAxis>) => {
+    emit("updateXAxis", options);
+};
 </script>
diff --git a/app/static/src/app/components/run/RunStochasticPlot.vue b/app/static/src/app/components/run/RunStochasticPlot.vue
index a655090ef..5429f81d9 100644
--- a/app/static/src/app/components/run/RunStochasticPlot.vue
+++ b/app/static/src/app/components/run/RunStochasticPlot.vue
@@ -4,32 +4,52 @@
         :placeholder-message="placeholderMessage"
         :end-time="endTime"
         :plot-data="allPlotData"
-        :redrawWatches="solution ? [solution] : []"
+        :redrawWatches="solution ? [solution, graphCount] : []"
+        :linked-x-axis="linkedXAxis"
+        :fit-plot="false"
+        :graph-index="graphIndex"
+        :graph-config="graphConfig"
+        @updateXAxis="updateXAxis"
     >
         <slot></slot>
     </wodin-plot>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 import { useStore } from "vuex";
+import { LayoutAxis } from "plotly.js-basic-dist-min";
 import { WodinPlotData, discreteSeriesSetToPlotly, filterSeriesSet } from "../../plot";
 import WodinPlot from "../WodinPlot.vue";
 import { runPlaceholderMessage } from "../../utils";
 import { StochasticConfig } from "../../types/responseTypes";
+import { GraphConfig } from "../../store/graphs/state";
 
 export default defineComponent({
     name: "RunStochasticPlot",
     props: {
-        fadePlot: Boolean
+        fadePlot: Boolean,
+        graphIndex: {
+            type: Number,
+            required: true
+        },
+        graphConfig: {
+            type: Object as PropType<GraphConfig>,
+            required: true
+        },
+        linkedXAxis: {
+            type: Object as PropType<Partial<LayoutAxis> | null>,
+            required: true
+        }
     },
     components: {
         WodinPlot
     },
-    setup() {
+    emits: ["updateXAxis"],
+    setup(props, { emit }) {
         const store = useStore();
 
-        const selectedVariables = computed(() => store.state.graphs.config[0].selectedVariables);
+        const selectedVariables = computed(() => props.graphConfig.selectedVariables);
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, false));
 
         const solution = computed(() => store.state.run.resultDiscrete?.solution);
@@ -38,6 +58,9 @@ export default defineComponent({
 
         const palette = computed(() => store.state.model.paletteModel);
 
+        // TODO: put this in the composable in mrc-5572
+        const graphCount = computed(() => store.state.graphs.config.length);
+
         const allPlotData = (start: number, end: number, points: number): WodinPlotData => {
             const result =
                 solution.value &&
@@ -61,11 +84,17 @@ export default defineComponent({
             );
         };
 
+        const updateXAxis = (options: Partial<LayoutAxis>) => {
+            emit("updateXAxis", options);
+        };
+
         return {
             placeholderMessage,
             endTime,
+            graphCount,
             allPlotData,
-            solution
+            solution,
+            updateXAxis
         };
     }
 });
diff --git a/app/static/src/app/components/run/RunTab.vue b/app/static/src/app/components/run/RunTab.vue
index 805abc78b..274a7581e 100644
--- a/app/static/src/app/components/run/RunTab.vue
+++ b/app/static/src/app/components/run/RunTab.vue
@@ -4,12 +4,29 @@
             <button class="btn btn-primary" id="run-btn" :disabled="!canRunModel" @click="runModel">Run model</button>
         </div>
         <action-required-message :message="updateMsg"></action-required-message>
-        <run-stochastic-plot v-if="isStochastic" :fade-plot="!!updateMsg"></run-stochastic-plot>
-        <run-plot v-else :fade-plot="!!updateMsg" :model-fit="false">
-            <div v-if="sumOfSquares">
-                <span>Sum of squares: {{ sumOfSquares }}</span>
-            </div>
-        </run-plot>
+        <template v-for="(config, index) in graphConfigs" :key="config.id">
+            <run-stochastic-plot
+                v-if="isStochastic"
+                :fade-plot="!!updateMsg"
+                :graph-config="config"
+                :graph-index="index"
+                :linked-x-axis="xAxis"
+                @updateXAxis="updateXAxis"
+            ></run-stochastic-plot>
+            <run-plot
+                v-else
+                :fade-plot="!!updateMsg"
+                :model-fit="false"
+                :graph-config="config"
+                :graph-index="index"
+                :linked-x-axis="xAxis"
+                @updateXAxis="updateXAxis"
+            >
+            </run-plot>
+        </template>
+        <div v-if="sumOfSquares">
+            <span id="squares">Sum of squares: {{ sumOfSquares }}</span>
+        </div>
         <error-info :error="error"></error-info>
         <div>
             <button
@@ -40,8 +57,9 @@
 
 <script lang="ts">
 import { useStore } from "vuex";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, Ref, ref } from "vue";
 import VueFeather from "vue-feather";
+import { LayoutAxis } from "plotly.js-basic-dist-min";
 import { RunMutation } from "../../store/run/mutations";
 import RunPlot from "./RunPlot.vue";
 import ActionRequiredMessage from "../ActionRequiredMessage.vue";
@@ -72,6 +90,8 @@ export default defineComponent({
         const store = useStore();
 
         const showDownloadOutput = ref(false);
+        const xAxis: Ref<Partial<LayoutAxis>> = ref({ autorange: true });
+
         const isStochastic = computed(() => store.state.appType === AppType.Stochastic);
 
         const error = computed(() => {
@@ -83,6 +103,7 @@ export default defineComponent({
 
         const hasRunner = computed(() => store.getters[`model/${ModelGetter.hasRunner}`]);
         const allSelectedVariables = computed(() => store.getters[`graphs/${GraphsGetter.allSelectedVariables}`]);
+        const graphConfigs = computed(() => store.state.graphs.config);
 
         // Enable run button if model has initialised and compile is not required
         const canRunModel = computed(() => {
@@ -120,6 +141,10 @@ export default defineComponent({
         const download = (payload: { fileName: string; points: number }) =>
             store.dispatch(`run/${RunAction.DownloadOutput}`, payload);
 
+        const updateXAxis = (newAxis: Partial<LayoutAxis>) => {
+            xAxis.value = newAxis;
+        };
+
         return {
             canRunModel,
             isStochastic,
@@ -132,7 +157,10 @@ export default defineComponent({
             canDownloadOutput,
             downloadUserFileName,
             toggleShowDownloadOutput,
-            download
+            download,
+            graphConfigs,
+            xAxis,
+            updateXAxis
         };
     }
 });
diff --git a/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue b/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue
index 6f65fc38e..65599df9e 100644
--- a/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue
+++ b/app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from "vue";
 import { AxisType, newPlot, Plots } from "plotly.js-basic-dist-min";
 import { useStore } from "vuex";
 import { config, fadePlotStyle, filterUserTypeSeriesSet, margin, odinToPlotly, updatePlotTraceName } from "../../plot";
@@ -23,12 +23,14 @@ import { Dict } from "../../types/utilTypes";
 import WodinPlotDataSummary from "../WodinPlotDataSummary.vue";
 import { ParameterSet } from "../../store/run/state";
 import { verifyValidPlotSettingsTime } from "./support";
+import { GraphConfig } from "../../store/graphs/state";
 
 export default defineComponent({
     name: "SensitivitySummaryPlot",
     components: { WodinPlotDataSummary },
     props: {
-        fadePlot: Boolean
+        fadePlot: Boolean,
+        graphConfig: { type: Object as PropType<GraphConfig>, required: true }
     },
     setup(props) {
         const store = useStore();
@@ -39,7 +41,7 @@ export default defineComponent({
         const batch = computed(() => store.state.sensitivity.result?.batch);
         const plotSettings = computed(() => store.state.sensitivity.plotSettings);
         const palette = computed(() => store.state.model.paletteModel);
-        const selectedVariables = computed(() => store.state.graphs.config[0].selectedVariables);
+        const selectedVariables = computed(() => props.graphConfig.selectedVariables);
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, true));
 
         const xAxisSettings = computed(() => {
@@ -54,7 +56,8 @@ export default defineComponent({
 
         const yAxisSettings = computed(() => {
             const isNotTimePlot = plotSettings.value.plotType !== SensitivityPlotType.TimeAtExtreme;
-            const logScale = store.state.graphs.settings.logScaleYAxis && isNotTimePlot;
+
+            const logScale = props.graphConfig.settings.logScaleYAxis && isNotTimePlot;
             const type = logScale ? "log" : ("linear" as AxisType);
             return { type };
         });
diff --git a/app/static/src/app/components/sensitivity/SensitivityTab.vue b/app/static/src/app/components/sensitivity/SensitivityTab.vue
index 8f141f87b..1e911c1f6 100644
--- a/app/static/src/app/components/sensitivity/SensitivityTab.vue
+++ b/app/static/src/app/components/sensitivity/SensitivityTab.vue
@@ -11,8 +11,15 @@
             >
         </div>
         <action-required-message :message="updateMsg"></action-required-message>
-        <sensitivity-traces-plot v-if="tracesPlot" :fade-plot="!!updateMsg"></sensitivity-traces-plot>
-        <sensitivity-summary-plot v-else :fade-plot="!!updateMsg"></sensitivity-summary-plot>
+        <template v-for="(config, index) in graphConfigs" :key="config.id">
+            <sensitivity-traces-plot
+                v-if="tracesPlot"
+                :fade-plot="!!updateMsg"
+                :graph-config="config"
+                :graph-index="index"
+            ></sensitivity-traces-plot>
+            <sensitivity-summary-plot v-else :fade-plot="!!updateMsg" :graph-config="config"></sensitivity-summary-plot>
+        </template>
         <div id="sensitivity-running" v-if="running">
             <loading-spinner class="inline-spinner" size="xs"></loading-spinner>
             <span class="ms-2">{{ sensitivityProgressMsg }}</span>
@@ -65,6 +72,8 @@ export default defineComponent({
             );
         });
 
+        const graphConfigs = computed(() => store.state.graphs.config);
+
         const runSensitivity = () => {
             store.commit(`${namespace}/${SensitivityMutation.SetLoading}`, true);
             // All of the code for sensitivity plot happens synchronously
@@ -91,6 +100,7 @@ export default defineComponent({
         const error = computed(() => store.state.sensitivity.result?.error);
 
         return {
+            graphConfigs,
             canRunSensitivity,
             running,
             sensitivityProgressMsg,
diff --git a/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue b/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
index c7bb0729a..ab166ac6a 100644
--- a/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
+++ b/app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue
@@ -6,16 +6,26 @@
         :plot-data="allPlotData"
         :redrawWatches="
             solutions
-                ? [...solutions, allFitData, selectedVariables, parameterSetBatches, parameterSetDisplayNames]
+                ? [
+                      ...solutions,
+                      allFitData,
+                      selectedVariables,
+                      parameterSetBatches,
+                      parameterSetDisplayNames,
+                      graphCount
+                  ]
                 : []
         "
+        :fit-plot="false"
+        :graph-index="graphIndex"
+        :graph-config="graphConfig"
     >
         <slot></slot>
     </wodin-plot>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 import { useStore } from "vuex";
 import { PlotData } from "plotly.js-basic-dist-min";
 import { FitDataGetter } from "../../store/fitData/getters";
@@ -35,16 +45,19 @@ import { RunGetter } from "../../store/run/getters";
 import { Dict } from "../../types/utilTypes";
 import { ParameterSet } from "../../store/run/state";
 import { SensitivityMutation } from "../../store/sensitivity/mutations";
+import { GraphConfig } from "../../store/graphs/state";
 
 export default defineComponent({
     name: "SensitivityTracesPlot",
     props: {
-        fadePlot: Boolean
+        fadePlot: Boolean,
+        graphIndex: { type: Number, required: true },
+        graphConfig: { type: Object as PropType<GraphConfig>, required: true }
     },
     components: {
         WodinPlot
     },
-    setup() {
+    setup(props) {
         const store = useStore();
 
         const solutions = computed(() => store.state.sensitivity.result?.batch?.solutions || []);
@@ -78,7 +91,10 @@ export default defineComponent({
 
         const palette = computed(() => store.state.model.paletteModel);
 
-        const selectedVariables = computed(() => store.state.graphs.config[0].selectedVariables);
+        const selectedVariables = computed(() => props.graphConfig.selectedVariables);
+
+        // TODO: put this in the composable in mrc-5572
+        const graphCount = computed(() => store.state.graphs.config.length);
 
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, true));
 
@@ -184,7 +200,15 @@ export default defineComponent({
                 });
 
                 if (allFitData.value) {
-                    result.push(...allFitDataToPlotly(allFitData.value, palette.value, start, end));
+                    result.push(
+                        ...allFitDataToPlotly(
+                            allFitData.value,
+                            palette.value,
+                            start,
+                            end,
+                            props.graphConfig.selectedVariables
+                        )
+                    );
                 }
             }
 
@@ -200,7 +224,8 @@ export default defineComponent({
             allFitData,
             selectedVariables,
             parameterSetBatches,
-            parameterSetDisplayNames
+            parameterSetDisplayNames,
+            graphCount
         };
     }
 });
diff --git a/app/static/src/app/excel/wodinModelOutputDownload.ts b/app/static/src/app/excel/wodinModelOutputDownload.ts
index 47cc1db46..3d20110e7 100644
--- a/app/static/src/app/excel/wodinModelOutputDownload.ts
+++ b/app/static/src/app/excel/wodinModelOutputDownload.ts
@@ -47,7 +47,6 @@ export class WodinModelOutputDownload extends WodinExcelDownload {
                 nPoints: this._points
             });
             const selectedVariables = this._rootGetters[`graphs/${GraphsGetter.allSelectedVariables}`];
-            console.log(`selectedVariables are ${JSON.stringify(selectedVariables)}`);
 
             const worksheet = WodinModelOutputDownload._generateModelledOutput(
                 selectedVariables,
diff --git a/app/static/src/app/plot.ts b/app/static/src/app/plot.ts
index 09c008f72..5667d9ef8 100644
--- a/app/static/src/app/plot.ts
+++ b/app/static/src/app/plot.ts
@@ -1,4 +1,4 @@
-import { Dash, PlotData } from "plotly.js-basic-dist-min";
+import { Dash, Margin, PlotData } from "plotly.js-basic-dist-min";
 import { format } from "d3-format";
 import { Palette, paletteData } from "./palette";
 import type { AllFitData, FitData, FitDataLink } from "./store/fitData/state";
@@ -14,7 +14,7 @@ export const fadePlotStyle = "opacity:0.5;";
 // legend.
 export const margin = {
     t: 25
-};
+} as Partial<Margin>;
 
 export const config = {
     responsive: true
@@ -141,7 +141,8 @@ export function allFitDataToPlotly(
     allFitData: AllFitData | null,
     paletteModel: Palette,
     start: number,
-    end: number
+    end: number,
+    selectedVariables: string[]
 ): WodinPlotData {
     if (!allFitData) {
         return [];
@@ -149,16 +150,26 @@ export function allFitDataToPlotly(
     const { data, linkedVariables, timeVariable } = allFitData;
     const filteredData = filterData(data, timeVariable, start, end);
     const palette = paletteData(Object.keys(linkedVariables));
-    return Object.keys(linkedVariables).map((name: string) => ({
-        name,
-        x: filteredData.map((row: Dict<number>) => row[timeVariable]),
-        y: filteredData.map((row: Dict<number>) => row[name]),
-        mode: "markers",
-        type: "scatter",
-        marker: {
-            color: linkedVariables[name] ? paletteModel[linkedVariables[name]!] : palette[name]
+
+    return Object.keys(linkedVariables).map((name: string) => {
+        let color = palette[name];
+        const variable = linkedVariables[name];
+        if (variable) {
+            // If there is a linked variable, only show data if the variable is selected - if not selected, render the
+            // series, but as transparent so that all graph x axes are consistent
+            color = selectedVariables.includes(variable) ? paletteModel[variable] : "transparent";
         }
-    }));
+        return {
+            name,
+            x: filteredData.map((row: Dict<number>) => row[timeVariable]),
+            y: filteredData.map((row: Dict<number>) => row[name]),
+            mode: "markers",
+            type: "scatter",
+            marker: {
+                color
+            }
+        };
+    });
 }
 
 const lineStyles = ["dot", "dash", "longdash", "dashdot", "longdashdot"];
diff --git a/app/static/src/app/serialise.ts b/app/static/src/app/serialise.ts
index 8de2d76e3..6e153b5a7 100644
--- a/app/static/src/app/serialise.ts
+++ b/app/static/src/app/serialise.ts
@@ -15,11 +15,13 @@ import {
     SerialisedRunResult,
     SerialisedSensitivityResult,
     SerialisedModelFitState,
-    SerialisedMultiSensitivityState
+    SerialisedMultiSensitivityState,
+    SerialisedGraphsState
 } from "./types/serialisationTypes";
-import { GraphsState } from "./store/graphs/state";
+import { GraphConfig, GraphsState, defaultGraphSettings } from "./store/graphs/state";
 import { Dict } from "./types/utilTypes";
 import { MultiSensitivityState } from "./store/multiSensitivity/state";
+import { newUid } from "./utils";
 
 function serialiseCode(code: CodeState): CodeState {
     return {
@@ -140,8 +142,28 @@ function serialiseModelFit(modelFit: ModelFitState): SerialisedModelFitState {
     };
 }
 
-export const serialiseGraphs = (state: GraphsState): GraphsState => {
-    return { ...state };
+// Do not include graph config uids in serialised as we don't want them to contribute to duplicate checks
+export const serialiseGraphs = (state: GraphsState): SerialisedGraphsState => {
+    return {
+        ...state,
+        config: state.config.map((c: GraphConfig) => ({
+            selectedVariables: c.selectedVariables,
+            unselectedVariables: c.unselectedVariables,
+            settings: c.settings
+        }))
+    };
+};
+
+export const deserialiseGraphs = (serialised: SerialisedGraphsState): GraphsState => {
+    return {
+        ...serialised,
+        config: serialised.config.map((s) => ({
+            id: newUid(),
+            selectedVariables: s.selectedVariables,
+            unselectedVariables: s.unselectedVariables,
+            settings: s.settings
+        }))
+    };
 };
 
 export const serialiseState = (state: AppState): string => {
@@ -168,6 +190,7 @@ export const deserialiseState = (targetState: AppState, serialised: SerialisedAp
     Object.assign(targetState, {
         ...targetState,
         ...serialised,
+        graphs: serialised.graphs ? deserialiseGraphs(serialised.graphs) : targetState.graphs,
         persisted: true
     });
 
@@ -184,8 +207,10 @@ export const deserialiseState = (targetState: AppState, serialised: SerialisedAp
 
         targetState.graphs.config = [
             {
+                id: graphs!.config[0].id,
                 selectedVariables,
-                unselectedVariables
+                unselectedVariables,
+                settings: defaultGraphSettings()
             }
         ];
     }
diff --git a/app/static/src/app/store/basic/basic.ts b/app/static/src/app/store/basic/basic.ts
index 024b18f57..b05493b1b 100644
--- a/app/static/src/app/store/basic/basic.ts
+++ b/app/static/src/app/store/basic/basic.ts
@@ -9,7 +9,7 @@ import { code } from "../code/code";
 import { sensitivity } from "../sensitivity/sensitivity";
 import { logMutations, persistState } from "../plugins";
 import { AppType, VisualisationTab } from "../appState/state";
-import { newSessionId } from "../../utils";
+import { newUid } from "../../utils";
 import { sessions } from "../sessions/sessions";
 import { versions } from "../versions/versions";
 import { graphs } from "../graphs/graphs";
@@ -22,7 +22,7 @@ const language = getStoreModule();
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const defaultState: () => any = () => {
     return {
-        sessionId: newSessionId(),
+        sessionId: newUid(),
         sessionLabel: null,
         appType: AppType.Basic,
         openVisualisationTab: VisualisationTab.Run,
diff --git a/app/static/src/app/store/fit/fit.ts b/app/static/src/app/store/fit/fit.ts
index 6986a46fa..03f6a545d 100644
--- a/app/static/src/app/store/fit/fit.ts
+++ b/app/static/src/app/store/fit/fit.ts
@@ -11,7 +11,7 @@ import { fitData } from "../fitData/fitData";
 import { modelFit } from "../modelFit/modelFit";
 import { AppType, VisualisationTab } from "../appState/state";
 import { logMutations, persistState } from "../plugins";
-import { newSessionId } from "../../utils";
+import { newUid } from "../../utils";
 import { sessions } from "../sessions/sessions";
 import { versions } from "../versions/versions";
 import { graphs } from "../graphs/graphs";
@@ -24,7 +24,7 @@ const language = getStoreModule();
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const defaultState: () => any = () => {
     return {
-        sessionId: newSessionId(),
+        sessionId: newUid(),
         sessionLabel: null,
         appType: AppType.Fit,
         openVisualisationTab: VisualisationTab.Run,
diff --git a/app/static/src/app/store/graphs/actions.ts b/app/static/src/app/store/graphs/actions.ts
index 4e76099cf..806e06638 100644
--- a/app/static/src/app/store/graphs/actions.ts
+++ b/app/static/src/app/store/graphs/actions.ts
@@ -2,10 +2,12 @@ import { ActionTree } from "vuex";
 import { GraphsMutation } from "./mutations";
 import { AppState, AppType } from "../appState/state";
 import { FitDataAction } from "../fitData/actions";
-import { GraphsState } from "./state";
+import { GraphsState, defaultGraphSettings } from "./state";
+import { newUid } from "../../utils";
 
 export enum GraphsAction {
-    UpdateSelectedVariables = "UpdateSelectedVariables"
+    UpdateSelectedVariables = "UpdateSelectedVariables",
+    NewGraph = "NewGraph"
 }
 
 export const actions: ActionTree<GraphsState, AppState> = {
@@ -13,13 +15,26 @@ export const actions: ActionTree<GraphsState, AppState> = {
         const { commit, dispatch, rootState } = context;
         // Maintain unselected variables too, so we know which variables had been explicitly unselected when model
         // updates
-        const unselectedVariables =
-            rootState.model.odinModelResponse?.metadata?.variables.filter(
-                (s) => !payload.selectedVariables.includes(s)
-            ) || [];
-        commit(GraphsMutation.SetSelectedVariables, { ...payload, unselectedVariables });
+        const allVariables = rootState.model.odinModelResponse?.metadata?.variables || [];
+        const unselectedVariables = allVariables.filter((s) => !payload.selectedVariables.includes(s)) || [];
+        // sort the selected variables to match the order in the model
+        const selectedVariables = payload.selectedVariables.sort((a, b) =>
+            allVariables.indexOf(a) > allVariables.indexOf(b) ? 1 : -1
+        );
+
+        commit(GraphsMutation.SetSelectedVariables, { ...payload, selectedVariables, unselectedVariables });
         if (rootState.appType === AppType.Fit) {
             dispatch(`fitData/${FitDataAction.UpdateLinkedVariables}`, null, { root: true });
         }
+    },
+    NewGraph(context) {
+        const { rootState, commit } = context;
+        const unselectedVariables = [...(rootState.model.odinModelResponse?.metadata?.variables || [])];
+        commit(GraphsMutation.AddGraph, {
+            id: newUid(),
+            settings: defaultGraphSettings(),
+            selectedVariables: [],
+            unselectedVariables
+        });
     }
 };
diff --git a/app/static/src/app/store/graphs/getters.ts b/app/static/src/app/store/graphs/getters.ts
index 0f370f182..6cd947f5a 100644
--- a/app/static/src/app/store/graphs/getters.ts
+++ b/app/static/src/app/store/graphs/getters.ts
@@ -3,15 +3,39 @@ import { GraphsState } from "./state";
 import { AppState } from "../appState/state";
 
 export enum GraphsGetter {
-    allSelectedVariables = "allSelectedVariables"
+    allSelectedVariables = "allSelectedVariables",
+    hiddenVariables = "hiddenVariables", // variable which are not selected in any graph
+    legendWidth = "legendWidth" // plot legend width, in pixels, derived from max selected variable name length
 }
 
 export interface GraphsGetters {
     [GraphsGetter.allSelectedVariables]: Getter<GraphsState, AppState>;
+    [GraphsGetter.hiddenVariables]: Getter<GraphsState, AppState>;
+    [GraphsGetter.legendWidth]: Getter<GraphsState, AppState>;
 }
 
+export interface GraphsGettersValues {
+    [GraphsGetter.allSelectedVariables]: string[];
+    [GraphsGetter.hiddenVariables]: string[];
+    [GraphsGetter.legendWidth]: number;
+}
+
+const LEGEND_LINE_PADDING = 40;
+const LEGEND_WIDTH_PER_CHAR = 10;
+
 export const getters: GraphsGetters & GetterTree<GraphsState, AppState> = {
     [GraphsGetter.allSelectedVariables]: (state: GraphsState): string[] => {
-        return state.config.flatMap((c) => c.selectedVariables);
+        return state.config.flatMap((c) => c.selectedVariables); // TODO: dedupe, in mrc-5443
+    },
+    [GraphsGetter.hiddenVariables]: (_, graphsGetters: GraphsGettersValues, rootState: AppState): string[] => {
+        const allSelected = graphsGetters[GraphsGetter.allSelectedVariables];
+        return rootState.model.odinModelResponse?.metadata?.variables.filter((s) => !allSelected.includes(s)) || [];
+    },
+    [GraphsGetter.legendWidth]: (_, graphsGetters): number => {
+        // Heuristic for setting graph legend width based on string length of longest variable name
+        const longestVar = graphsGetters[GraphsGetter.allSelectedVariables].sort((a: string, b: string) =>
+            a.length < b.length ? 1 : -1
+        )[0];
+        return longestVar.length * LEGEND_WIDTH_PER_CHAR + LEGEND_LINE_PADDING;
     }
 };
diff --git a/app/static/src/app/store/graphs/graphs.ts b/app/static/src/app/store/graphs/graphs.ts
index 4a1599202..649cd02f1 100644
--- a/app/static/src/app/store/graphs/graphs.ts
+++ b/app/static/src/app/store/graphs/graphs.ts
@@ -1,25 +1,24 @@
-import { GraphsState } from "./state";
+import { defaultGraphSettings, GraphsState } from "./state";
 import { actions } from "./actions";
 import { getters } from "./getters";
 import { mutations } from "./mutations";
+import { newUid } from "../../utils";
 
-export const defaultState: GraphsState = {
+export const defaultState = (): GraphsState => ({
     config: [
         {
+            id: newUid(),
             selectedVariables: [],
-            unselectedVariables: []
+            unselectedVariables: [],
+            settings: defaultGraphSettings()
         }
     ],
-    settings: {
-        logScaleYAxis: false,
-        lockYAxis: false,
-        yAxisRange: [0, 0]
-    }
-};
+    fitGraphSettings: defaultGraphSettings()
+});
 
 export const graphs = {
     namespaced: true,
-    state: defaultState,
+    state: defaultState(),
     actions,
     getters,
     mutations
diff --git a/app/static/src/app/store/graphs/mutations.ts b/app/static/src/app/store/graphs/mutations.ts
index c24eb2e35..8cc812d15 100644
--- a/app/static/src/app/store/graphs/mutations.ts
+++ b/app/static/src/app/store/graphs/mutations.ts
@@ -1,10 +1,15 @@
 import { MutationTree } from "vuex";
-import { YAxisRange, GraphsState } from "./state";
+import { YAxisRange, GraphsState, GraphConfig } from "./state";
 
 export enum GraphsMutation {
     SetLogScaleYAxis = "SetLogScaleYAxis",
     SetLockYAxis = "SetLockYAxis",
     SetYAxisRange = "SetYAxisRange",
+    SetFitLogScaleYAxis = "SetFitLogScaleYAxis",
+    SetFitLockYAxis = "SetFitLockYAxis",
+    SetFitYAxisRange = "SetFitYAxisRange",
+    AddGraph = "AddGraph",
+    DeleteGraph = "DeleteGraph",
     SetSelectedVariables = "SetSelectedVariables"
 }
 
@@ -15,21 +20,40 @@ export interface SetSelectedVariablesPayload {
 }
 
 export const mutations: MutationTree<GraphsState> = {
-    [GraphsMutation.SetLogScaleYAxis](state: GraphsState, payload: boolean) {
-        state.settings.logScaleYAxis = payload;
+    [GraphsMutation.SetLogScaleYAxis](state: GraphsState, payload: { graphIndex: number; value: boolean }) {
+        state.config[payload.graphIndex].settings.logScaleYAxis = payload.value;
     },
 
-    [GraphsMutation.SetLockYAxis](state: GraphsState, payload: boolean) {
-        state.settings.lockYAxis = payload;
+    [GraphsMutation.SetLockYAxis](state: GraphsState, payload: { graphIndex: number; value: boolean }) {
+        state.config[payload.graphIndex].settings.lockYAxis = payload.value;
     },
 
-    [GraphsMutation.SetYAxisRange](state: GraphsState, payload: YAxisRange) {
-        state.settings.yAxisRange = payload;
+    [GraphsMutation.SetYAxisRange](state: GraphsState, payload: { graphIndex: number; value: YAxisRange }) {
+        state.config[payload.graphIndex].settings.yAxisRange = payload.value;
+    },
+
+    [GraphsMutation.SetFitLogScaleYAxis](state: GraphsState, payload: boolean) {
+        state.fitGraphSettings.logScaleYAxis = payload;
+    },
+
+    [GraphsMutation.SetFitLockYAxis](state: GraphsState, payload: boolean) {
+        state.fitGraphSettings.lockYAxis = payload;
+    },
+
+    [GraphsMutation.SetFitYAxisRange](state: GraphsState, payload: YAxisRange) {
+        state.fitGraphSettings.yAxisRange = payload;
     },
 
     [GraphsMutation.SetSelectedVariables](state: GraphsState, payload: SetSelectedVariablesPayload) {
-        // We don't simply replace the GraphConfig in the index here, as that will eventually include GraphSettings too
         state.config[payload.graphIndex].selectedVariables = payload.selectedVariables;
         state.config[payload.graphIndex].unselectedVariables = payload.unselectedVariables;
+    },
+
+    [GraphsMutation.AddGraph](state: GraphsState, payload: GraphConfig) {
+        state.config.push(payload);
+    },
+
+    [GraphsMutation.DeleteGraph](state: GraphsState, payload: number) {
+        state.config.splice(payload, 1);
     }
 };
diff --git a/app/static/src/app/store/graphs/state.ts b/app/static/src/app/store/graphs/state.ts
index 57d385ece..86a341a76 100644
--- a/app/static/src/app/store/graphs/state.ts
+++ b/app/static/src/app/store/graphs/state.ts
@@ -1,17 +1,29 @@
 export type YAxisRange = [number, number];
 
+// User-adjustable settings for a given graph - log/linear y axis scale and lock y axis are selected via checkboxes,
+// yAxisRange is saved on data/variable update in order to implement lock y axis.
 export interface GraphSettings {
     logScaleYAxis: boolean;
     lockYAxis: boolean;
     yAxisRange: YAxisRange;
 }
 
+// GraphConfig holds all the configuration for the user-configurable array of graphs which will be shown on the Run
+// and Sensitivity tabs, both the variable selections and the graph settings.
 export interface GraphConfig {
+    id: string; // We need to keep a persistent id to identify configs in vue when a graph is deleted from the array
     selectedVariables: string[];
     unselectedVariables: string[]; // We keep track of unselected variables too so we can retain on model update
+    settings: GraphSettings;
 }
 
 export interface GraphsState {
     config: GraphConfig[];
-    settings: GraphSettings; // TODO: this will be replaced by per-graph settings in mrc-5442
+    fitGraphSettings: GraphSettings; // For Fit apps, the Fit tab graph needs to have its own settings
 }
+
+export const defaultGraphSettings = (): GraphSettings => ({
+    logScaleYAxis: false,
+    lockYAxis: false,
+    yAxisRange: [0, 0]
+});
diff --git a/app/static/src/app/store/stochastic/stochastic.ts b/app/static/src/app/store/stochastic/stochastic.ts
index 3a637e642..bf15867a6 100644
--- a/app/static/src/app/store/stochastic/stochastic.ts
+++ b/app/static/src/app/store/stochastic/stochastic.ts
@@ -8,7 +8,7 @@ import { run } from "../run/run";
 import { code } from "../code/code";
 import { sensitivity } from "../sensitivity/sensitivity";
 import { AppType, VisualisationTab } from "../appState/state";
-import { newSessionId } from "../../utils";
+import { newUid } from "../../utils";
 import { logMutations, persistState } from "../plugins";
 import { sessions } from "../sessions/sessions";
 import { versions } from "../versions/versions";
@@ -22,7 +22,7 @@ const language = getStoreModule();
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const defaultState: () => any = () => {
     return {
-        sessionId: newSessionId(),
+        sessionId: newUid(),
         sessionLabel: null,
         appType: AppType.Stochastic,
         openVisualisationTab: VisualisationTab.Run,
diff --git a/app/static/src/app/types/serialisationTypes.ts b/app/static/src/app/types/serialisationTypes.ts
index 5d0bc185e..35a3d1ce7 100644
--- a/app/static/src/app/types/serialisationTypes.ts
+++ b/app/static/src/app/types/serialisationTypes.ts
@@ -11,7 +11,7 @@ import { VisualisationTab } from "../store/appState/state";
 import { CodeState } from "../store/code/state";
 import { FitDataState } from "../store/fitData/state";
 import { Palette } from "../palette";
-import { GraphsState } from "../store/graphs/state";
+import { GraphSettings } from "../store/graphs/state";
 import { Dict } from "./utilTypes";
 
 export interface SerialisedRunResult {
@@ -73,6 +73,15 @@ export interface SerialisedModelFitState {
     error: null | WodinError;
 }
 
+export interface SerialisedGraphsState {
+    config: {
+        selectedVariables: string[];
+        unselectedVariables: string[];
+        settings: GraphSettings;
+    }[];
+    fitGraphSettings: GraphSettings;
+}
+
 export interface SerialisedAppState {
     openVisualisationTab: VisualisationTab;
     code: CodeState;
@@ -80,7 +89,7 @@ export interface SerialisedAppState {
     run: SerialisedRunState;
     sensitivity: SerialisedSensitivityState;
     multiSensitivity: SerialisedMultiSensitivityState;
-    graphs: GraphsState;
+    graphs: SerialisedGraphsState;
     fitData?: FitDataState;
     modelFit?: SerialisedModelFitState;
 }
diff --git a/app/static/src/app/utils.ts b/app/static/src/app/utils.ts
index 846aaffc6..34a00984a 100644
--- a/app/static/src/app/utils.ts
+++ b/app/static/src/app/utils.ts
@@ -203,7 +203,7 @@ export function generateBatchPars(
     };
 }
 
-export const newSessionId = (): string => uid(32);
+export const newUid = (): string => uid(32);
 
 export const joinStringsSentence = (strings: string[], last = " and ", sep = ", "): string => {
     const n = strings.length;
diff --git a/app/static/src/scss/style.scss b/app/static/src/scss/style.scss
index 161c84e05..bb4a94f60 100644
--- a/app/static/src/scss/style.scss
+++ b/app/static/src/scss/style.scss
@@ -116,3 +116,43 @@ $grey: #ccc;
     padding-top: 0;
     padding-bottom: 0;
 }
+
+.drop-zone {
+    border-width: 4px;
+    padding: 4px;
+    border-style: dashed;
+}
+
+.drop-zone-active {
+    border-color: #eee;
+}
+
+.drop-zone-inactive {
+    border-color: #fff;
+}
+
+.drop-zone-instruction {
+    min-height: 3rem;
+    background-color: #eee;
+    width: 100%;
+}
+
+.variable {
+    font-size: large;
+    cursor: pointer;
+}
+
+.variable-delete {
+    font-weight: normal;
+    margin-left: 0.3rem;
+    span {
+        opacity: 0.5;
+    }
+
+    button {
+        background-color: transparent;
+        border-width: 0;
+        color: white;
+        padding: 0;
+    }
+}
diff --git a/app/static/tests/e2e/code.etest.ts b/app/static/tests/e2e/code.etest.ts
index d1c210e05..3012dfdeb 100644
--- a/app/static/tests/e2e/code.etest.ts
+++ b/app/static/tests/e2e/code.etest.ts
@@ -1,6 +1,6 @@
 import { expect, test, Page } from "@playwright/test";
 import PlaywrightConfig from "../../playwright.config";
-import { saveSessionTimeout, writeCode } from "./utils";
+import { saveSessionTimeout, writeCode, expectGraphVariables } from "./utils";
 
 export const newValidCode = `## Derivatives
 deriv(y1) <- sigma * (y2 - y1)
@@ -83,8 +83,8 @@ test.describe("Code Tab tests", () => {
     const { timeout } = PlaywrightConfig;
 
     const getRunPlotOpacity = async (page: Page) => {
-        const plot = await page.locator(".wodin-plot-container");
-        return plot.evaluate((el) => window.getComputedStyle(el).getPropertyValue("opacity"));
+        const plotEl = await page.locator(".wodin-plot-container");
+        return plotEl.evaluate((el) => window.getComputedStyle(el).getPropertyValue("opacity"));
     };
 
     test("can update code, compile and run model", async ({ page }) => {
@@ -292,32 +292,65 @@ test.describe("Code Tab tests", () => {
         );
     });
 
-    test("can select and unselect variables", async ({ page }) => {
-        // unselect I
-        const iVariable = await page.locator(":nth-match(.selected-variables-panel span.variable, 2)");
-        await iVariable.click();
+    test("can hide and unhide variables", async ({ page }) => {
+        // drag I to Hidden Variables
+        const iVariable = await page.locator(":nth-match(.graph-config-panel span.variable, 2)");
+        const hiddenVariables = await page.locator(".hidden-variables-panel");
+        await iVariable.dragTo(hiddenVariables);
 
         // check plot no longer contains R series
-        await expect(await page.locator(".wodin-plot-data-summary-series").count()).toBe(2);
-        await expect(await page.locator(":nth-match(.wodin-plot-data-summary-series, 1)").getAttribute("name")).toBe(
-            "S"
-        );
-        await expect(await page.locator(":nth-match(.wodin-plot-data-summary-series, 2)").getAttribute("name")).toBe(
-            "R"
-        );
+        await expectGraphVariables(page, 0, ["S", "R"]);
 
-        // re-select I
-        await iVariable.click();
-        await expect(await page.locator(".wodin-plot-data-summary-series").count()).toBe(3);
-        await expect(await page.locator(":nth-match(.wodin-plot-data-summary-series, 1)").getAttribute("name")).toBe(
-            "S"
-        );
-        await expect(await page.locator(":nth-match(.wodin-plot-data-summary-series, 2)").getAttribute("name")).toBe(
-            "I"
+        // drag I back to Graph panel
+        const iVariableHidden = await page.locator(".hidden-variables-panel .variable");
+        const graphVariablesPanel = await page.locator(".graph-config-panel .drop-zone");
+        await iVariableHidden.dragTo(graphVariablesPanel);
+        await expectGraphVariables(page, 0, ["S", "I", "R"]);
+
+        // Can also click x button to hide variable
+        await page.click(":nth-match(.graph-config-panel .variable-delete, 1)");
+        await expectGraphVariables(page, 0, ["I", "R"]);
+    });
+
+    test("can add a graph, drag variables onto it and delete it", async ({ page }) => {
+        // Add graph
+        await page.click("#add-graph-btn");
+
+        // Check second graph has appeared with placeholder text, and second graph config panel is there
+        expect(await page.locator(":nth-match(.wodin-plot-container, 2)").textContent()).toBe(
+            "No variables are selected."
         );
-        await expect(await page.locator(":nth-match(.wodin-plot-data-summary-series, 3)").getAttribute("name")).toBe(
-            "R"
+        expect(await page.locator(":nth-match(.graph-config-panel .drop-zone, 2)").textContent()).toContain(
+            "Drag variables here to select them for this graph."
         );
+
+        // Drag variable to second graph
+        const sVariable = await page.locator(":nth-match(.graph-config-panel .variable, 1)");
+        const dragPositions = {
+            sourcePosition: { x: 5, y: 5 },
+            targetPosition: { x: 5, y: 5 }
+        };
+        await sVariable.dragTo(page.locator(":nth-match(.graph-config-panel .drop-zone, 2)"), dragPositions);
+
+        await expectGraphVariables(page, 0, ["I", "R"]);
+        await expectGraphVariables(page, 1, ["S"]);
+        await expect(page.locator(".hidden-variables-panel .variable")).toHaveCount(0);
+
+        // Drag a variable with Ctrl key to make copy
+        const iVariable = await page.locator(":nth-match(.graph-config-panel .variable, 1)");
+        await page.keyboard.down("Control");
+        await iVariable.dragTo(page.locator(":nth-match(.graph-config-panel .drop-zone, 2)"), dragPositions);
+        await page.keyboard.up("Control");
+        await expectGraphVariables(page, 0, ["I", "R"]);
+        await expectGraphVariables(page, 1, ["S", "I"]);
+
+        // Delete second graph
+        await page.click(":nth-match(.graph-config-panel .delete-graph, 2)");
+        await expect(page.locator(".graph-config-panel")).toHaveCount(1);
+        await expectGraphVariables(page, 0, ["I", "R"]);
+
+        // First graph should not be deletable
+        await expect(page.locator(".delete-graph")).toHaveCount(0);
     });
 
     test("can display help dialog", async ({ page }) => {
@@ -365,4 +398,14 @@ test.describe("Code Tab tests", () => {
         const lineElement = await page.locator(`.view-overlays div:nth-child(${3}) >> div`);
         expect(lineElement).toHaveClass("cdr editor-warning-background");
     });
+
+    test("can change graph setting for log scale y axis from code tab", async ({ page }) => {
+        await page.locator(".log-scale-y-axis input").click();
+        // should update y axis tick
+        const tickSelector = ":nth-match(.plotly .ytick text, 2)";
+        await expect(await page.innerHTML(tickSelector)).toBe("10n");
+        // change back to linear
+        await page.locator(".log-scale-y-axis input").click();
+        await expect(await page.innerHTML(tickSelector)).toBe("0.2M");
+    });
 });
diff --git a/app/static/tests/e2e/fit.etest.ts b/app/static/tests/e2e/fit.etest.ts
index 3a88fe89f..f6c29a9de 100644
--- a/app/static/tests/e2e/fit.etest.ts
+++ b/app/static/tests/e2e/fit.etest.ts
@@ -1,11 +1,14 @@
-import { expect, test, Page } from "@playwright/test";
+import { expect, test, Page, Locator } from "@playwright/test";
 import {
     newFitCode,
     uploadCSVData,
     writeCode,
     startModelFit,
     waitForModelFitCompletion,
-    realisticFitData
+    realisticFitData,
+    linkData,
+    addGraphWithVariable,
+    expectWodinPlotDataSummary
 } from "./utils";
 import PlaywrightConfig from "../../playwright.config";
 
@@ -145,6 +148,8 @@ test.describe("Wodin App model fit tests", () => {
 
         const plotSelector = ".wodin-right .wodin-content div.mt-4 .js-plotly-plot";
 
+        await expect(await page.locator(".plotly .xtitle").textContent()).toBe("Time");
+
         // Test line is plotted for fit trace and data points
         const linesSelector = `${plotSelector} .scatterlayer .trace .lines path`;
         await expect((await page.locator(linesSelector).getAttribute("d"))!.startsWith("M")).toBe(true);
@@ -189,7 +194,7 @@ test.describe("Wodin App model fit tests", () => {
         await page.click(":nth-match(input.vary-param-check, 2)");
 
         // change advanced setting to sabotage fit
-        await page.click(":nth-match(.collapse-title, 6)"); // Open Advanced Settings
+        await page.click(":nth-match(.collapse-title, 5)"); // Open Advanced Settings
         const advancedSettingPanel = await page.locator("#advanced-settings-panel");
         const input1 = await advancedSettingPanel.locator(":nth-match(input, 1)");
         const input2 = await advancedSettingPanel.locator(":nth-match(input, 2)");
@@ -325,7 +330,73 @@ test.describe("Wodin App model fit tests", () => {
         const select1 = await linkContainer.locator(":nth-match(select, 1)");
         await select1.selectOption("onset");
         await page.click(":nth-match(.wodin-right .nav-tabs a, 1)"); // change main to run tab
-        const sumOfSquares = await page.innerText(":nth-match(.wodin-plot-container span, 1)");
+        const sumOfSquares = await page.innerText("#squares");
         expect(sumOfSquares).toContain("Sum of squares:");
     });
+
+    test("can change graph setting for log scale y axis for fit graph", async ({ page }) => {
+        await startModelFit(page);
+        await waitForModelFitCompletion(page);
+
+        await expect(await page.locator(":nth-match(.collapse-title, 7)")).toHaveText("Fit Graph Settings");
+        await page.locator(".log-scale-y-axis input").click();
+        // should update y axis tick
+        const tickSelector = ":nth-match(.plotly .ytick text, 2)";
+        await expect(await page.innerHTML(tickSelector)).toBe("4");
+        // change back to linear
+        await page.locator(".log-scale-y-axis input").click();
+        await expect(await page.innerHTML(tickSelector)).toBe("2");
+    });
+
+    const expectDataSummaryOnGraph = async (graph: Locator, dataSummaryIdx: number, dataColor: string) => {
+        const summaryLocator = await graph.locator(`:nth-match(.wodin-plot-data-summary-series, ${dataSummaryIdx})`);
+        await expectWodinPlotDataSummary(summaryLocator, "Cases", 32, 0, 31, 0, 13, "markers", null, dataColor);
+    };
+
+    test("data is displayed as expected with multiple graphs", async ({ page }) => {
+        await uploadCSVData(page, realisticFitData);
+        await page.click(":nth-match(.wodin-left .nav-tabs a, 3)");
+
+        // Add second graph and drag 'onset' and 'I' there
+        await addGraphWithVariable(page, 5); // onset
+        let iVariable = await page.locator(":nth-match(.variable, 3)");
+        await iVariable.dragTo(page.locator(":nth-match(.graph-config-panel .drop-zone, 2)"));
+
+        // Expect data to be shown on both graphs
+        const firstGraph = await page.locator(":nth-match(.wodin-plot-container, 1)");
+        const secondGraph = await page.locator(":nth-match(.wodin-plot-container, 2)");
+        const unlinkedDataColor = "#1c0a00";
+        const linkedDataColor = "#cccc00";
+        const unselectedDataColor = "transparent";
+        await expectDataSummaryOnGraph(firstGraph, 4, unlinkedDataColor);
+        await expectDataSummaryOnGraph(secondGraph, 3, unlinkedDataColor);
+
+        // Link data to 'I'
+        await linkData(page);
+
+        // Expect data to be shown on second graph with I's variable colour. Data should still be present on first graph
+        // but transparent
+        await expectDataSummaryOnGraph(firstGraph, 4, unselectedDataColor);
+        await expectDataSummaryOnGraph(secondGraph, 3, linkedDataColor);
+
+        // Drag 'I' back to first graph
+        const secondGraphConfig = page.locator(":nth-match(.graph-config-panel, 2)");
+        iVariable = secondGraphConfig.locator(":nth-match(.variable, 1)");
+        await iVariable.dragTo(page.locator(":nth-match(.graph-config-panel .drop-zone, 1)"));
+
+        // Expect data to be visible on first graph, transparent on second
+        await expectDataSummaryOnGraph(firstGraph, 5, linkedDataColor);
+        await expectDataSummaryOnGraph(secondGraph, 2, unselectedDataColor);
+
+        // SoS should be shown only once
+        const sumOfSquares = page.locator("#squares");
+        expect(await sumOfSquares.count()).toBe(1);
+        expect(await sumOfSquares.innerText()).toContain("Sum of squares:");
+
+        // Run sensitivity - expect data to be coloured on first graph, transparent on second
+        await page.click(":nth-match(.wodin-right .nav-tabs a, 3)");
+        await page.click("#run-sens-btn");
+        await expectDataSummaryOnGraph(firstGraph, 45, linkedDataColor);
+        await expectDataSummaryOnGraph(secondGraph, 12, unselectedDataColor);
+    });
 });
diff --git a/app/static/tests/e2e/options.etest.ts b/app/static/tests/e2e/options.etest.ts
index 306219fc2..990ffb028 100644
--- a/app/static/tests/e2e/options.etest.ts
+++ b/app/static/tests/e2e/options.etest.ts
@@ -204,19 +204,17 @@ test.describe("Options Tab tests", () => {
     });
 
     test("can change graph setting for log scale y axis", async ({ page }) => {
-        await expect(await page.innerText(":nth-match(.collapse-title, 3)")).toContain("Graph Settings");
-        await page.locator("#log-scale-y-axis input").click();
+        await page.locator(".log-scale-y-axis input").click();
         // should update y axis tick
         const tickSelector = ":nth-match(.plotly .ytick text, 2)";
         await expect(await page.innerHTML(tickSelector)).toBe("10n");
         // change back to linear
-        await page.locator("#log-scale-y-axis input").click();
+        await page.locator(".log-scale-y-axis input").click();
         await expect(await page.innerHTML(tickSelector)).toBe("0.2M");
     });
 
     test("can change graph setting for lock axes", async ({ page }) => {
-        await expect(await page.innerText(":nth-match(.collapse-title, 3)")).toContain("Graph Settings");
-        await page.locator("#lock-y-axis input").click();
+        await page.locator(".lock-y-axis input").click();
 
         const tickSelector = ":nth-match(.plotly .ytick text, 6)";
         await expect(await page.innerHTML(tickSelector)).toBe("1M");
@@ -227,20 +225,19 @@ test.describe("Options Tab tests", () => {
 
         // would be 1B if we didn't lock the axes
         await expect(await page.innerHTML(tickSelector)).toBe("1M");
-        await page.locator("#lock-y-axis input").click();
+        await page.locator(".lock-y-axis input").click();
 
         // autorange on deselect of lock axes
         await expect(await page.innerHTML(tickSelector)).toBe("1B");
     });
 
     test("overrides axes lock if log scale toggle changes", async ({ page }) => {
-        await expect(await page.innerText(":nth-match(.collapse-title, 3)")).toContain("Graph Settings");
-        await page.locator("#lock-y-axis input").click();
+        await page.locator(".lock-y-axis input").click();
 
         const tickSelector = ":nth-match(.plotly .ytick text, 2)";
         await expect(await page.innerHTML(tickSelector)).toBe("0.2M");
 
-        await page.locator("#log-scale-y-axis input").click();
+        await page.locator(".log-scale-y-axis input").click();
 
         // if you've locked the axis, it should not update to 10n, would
         // be 10^115441
@@ -504,7 +501,8 @@ test.describe("Options Tab tests", () => {
     };
 
     test("can edit and run model with advanced settings", async ({ page }) => {
-        await page.click(":nth-match(.collapse-title, 4)");
+        const advancedHeader = page.getByText(/Advanced Settings/);
+        await advancedHeader.click();
 
         await expectAdvancedSetting(page, 0);
         await expectAdvancedSetting(page, 1);
diff --git a/app/static/tests/e2e/run.etest.ts b/app/static/tests/e2e/run.etest.ts
new file mode 100644
index 000000000..a6dbd04cf
--- /dev/null
+++ b/app/static/tests/e2e/run.etest.ts
@@ -0,0 +1,51 @@
+import { expect, test, Page } from "@playwright/test";
+import { expectGraphVariables, addGraphWithVariable, expectXAxisTimeLabelFinalGraph } from "./utils";
+
+const expectXTicks = async (page: Page, expectedGraphCount: number, expectedXTicks: number[]) => {
+    const graphs = await page.locator(".plot-container");
+    expect(await graphs.count()).toBe(expectedGraphCount);
+    for (let i = 0; i < expectedGraphCount; i++) {
+        const graph = graphs.nth(i);
+        const ticks = await graph.locator(".xtick text");
+        expect(await ticks.count()).toBe(expectedXTicks.length);
+        for (let tickIdx = 0; tickIdx < expectedXTicks.length; tickIdx++) {
+            await expect(ticks.nth(tickIdx)).toHaveText(expectedXTicks[tickIdx].toString());
+        }
+    }
+};
+
+test.describe("Run Tab", () => {
+    test("x axis zoom on plot is replicated in other plots", async ({ page }) => {
+        await page.goto("/apps/day1");
+
+        // 1. Add 2 additional graphs, and drag one variable to each of them
+        await addGraphWithVariable(page, 1);
+        await addGraphWithVariable(page, 1);
+        await expectGraphVariables(page, 0, ["R"]);
+        await expectGraphVariables(page, 1, ["S"]);
+        await expectGraphVariables(page, 2, ["I"]);
+        // Sanity check that each graph has expected initial x axis ticks for full 0-100 time range
+        await expectXTicks(page, 3, [0, 20, 40, 60, 80, 100]);
+
+        // 2. Drag to zoom to an area on the first graph
+        const graphBounds = await page.locator(":nth-match(.plot .draglayer .xy .nsewdrag, 1)").boundingBox()!;
+        await page.mouse.move(graphBounds.x + 100, graphBounds.y + 50);
+        await page.mouse.down();
+        await page.mouse.move(graphBounds.x + 300, graphBounds.y + 100);
+        await page.mouse.up();
+
+        // 3. Check - using x axis ticks - that the expected x axis values are shown on all three graphs.
+        await expectXTicks(page, 3, [15, 20, 25, 30, 35, 40]);
+    });
+
+    test("x axis Time label is shown for final plot only, in Basic app", async ({ page }) => {
+        await page.goto("/apps/day1");
+        await expectXAxisTimeLabelFinalGraph(page);
+    });
+
+    test("x axis Time label is shown for final plot only, in Stochastic app", async ({ page }) => {
+        await page.goto("/apps/day3");
+        await page.click(":nth-match(#right-tabs .nav-link, 2)");
+        await expectXAxisTimeLabelFinalGraph(page);
+    });
+});
diff --git a/app/static/tests/e2e/sensitivity.etest.ts b/app/static/tests/e2e/sensitivity.etest.ts
index 5dbe1e9b7..a52d7c9e2 100644
--- a/app/static/tests/e2e/sensitivity.etest.ts
+++ b/app/static/tests/e2e/sensitivity.etest.ts
@@ -1,6 +1,6 @@
 import { expect, test, Page } from "@playwright/test";
 import PlaywrightConfig from "../../playwright.config";
-import { expectSummaryValues } from "./utils";
+import { addGraphWithVariable, expectSummaryValues, expectXAxisTimeLabelFinalGraph } from "./utils";
 
 test.describe("Sensitivity tests", () => {
     const { timeout } = PlaywrightConfig;
@@ -104,7 +104,7 @@ test.describe("Sensitivity tests", () => {
         await expect(await page.innerText(".sensitivity-tab .plot-placeholder")).toBe("Sensitivity has not been run.");
 
         // run and see all traces
-        page.click("#run-sens-btn");
+        await page.click("#run-sens-btn");
         const linesSelector = `${plotSelector} .scatterlayer .trace .lines path`;
         expect((await page.locator(`:nth-match(${linesSelector}, 30)`).getAttribute("d"))!.startsWith("M0")).toBe(true);
 
@@ -272,4 +272,34 @@ test.describe("Sensitivity tests", () => {
         await expectSummaryValues(page, 8, "I (beta=3.000)", 1000, "#cccc00");
         await expectSummaryValues(page, 9, "R (beta=3.000)", 1000, "#cc0044");
     });
+
+    const expectMultipleSensitivityGraphs = async (page: Page, summary = false) => {
+        const containerClass = summary ? "summary-plot-container" : "wodin-plot-container";
+        const firstPlot = await page.locator(`:nth-match(.${containerClass}, 1)`);
+        const secondPlot = await page.locator(`:nth-match(.${containerClass}, 2)`);
+        expect(await firstPlot.locator(":nth-match(.wodin-plot-data-summary-series, 1)").getAttribute("name")).toBe(
+            summary ? "I" : "I (beta=3.600)"
+        );
+        expect(await secondPlot.locator(":nth-match(.wodin-plot-data-summary-series, 1)").getAttribute("name")).toBe(
+            summary ? "S" : "S (beta=3.600)"
+        );
+    };
+
+    test("can see multiple Trace over time graphs", async ({ page }) => {
+        await page.click("#run-sens-btn");
+        await addGraphWithVariable(page, 1);
+        await expectMultipleSensitivityGraphs(page);
+    });
+
+    test("can see Time label on final Trace over time graph only", async ({ page }) => {
+        await page.click("#run-sens-btn");
+        await expectXAxisTimeLabelFinalGraph(page);
+    });
+
+    test("can see multiple summary graphs", async ({ page }) => {
+        await page.click("#run-sens-btn");
+        await page.locator("#sensitivity-plot-type select").selectOption("ValueAtTime");
+        await addGraphWithVariable(page, 1);
+        await expectMultipleSensitivityGraphs(page, true);
+    });
 });
diff --git a/app/static/tests/e2e/utils.ts b/app/static/tests/e2e/utils.ts
index 337dd525b..7a884317f 100644
--- a/app/static/tests/e2e/utils.ts
+++ b/app/static/tests/e2e/utils.ts
@@ -81,20 +81,22 @@ export const writeCode = async (page: Page, code: string) => {
     await page.fill(".monaco-editor textarea", code);
 };
 
+export const linkData = async (page: Page) => {
+    const linkContainer = await page.locator(":nth-match(.collapse .container, 1)");
+    const select1 = await linkContainer.locator(":nth-match(select, 1)");
+    await select1.selectOption("I");
+};
+
 export const startModelFit = async (page: Page, data: string = realisticFitData) => {
     // Upload data
     await uploadCSVData(page, data);
     await page.click(":nth-match(.wodin-right .nav-tabs a, 2)");
 
-    // link variables
     await page.click(":nth-match(.wodin-left .nav-tabs a, 3)");
     await expect(await page.innerText("#optimisation")).toBe(
         "Please link at least one column in order to set target to fit."
     );
-    const linkContainer = await page.locator(":nth-match(.collapse .container, 1)");
-    const select1 = await linkContainer.locator(":nth-match(select, 1)");
-    await select1.selectOption("I");
-
+    await linkData(page);
     await expect(await page.innerText("#optimisation label#target-fit-label")).toBe("Cases ~ I");
 
     // select param to vary
@@ -187,3 +189,44 @@ export const expectCanRunMultiSensitivity = async (page: Page, timeout = 10000)
     );
     await expect(await page.locator("#download-summary-btn")).toBeEnabled();
 };
+
+export const expectGraphVariables = async (page: Page, graphIndex: number, expectedVariables: string[]) => {
+    // expect to find these variables in config panel and on plot series
+    const configPanel = await page.locator(`:nth-match(.graph-config-panel, ${graphIndex + 1})`);
+    const configVars = await configPanel.locator(".variable .variable-name");
+    await expect(configVars).toHaveCount(expectedVariables.length);
+
+    const plotSummary = await page.locator(
+        `:nth-match(.wodin-plot-container .wodin-plot-data-summary, ${graphIndex + 1})`
+    );
+    for (let i = 0; i < expectedVariables.length; i++) {
+        await expect(configVars.nth(i)).toHaveText(expectedVariables[i]);
+        await expect(plotSummary.locator(`:nth-match(.wodin-plot-data-summary-series, ${i + 1})`)).toHaveAttribute(
+            "name",
+            expectedVariables[i]
+        );
+    }
+};
+
+export const addGraphWithVariable = async (page: Page, variableIdx: number) => {
+    await page.click("#add-graph-btn");
+    const count = await page.locator(".graph-config-panel").count();
+    // assume we drag variable from first graph config
+    const firstGraphConfig = await page.locator(":nth-match(.graph-config-panel, 1)");
+    const variable = await firstGraphConfig.locator(`:nth-match(.variable, ${variableIdx})`);
+    await page.locator(`:nth-match(.graph-config-panel .drop-zone, ${count})`).scrollIntoViewIfNeeded();
+    await variable.dragTo(page.locator(`:nth-match(.graph-config-panel .drop-zone, ${count})`));
+};
+
+export const expectXAxisTimeLabelFinalGraph = async (page: Page) => {
+    await addGraphWithVariable(page, 1);
+    const firstGraph = page.locator(":nth-match(.plotly, 1)");
+    const secondGraph = page.locator(":nth-match(.plotly, 2)");
+
+    await expect(await firstGraph.locator(".xtitle")).not.toBeVisible();
+    await expect(await secondGraph.locator(".xtitle").textContent()).toBe("Time");
+
+    // Delete second config - the Time label should be shown on the first graph
+    await page.locator(":nth-match(button.delete-graph, 2)").click();
+    await expect(await firstGraph.locator(".xtitle").textContent()).toBe("Time");
+};
diff --git a/app/static/tests/mocks.ts b/app/static/tests/mocks.ts
index a1c6e7c4f..470b462df 100644
--- a/app/static/tests/mocks.ts
+++ b/app/static/tests/mocks.ts
@@ -26,7 +26,7 @@ import {
     SensitivityVariationType
 } from "../src/app/store/sensitivity/state";
 import { VersionsState } from "../src/app/store/versions/state";
-import { GraphsState } from "../src/app/store/graphs/state";
+import { defaultGraphSettings, GraphsState } from "../src/app/store/graphs/state";
 import { LanguageState } from "../translationPackage/store/state";
 import { Language } from "../src/app/types/languageTypes";
 import { noSensitivityUpdateRequired } from "../src/app/store/sensitivity/sensitivity";
@@ -126,15 +126,13 @@ export const mockGraphsState = (state: Partial<GraphsState> = {}): GraphsState =
     return {
         config: [
             {
+                id: "123",
                 selectedVariables: [],
-                unselectedVariables: []
+                unselectedVariables: [],
+                settings: defaultGraphSettings()
             }
         ],
-        settings: {
-            logScaleYAxis: false,
-            lockYAxis: false,
-            yAxisRange: [0, 0]
-        },
+        fitGraphSettings: defaultGraphSettings(),
         ...state
     };
 };
diff --git a/app/static/tests/unit/components/code/codeTab.test.ts b/app/static/tests/unit/components/code/codeTab.test.ts
index fbbfc03df..8b7357df9 100644
--- a/app/static/tests/unit/components/code/codeTab.test.ts
+++ b/app/static/tests/unit/components/code/codeTab.test.ts
@@ -7,8 +7,8 @@ import { BasicState } from "../../../../src/app/store/basic/state";
 import { mockBasicState, mockCodeState, mockModelState } from "../../../mocks";
 import ErrorInfo from "../../../../src/app/components/ErrorInfo.vue";
 import { ModelState } from "../../../../src/app/store/model/state";
-import VerticalCollapse from "../../../../src/app/components/VerticalCollapse.vue";
 import GenericHelp from "../../../../src/app/components/help/GenericHelp.vue";
+import GraphConfigsCollapsible from "../../../../src/app/components/graphConfig/GraphConfigsCollapsible.vue";
 
 describe("CodeTab", () => {
     const defaultModelState = {
@@ -63,7 +63,7 @@ describe("CodeTab", () => {
         const statusIcon = wrapper.find("#code-status").findComponent(VueFeather);
         expect(statusIcon.attributes("type")).toBe("check");
         expect(statusIcon.classes()).toContain("text-success");
-        expect(wrapper.findComponent(VerticalCollapse).props("collapseId")).toBe("select-variables");
+        expect(wrapper.findComponent(GraphConfigsCollapsible).exists()).toBe(true);
         expect(wrapper.findComponent(GenericHelp).props("title")).toBe("Write odin code");
         expect(wrapper.findComponent(GenericHelp).props("markdown")).toContain("Write code in this editor");
     });
@@ -101,27 +101,6 @@ describe("CodeTab", () => {
         expect(wrapper.findComponent(ErrorInfo).props("error")).toStrictEqual(odinModelResponseError);
     });
 
-    it("does not render selected variables when no variables in model", () => {
-        const wrapper = getWrapper({
-            ...defaultModelState,
-            odinModelResponse: {
-                metadata: {
-                    variables: []
-                },
-                valid: true
-            } as any
-        });
-        expect(wrapper.findComponent(VerticalCollapse).exists()).toBe(false);
-    });
-
-    it("does not render selected variables when compile required", () => {
-        const wrapper = getWrapper({
-            ...defaultModelState,
-            compileRequired: true
-        });
-        expect(wrapper.findComponent(VerticalCollapse).exists()).toBe(false);
-    });
-
     it("renders nothing when app state is not configured", () => {
         const store = new Vuex.Store<BasicState>({
             state: mockBasicState()
diff --git a/app/static/tests/unit/components/code/selectedVariables.test.ts b/app/static/tests/unit/components/code/selectedVariables.test.ts
deleted file mode 100644
index e6a6c3a15..000000000
--- a/app/static/tests/unit/components/code/selectedVariables.test.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import Vuex from "vuex";
-import { shallowMount } from "@vue/test-utils";
-import { BasicState } from "../../../../src/app/store/basic/state";
-import SelectedVariables from "../../../../src/app/components/code/SelectedVariables.vue";
-import { ModelAction } from "../../../../src/app/store/model/actions";
-import { GraphsAction } from "../../../../src/app/store/graphs/actions";
-
-describe("SelectedVariables", () => {
-    const mockUpdateSelectedVariables = jest.fn();
-
-    const getWrapper = () => {
-        const store = new Vuex.Store<BasicState>({
-            state: {} as any,
-            modules: {
-                graphs: {
-                    namespaced: true,
-                    state: {
-                        config: [
-                            {
-                                selectedVariables: ["S", "R"]
-                            }
-                        ]
-                    },
-                    actions: {
-                        [GraphsAction.UpdateSelectedVariables]: mockUpdateSelectedVariables
-                    }
-                },
-                model: {
-                    namespaced: true,
-                    state: {
-                        odinModelResponse: {
-                            metadata: {
-                                variables: ["S", "I", "R"]
-                            }
-                        },
-                        paletteModel: {
-                            S: "#ff0000",
-                            I: "#00ff00",
-                            R: "#0000ff"
-                        }
-                    }
-                }
-            }
-        });
-
-        return shallowMount(SelectedVariables, {
-            global: {
-                plugins: [store]
-            }
-        });
-    };
-
-    beforeEach(() => {
-        jest.clearAllMocks();
-    });
-
-    it("renders as expected", () => {
-        const wrapper = getWrapper();
-        const vars = wrapper.findAll(".selected-variables-panel span.variable");
-        expect(vars.length).toBe(3);
-        expect(vars.at(0)!.text()).toBe("S");
-        expect((vars.at(0)!.element as HTMLElement).style.backgroundColor).toBe("rgb(255, 0, 0)");
-        expect(vars.at(1)!.text()).toBe("I");
-        expect((vars.at(1)!.element as HTMLElement).style.backgroundColor).toBe("rgb(187, 187, 187)");
-        expect(vars.at(2)!.text()).toBe("R");
-        expect((vars.at(2)!.element as HTMLElement).style.backgroundColor).toBe("rgb(0, 0, 255)");
-        expect(wrapper.find("span#select-variables-all").text()).toBe("Select all");
-        expect(wrapper.find("span#select-variables-none").text()).toBe("Select none");
-    });
-
-    it("clicking a selected variable unselects it", async () => {
-        const wrapper = getWrapper();
-        const s = wrapper.findAll(".selected-variables-panel span.variable").at(0)!;
-        await s.trigger("click");
-        expect(mockUpdateSelectedVariables).toBeCalledTimes(1);
-        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({ graphIndex: 0, selectedVariables: ["R"] });
-    });
-
-    it("clicking an unselected variables selects it", async () => {
-        const wrapper = getWrapper();
-        const i = wrapper.findAll(".selected-variables-panel span.variable").at(1)!;
-        await i.trigger("click");
-        expect(mockUpdateSelectedVariables).toBeCalledTimes(1);
-        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({
-            graphIndex: 0,
-            selectedVariables: ["S", "R", "I"]
-        });
-    });
-
-    it("clicking select all link selects all variables", async () => {
-        const wrapper = getWrapper();
-        wrapper.find("span#select-variables-all").trigger("click");
-        expect(mockUpdateSelectedVariables).toBeCalledTimes(1);
-        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({
-            graphIndex: 0,
-            selectedVariables: ["S", "I", "R"]
-        });
-    });
-
-    it("clicking select none link unselects all variables", async () => {
-        const wrapper = getWrapper();
-        wrapper.find("span#select-variables-none").trigger("click");
-        expect(mockUpdateSelectedVariables).toBeCalledTimes(1);
-        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({ graphIndex: 0, selectedVariables: [] });
-    });
-});
diff --git a/app/static/tests/unit/components/graphConfig/graphConfig.test.ts b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
new file mode 100644
index 000000000..88bd729f6
--- /dev/null
+++ b/app/static/tests/unit/components/graphConfig/graphConfig.test.ts
@@ -0,0 +1,227 @@
+import Vuex from "vuex";
+import { shallowMount } from "@vue/test-utils";
+import { BasicState } from "../../../../src/app/store/basic/state";
+import GraphConfig from "../../../../src/app/components/graphConfig/GraphConfig.vue";
+import { GraphsAction } from "../../../../src/app/store/graphs/actions";
+import { GraphsState } from "../../../../src/app/store/graphs/state";
+import { GraphsMutation } from "../../../../src/app/store/graphs/mutations";
+import GraphSettings from "../../../../src/app/components/GraphSettings.vue";
+
+describe("GraphConfig", () => {
+    const mockUpdateSelectedVariables = jest.fn();
+    const mockDeleteGraph = jest.fn();
+    const mockTooltipDirective = jest.fn();
+    const defaultGraphState = {
+        config: [
+            {
+                selectedVariables: ["S", "R"]
+            },
+            {
+                selectedVariables: ["I", "J"]
+            }
+        ]
+    } as any;
+
+    const getWrapper = (props = {}, graphState: Partial<GraphsState> = {}) => {
+        const store = new Vuex.Store<BasicState>({
+            state: {} as any,
+            modules: {
+                graphs: {
+                    namespaced: true,
+                    state: {
+                        ...defaultGraphState,
+                        ...graphState
+                    },
+                    actions: {
+                        [GraphsAction.UpdateSelectedVariables]: mockUpdateSelectedVariables
+                    },
+                    mutations: {
+                        [GraphsMutation.DeleteGraph]: mockDeleteGraph
+                    }
+                },
+                model: {
+                    namespaced: true,
+                    state: {
+                        paletteModel: {
+                            S: "#ff0000",
+                            I: "#00ff00",
+                            R: "#0000ff"
+                        }
+                    }
+                }
+            }
+        });
+
+        return shallowMount(GraphConfig, {
+            props: {
+                graphIndex: 0,
+                dragging: false,
+                ...props
+            },
+            global: {
+                directives: { tooltip: mockTooltipDirective },
+                plugins: [store]
+            }
+        });
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("renders as expected", () => {
+        const wrapper = getWrapper();
+        const varBadges = wrapper.findAll(".graph-config-panel .badge");
+        const varNames = wrapper.findAll(".graph-config-panel span.variable-name");
+        expect(wrapper.find("button.delete-graph").exists()).toBe(true);
+        expect(varBadges.length).toBe(2);
+        expect(varNames.length).toBe(2);
+        expect(varNames.at(0)!.text()).toBe("S");
+        expect((varBadges.at(0)!.element as HTMLElement).style.backgroundColor).toBe("rgb(255, 0, 0)");
+        expect(varNames.at(1)!.text()).toBe("R");
+        expect((varBadges.at(1)!.element as HTMLElement).style.backgroundColor).toBe("rgb(0, 0, 255)");
+        // drop zone not active
+        expect(wrapper.find(".drop-zone").classes()).toStrictEqual(["drop-zone", "drop-zone-inactive"]);
+        // instruction not shown if at least one selected variable
+        expect(wrapper.findAll(".drop-zone-instruction").length).toBe(0);
+        const settings = wrapper.findComponent(GraphSettings);
+        expect(settings.props("fitPlot")).toBe(false);
+        expect(settings.props("graphIndex")).toBe(0);
+    });
+
+    it("starting drag sets values in event and emits setDragging", async () => {
+        const wrapper = getWrapper();
+        const s = wrapper.findAll(".graph-config-panel .badge").at(0)!;
+        const setData = jest.fn();
+        await s.trigger("dragstart", { dataTransfer: { setData }, ctrlKey: false, metaKey: false });
+        expect(setData).toHaveBeenNthCalledWith(1, "variable", "S");
+        expect(setData).toHaveBeenNthCalledWith(2, "srcGraphConfig", "0");
+        expect(setData).toHaveBeenNthCalledWith(3, "copyVar", "false");
+    });
+
+    it("start drag sets values copyVar to true in event when Ctrl key pressed", async () => {
+        const wrapper = getWrapper();
+        const s = wrapper.findAll(".graph-config-panel .badge").at(0)!;
+        const setData = jest.fn();
+        await s.trigger("dragstart", { dataTransfer: { setData }, ctrlKey: true, metaKey: false });
+        expect(setData).toHaveBeenNthCalledWith(3, "copyVar", "true");
+    });
+
+    it("start drag sets values copyVar to true in event when meta key pressed", async () => {
+        const wrapper = getWrapper();
+        const s = wrapper.findAll(".graph-config-panel .badge").at(0)!;
+        const setData = jest.fn();
+        await s.trigger("dragstart", { dataTransfer: { setData }, ctrlKey: false, metaKey: true });
+        expect(setData).toHaveBeenNthCalledWith(3, "copyVar", "true");
+    });
+
+    it("ending drag emits setDragging", async () => {
+        const wrapper = getWrapper();
+        const s = wrapper.findAll(".graph-config-panel .badge").at(0)!;
+        await s.trigger("dragend");
+        expect(wrapper.emitted("setDragging")![0]).toStrictEqual([false]);
+    });
+
+    it("onDrop selects variable in current graph and removes it from source", async () => {
+        const wrapper = getWrapper();
+        const dataTransfer = {
+            getData: (s: string) => {
+                if (s === "variable") return "I";
+                if (s === "srcGraphConfig") return "1";
+                if (s === "copyVar") return "false";
+                return null;
+            }
+        };
+        const dropPanel = wrapper.find(".graph-config-panel");
+        await dropPanel.trigger("drop", { dataTransfer });
+        expect(mockUpdateSelectedVariables.mock.calls.length).toBe(2);
+        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({
+            graphIndex: 0,
+            selectedVariables: ["S", "R", "I"]
+        });
+        expect(mockUpdateSelectedVariables.mock.calls[1][1]).toStrictEqual({ graphIndex: 1, selectedVariables: ["J"] });
+    });
+
+    it("onDrop does not attempt to remove variable if source is hidden, even with Ctrl key", async () => {
+        const wrapper = getWrapper();
+        const dataTransfer = {
+            getData: (s: string) => {
+                if (s === "variable") return "I";
+                if (s === "srcGraphConfig") return "hidden";
+                if (s === "copyVar") return "true";
+                return null;
+            }
+        };
+        const dropPanel = wrapper.find(".graph-config-panel");
+        await dropPanel.trigger("drop", { dataTransfer });
+        expect(mockUpdateSelectedVariables.mock.calls.length).toBe(1);
+        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({
+            graphIndex: 0,
+            selectedVariables: ["S", "R", "I"]
+        });
+    });
+
+    it("onDrop does not remove variable if copyVar is true", async () => {
+        const wrapper = getWrapper();
+        const dataTransfer = {
+            getData: (s: string) => {
+                if (s === "variable") return "I";
+                if (s === "srcGraphConfig") return "1";
+                if (s === "copyVar") return "true";
+                return null;
+            }
+        };
+        const dropPanel = wrapper.find(".graph-config-panel");
+        await dropPanel.trigger("drop", { dataTransfer });
+        expect(mockUpdateSelectedVariables.mock.calls.length).toBe(1);
+        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({
+            graphIndex: 0,
+            selectedVariables: ["S", "R", "I"]
+        });
+    });
+
+    it("clicking remove button removes variable from graph", async () => {
+        const wrapper = getWrapper();
+        const button = wrapper.findAll(".variable-delete button").at(0);
+        await button!.trigger("click");
+        expect(mockUpdateSelectedVariables.mock.calls.length).toBe(1);
+        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({ graphIndex: 0, selectedVariables: ["R"] });
+    });
+
+    it("shows drop zone when dragging", () => {
+        const wrapper = getWrapper({ dragging: true });
+        expect(wrapper.find(".drop-zone").classes()).toStrictEqual(["drop-zone", "drop-zone-active"]);
+    });
+
+    it("shows instruction if no selected variables", () => {
+        const wrapper = getWrapper({}, {
+            config: [
+                {
+                    selectedVariables: []
+                }
+            ]
+        } as any);
+        expect(wrapper.find(".drop-zone-instruction").text()).toBe(
+            "Drag variables here to select them for this graph. " +
+                "Press the Ctrl or ⌘ key on drag to make a copy of a variable."
+        );
+    });
+
+    it("does not render delete button if there is only one graph", () => {
+        const wrapper = getWrapper({}, {
+            config: [
+                {
+                    selectedVariables: ["S", "R"]
+                }
+            ]
+        } as any);
+        expect(wrapper.find("h5 button.delete-graph").exists()).toBe(false);
+    });
+
+    it("delete button commits mutation", async () => {
+        const wrapper = getWrapper();
+        await wrapper.find("button.delete-graph").trigger("click");
+        expect(mockDeleteGraph).toHaveBeenCalledTimes(1);
+        expect(mockDeleteGraph.mock.calls[0][1]).toBe(0);
+    });
+});
diff --git a/app/static/tests/unit/components/graphConfig/graphConfigs.test.ts b/app/static/tests/unit/components/graphConfig/graphConfigs.test.ts
new file mode 100644
index 000000000..6803ef7eb
--- /dev/null
+++ b/app/static/tests/unit/components/graphConfig/graphConfigs.test.ts
@@ -0,0 +1,84 @@
+import Vuex from "vuex";
+import { shallowMount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import { BasicState } from "../../../../src/app/store/basic/state";
+import { mockBasicState } from "../../../mocks";
+import { GraphsAction } from "../../../../src/app/store/graphs/actions";
+import GraphConfigs from "../../../../src/app/components/graphConfig/GraphConfigs.vue";
+import GraphConfig from "../../../../src/app/components/graphConfig/GraphConfig.vue";
+import HiddenVariables from "../../../../src/app/components/graphConfig/HiddenVariables.vue";
+
+describe("GraphConfigs", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const mockNewGraph = jest.fn();
+    const namespaced = true;
+    const getWrapper = () => {
+        const store = new Vuex.Store<BasicState>({
+            state: mockBasicState({
+                configured: true
+            }),
+            modules: {
+                graphs: {
+                    namespaced,
+                    state: {
+                        config: [
+                            { selectedVariables: ["S"], unselectedVariables: ["I", "R"] },
+                            { selectedVariables: ["I"], unselectedVariables: ["S", "R"] }
+                        ]
+                    },
+                    actions: {
+                        [GraphsAction.NewGraph]: mockNewGraph
+                    }
+                }
+            }
+        });
+        return shallowMount(GraphConfigs, {
+            global: {
+                plugins: [store]
+            }
+        });
+    };
+
+    it("renders as expected", () => {
+        const wrapper = getWrapper();
+        expect(wrapper.find("#graph-configs-instruction").text()).toContain(
+            "Drag variables to 'Hidden variables' to remove"
+        );
+        const graphConfigComps = wrapper.findAllComponents(GraphConfig);
+        expect(graphConfigComps.length).toBe(2);
+        expect(graphConfigComps.at(0)!.props("graphIndex")).toBe(0);
+        expect(graphConfigComps.at(0)!.props("dragging")).toBe(false);
+        expect(graphConfigComps.at(1)!.props("graphIndex")).toBe(1);
+        expect(graphConfigComps.at(1)!.props("dragging")).toBe(false);
+        expect(wrapper.find("button").text()).toBe("Add Graph");
+        expect(wrapper.findComponent(HiddenVariables).props("dragging")).toBe(false);
+    });
+
+    it("sets dragging on emit from GraphConfig", async () => {
+        const wrapper = getWrapper();
+        const graphConfig = wrapper.findAllComponents(GraphConfig).at(0)!;
+        graphConfig.vm.$emit("setDragging", true);
+        await nextTick();
+        expect(graphConfig.props("dragging")).toBe(true);
+        expect(wrapper.findComponent(HiddenVariables).props("dragging")).toBe(true);
+    });
+
+    it("sets dragging on emit from HiddenVariables", async () => {
+        const wrapper = getWrapper();
+        const hiddenVars = wrapper.findComponent(HiddenVariables);
+        hiddenVars.vm.$emit("setDragging", true);
+        await nextTick();
+        expect(hiddenVars.props("dragging")).toBe(true);
+        expect(wrapper.findAllComponents(GraphConfig).at(0)!.props("dragging")).toBe(true);
+    });
+
+    it("Add Graph click invokes action", async () => {
+        const wrapper = getWrapper();
+        expect(mockNewGraph).toHaveBeenCalledTimes(0);
+        await wrapper.find("button").trigger("click");
+        expect(mockNewGraph).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/app/static/tests/unit/components/graphConfig/graphConfigsCollapsible.test.ts b/app/static/tests/unit/components/graphConfig/graphConfigsCollapsible.test.ts
new file mode 100644
index 000000000..daaca3130
--- /dev/null
+++ b/app/static/tests/unit/components/graphConfig/graphConfigsCollapsible.test.ts
@@ -0,0 +1,63 @@
+import Vuex from "vuex";
+import { shallowMount } from "@vue/test-utils";
+import { ModelState } from "../../../../src/app/store/model/state";
+import { BasicState } from "../../../../src/app/store/basic/state";
+import { mockBasicState, mockCodeState, mockModelState } from "../../../mocks";
+import GraphConfigsCollapsible from "../../../../src/app/components/graphConfig/GraphConfigsCollapsible.vue";
+import VerticalCollapse from "../../../../src/app/components/VerticalCollapse.vue";
+
+describe("GraphConfigsCollapsible", () => {
+    const defaultModelState = {
+        compileRequired: false,
+        odinModelResponse: {
+            metadata: {
+                variables: ["S", "I", "R"]
+            },
+            valid: true
+        } as any
+    };
+
+    const getWrapper = (modelState: Partial<ModelState> = {}) => {
+        const store = new Vuex.Store<BasicState>({
+            state: mockBasicState({
+                configured: true
+            }),
+            modules: {
+                model: {
+                    namespaced: true,
+                    state: mockModelState({ ...defaultModelState, ...modelState })
+                }
+            }
+        });
+
+        return shallowMount(GraphConfigsCollapsible, {
+            global: {
+                plugins: [store]
+            }
+        });
+    };
+
+    it("renders collapsible when graph configs should be shown", () => {
+        const wrapper = getWrapper();
+        expect(wrapper.findComponent(VerticalCollapse).props("title")).toBe("Graphs");
+    });
+
+    it("does not render collapsible when no variables in model", () => {
+        const wrapper = getWrapper({
+            odinModelResponse: {
+                metadata: {
+                    variables: []
+                },
+                valid: true
+            } as any
+        });
+        expect(wrapper.findComponent(VerticalCollapse).exists()).toBe(false);
+    });
+
+    it("does not render collapsible when compile required", () => {
+        const wrapper = getWrapper({
+            compileRequired: true
+        });
+        expect(wrapper.findComponent(VerticalCollapse).exists()).toBe(false);
+    });
+});
diff --git a/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts b/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
new file mode 100644
index 000000000..c0a7781a0
--- /dev/null
+++ b/app/static/tests/unit/components/graphConfig/hiddenVariables.test.ts
@@ -0,0 +1,133 @@
+import Vuex from "vuex";
+import { shallowMount } from "@vue/test-utils";
+import { BasicState } from "../../../../src/app/store/basic/state";
+import { GraphsAction } from "../../../../src/app/store/graphs/actions";
+import HiddenVariables from "../../../../src/app/components/graphConfig/HiddenVariables.vue";
+import { GraphsGetter } from "../../../../src/app/store/graphs/getters";
+
+// Mock the fadeColor util which uses color package, which doesn't play nicely with jest
+jest.mock("../../../../src/app/components/graphConfig/utils", () => {
+    return {
+        fadeColor: (input: string) => {
+            const match = input.match(/rgb\(([0-9]*), ([0-9]*), ([0-9]*)\)/);
+            const result = `rgba(${match![1]}, ${match![2]}, ${match![3]}, 0.5)`;
+            return result;
+        }
+    };
+});
+
+describe("HiddenVariables", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const mockUpdateSelectedVariables = jest.fn();
+
+    const getWrapper = (hiddenVariables = ["I", "R"]) => {
+        const store = new Vuex.Store<BasicState>({
+            state: {} as any,
+            modules: {
+                graphs: {
+                    namespaced: true,
+                    state: {
+                        config: [
+                            {
+                                selectedVariables: ["S", "J"]
+                            },
+                            {
+                                selectedVariables: ["S"]
+                            }
+                        ]
+                    },
+                    actions: {
+                        [GraphsAction.UpdateSelectedVariables]: mockUpdateSelectedVariables
+                    },
+                    getters: {
+                        [GraphsGetter.hiddenVariables]: () => hiddenVariables
+                    } as any
+                },
+                model: {
+                    namespaced: true,
+                    state: {
+                        paletteModel: {
+                            S: "rgb(255, 0, 0)",
+                            I: "rgb(0, 255, 0)",
+                            R: "rgb(0, 0, 255)",
+                            J: "rgb(0, 255, 255)"
+                        }
+                    }
+                }
+            }
+        });
+
+        return shallowMount(HiddenVariables, {
+            props: {
+                dragging: false
+            },
+            global: {
+                plugins: [store]
+            }
+        });
+    };
+
+    it("renders as expected", () => {
+        const wrapper = getWrapper();
+        expect(wrapper.find("h5").text()).toBe("Hidden variables");
+        expect(wrapper.find(".drop-zone").classes()).toStrictEqual(["drop-zone", "drop-zone-inactive"]);
+        const variables = wrapper.findAll(".hidden-variables-panel .variable");
+        expect(variables.length).toBe(2);
+        expect(variables.at(0)!.text()).toBe("I");
+        expect((variables.at(0)!.element as HTMLElement).style.backgroundColor).toBe("rgba(0, 255, 0, 0.5)");
+        expect(variables.at(1)!.text()).toBe("R");
+        expect((variables.at(1)!.element as HTMLElement).style.backgroundColor).toBe("rgba(0, 0, 255, 0.5)");
+    });
+
+    it("starting drag sets values in event and emits setDragging", async () => {
+        const wrapper = getWrapper();
+        const s = wrapper.findAll(".hidden-variables-panel .variable").at(0)!;
+        const setData = jest.fn();
+        await s.trigger("dragstart", { dataTransfer: { setData } });
+        expect(setData.mock.calls[0][0]).toBe("variable");
+        expect(setData.mock.calls[0][1]).toStrictEqual("I");
+        expect(setData.mock.calls[1][0]).toStrictEqual("srcGraphConfig");
+        expect(setData.mock.calls[1][1]).toStrictEqual("hidden");
+        expect(setData.mock.calls[2][0]).toStrictEqual("copyVar");
+        expect(setData.mock.calls[2][1]).toStrictEqual("false");
+        expect(wrapper.emitted("setDragging")![0]).toStrictEqual([true]);
+    });
+
+    it("ending drag emits setDragging", async () => {
+        const wrapper = getWrapper();
+        const s = wrapper.findAll(".hidden-variables-panel .variable").at(0)!;
+        await s.trigger("dragend");
+        expect(wrapper.emitted("setDragging")![0]).toStrictEqual([false]);
+    });
+
+    it("onDrop removes variable from all configs with variable", async () => {
+        const wrapper = getWrapper();
+        const dataTransfer = {
+            getData: (s: string) => {
+                if (s === "variable") return "S";
+                if (s === "srcGraphConfig") return "0";
+                if (s === "copyVar") return "false";
+                return null;
+            }
+        };
+        const dropPanel = wrapper.find(".hidden-variables-panel");
+        await dropPanel.trigger("drop", { dataTransfer });
+        expect(mockUpdateSelectedVariables.mock.calls.length).toBe(2);
+        expect(mockUpdateSelectedVariables.mock.calls[0][1]).toStrictEqual({ graphIndex: 0, selectedVariables: ["J"] });
+        expect(mockUpdateSelectedVariables.mock.calls[1][1]).toStrictEqual({ graphIndex: 1, selectedVariables: [] });
+    });
+
+    it("shows drop zone when dragging", async () => {
+        const wrapper = getWrapper();
+        await wrapper.setProps({ dragging: true });
+        expect(wrapper.find(".drop-zone").classes()).toStrictEqual(["drop-zone", "drop-zone-active"]);
+    });
+
+    it("shows instruction if no hidden variables", () => {
+        const wrapper = getWrapper([]);
+        expect(wrapper.find(".drop-zone-instruction").text()).toBe("Drag variables here to hide them on all graphs.");
+    });
+});
diff --git a/app/static/tests/unit/components/graphSettings.test.ts b/app/static/tests/unit/components/graphSettings.test.ts
new file mode 100644
index 000000000..8fc3ee6fc
--- /dev/null
+++ b/app/static/tests/unit/components/graphSettings.test.ts
@@ -0,0 +1,113 @@
+import Vuex from "vuex";
+import { shallowMount } from "@vue/test-utils";
+import { BasicState } from "../../../src/app/store/basic/state";
+import GraphSettings from "../../../src/app/components/GraphSettings.vue";
+import { GraphsMutation } from "../../../src/app/store/graphs/mutations";
+import { defaultGraphSettings } from "../../../src/app/store/graphs/state";
+
+describe("GraphSettings", () => {
+    const mockSetLogScaleYAxis = jest.fn();
+    const mockSetLockYAxis = jest.fn();
+
+    const mockSetFitLogScaleYAxis = jest.fn();
+    const mockSetFitLockYAxis = jest.fn();
+
+    const getWrapper = (
+        graphIndex: number | undefined = 1,
+        fitPlot = false,
+        graphSettings = [defaultGraphSettings(), defaultGraphSettings()],
+        fitGraphSettings = defaultGraphSettings()
+    ) => {
+        const store = new Vuex.Store<BasicState>({
+            modules: {
+                graphs: {
+                    namespaced: true,
+                    state: {
+                        fitGraphSettings,
+                        config: graphSettings.map((settings) => ({ settings }))
+                    } as any,
+                    mutations: {
+                        [GraphsMutation.SetLogScaleYAxis]: mockSetLogScaleYAxis,
+                        [GraphsMutation.SetLockYAxis]: mockSetLockYAxis,
+                        [GraphsMutation.SetFitLogScaleYAxis]: mockSetFitLogScaleYAxis,
+                        [GraphsMutation.SetFitLockYAxis]: mockSetFitLockYAxis
+                    }
+                }
+            }
+        });
+        return shallowMount(GraphSettings, {
+            props: { graphIndex, fitPlot },
+            global: {
+                plugins: [store]
+            }
+        });
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("renders as expected when not fit plot", () => {
+        const wrapper = getWrapper(1, false, [
+            defaultGraphSettings(),
+            { lockYAxis: true, logScaleYAxis: true, yAxisRange: [0, 10] }
+        ]);
+        const labels = wrapper.findAll("label");
+        const inputs = wrapper.findAll("input");
+        expect(labels.length).toBe(2);
+        expect(inputs.length).toBe(2);
+        expect(labels[0].text()).toBe("Log scale y axis");
+        expect(inputs[0].attributes("type")).toBe("checkbox");
+        expect((inputs[0].element as HTMLInputElement).checked).toBe(true);
+        expect(labels[1].text()).toBe("Lock y axis");
+        expect(inputs[1].attributes("type")).toBe("checkbox");
+        expect((inputs[1].element as HTMLInputElement).checked).toBe(true);
+    });
+
+    it("renders as expected when fit plot", () => {
+        const wrapper = getWrapper(undefined, true, [{ lockYAxis: true, logScaleYAxis: true, yAxisRange: [0, 10] }]);
+        const inputs = wrapper.findAll("input");
+        expect((inputs[0].element as HTMLInputElement).checked).toBe(false);
+        expect((inputs[1].element as HTMLInputElement).checked).toBe(false);
+    });
+
+    it("commits change to log scale y axis setting, when not fit plot", async () => {
+        const wrapper = getWrapper(1, false);
+        const inputs = wrapper.findAll("input");
+        expect((inputs[0].element as HTMLInputElement).checked).toBe(false);
+        await inputs[0].setValue(true);
+        expect(mockSetLogScaleYAxis).toHaveBeenCalledTimes(1);
+        expect(mockSetLogScaleYAxis.mock.calls[0][1]).toStrictEqual({ graphIndex: 1, value: true });
+        expect(mockSetFitLogScaleYAxis).not.toHaveBeenCalled();
+    });
+
+    it("commits change to log scale y axis setting, when fit plot", async () => {
+        const wrapper = getWrapper(undefined, true);
+        const inputs = wrapper.findAll("input");
+        expect((inputs[0].element as HTMLInputElement).checked).toBe(false);
+        await inputs[0].setValue(true);
+        expect(mockSetFitLogScaleYAxis).toHaveBeenCalledTimes(1);
+        expect(mockSetFitLogScaleYAxis.mock.calls[0][1]).toBe(true);
+        expect(mockSetLogScaleYAxis).not.toHaveBeenCalled();
+    });
+
+    it("commits change to log scale y axis setting, when not fit plot", async () => {
+        const wrapper = getWrapper(1, false);
+        const inputs = wrapper.findAll("input");
+        expect((inputs[1].element as HTMLInputElement).checked).toBe(false);
+        await inputs[1].setValue(true);
+        expect(mockSetLockYAxis).toHaveBeenCalledTimes(1);
+        expect(mockSetLockYAxis.mock.calls[0][1]).toStrictEqual({ graphIndex: 1, value: true });
+        expect(mockSetFitLockYAxis).not.toHaveBeenCalled();
+    });
+
+    it("commits change to log scale y axis setting, when fit plot", async () => {
+        const wrapper = getWrapper(undefined, true);
+        const inputs = wrapper.findAll("input");
+        expect((inputs[1].element as HTMLInputElement).checked).toBe(false);
+        await inputs[1].setValue(true);
+        expect(mockSetFitLockYAxis).toHaveBeenCalledTimes(1);
+        expect(mockSetFitLockYAxis.mock.calls[0][1]).toBe(true);
+        expect(mockSetLockYAxis).not.toHaveBeenCalled();
+    });
+});
diff --git a/app/static/tests/unit/components/mixins/baseSensitivity.test.ts b/app/static/tests/unit/components/mixins/baseSensitivity.test.ts
index 061ad312e..292f6575d 100644
--- a/app/static/tests/unit/components/mixins/baseSensitivity.test.ts
+++ b/app/static/tests/unit/components/mixins/baseSensitivity.test.ts
@@ -7,8 +7,8 @@ import { AppState } from "../../../../src/app/store/appState/state";
 import { BaseSensitivityMutation } from "../../../../src/app/store/sensitivity/mutations";
 import { BaseSensitivityAction } from "../../../../src/app/store/sensitivity/actions";
 import { getters as graphGetters } from "../../../../src/app/store/graphs/getters";
-import mock = jest.mock;
 import { mockGraphsState } from "../../../mocks";
+import { defaultGraphSettings } from "../../../../src/app/store/graphs/state";
 
 describe("baseSensitivity mixin", () => {
     const mockSensSetUserSummaryDownloadFileName = jest.fn();
@@ -30,7 +30,14 @@ describe("baseSensitivity mixin", () => {
                 graphs: {
                     namespaced: true,
                     state: mockGraphsState({
-                        config: [{ selectedVariables, unselectedVariables: [] }]
+                        config: [
+                            {
+                                id: "123",
+                                selectedVariables,
+                                unselectedVariables: [],
+                                settings: defaultGraphSettings()
+                            }
+                        ]
                     }),
                     getters: graphGetters
                 },
diff --git a/app/static/tests/unit/components/options/graphSettings.test.ts b/app/static/tests/unit/components/options/graphSettings.test.ts
deleted file mode 100644
index 07dc5681f..000000000
--- a/app/static/tests/unit/components/options/graphSettings.test.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import Vuex from "vuex";
-import { shallowMount } from "@vue/test-utils";
-import { BasicState } from "../../../../src/app/store/basic/state";
-import GraphSettings from "../../../../src/app/components/options/GraphSettings.vue";
-import { GraphsMutation } from "../../../../src/app/store/graphs/mutations";
-
-describe("GraphSettings", () => {
-    const mockSetLogScaleYAxis = jest.fn();
-    const mockSetLockYAxis = jest.fn();
-
-    const getWrapper = (logScaleYAxis = true, lockYAxis = true) => {
-        const store = new Vuex.Store<BasicState>({
-            modules: {
-                graphs: {
-                    namespaced: true,
-                    state: {
-                        settings: {
-                            logScaleYAxis,
-                            lockYAxis
-                        }
-                    } as any,
-                    mutations: {
-                        [GraphsMutation.SetLogScaleYAxis]: mockSetLogScaleYAxis,
-                        [GraphsMutation.SetLockYAxis]: mockSetLockYAxis
-                    }
-                }
-            }
-        });
-        return shallowMount(GraphSettings, {
-            global: {
-                plugins: [store]
-            }
-        });
-    };
-
-    beforeEach(() => {
-        jest.clearAllMocks();
-    });
-
-    it("renders as expected", () => {
-        const wrapper = getWrapper();
-        const labels = wrapper.findAll("label");
-        const inputs = wrapper.findAll("input");
-        expect(labels.length).toBe(2);
-        expect(inputs.length).toBe(2);
-        expect(labels[0].text()).toBe("Log scale y axis");
-        expect(inputs[0].attributes("type")).toBe("checkbox");
-        expect((inputs[0].element as HTMLInputElement).checked).toBe(true);
-        expect(labels[1].text()).toBe("Lock y axis");
-        expect(inputs[1].attributes("type")).toBe("checkbox");
-        expect((inputs[1].element as HTMLInputElement).checked).toBe(true);
-    });
-
-    it("commits change to log scale y axis setting", async () => {
-        const wrapper = getWrapper(false);
-        const inputs = wrapper.findAll("input");
-        expect((inputs[0].element as HTMLInputElement).checked).toBe(false);
-        await inputs[0].setValue(true);
-        expect(mockSetLogScaleYAxis).toHaveBeenCalledTimes(1);
-        expect(mockSetLogScaleYAxis.mock.calls[0][1]).toBe(true);
-    });
-
-    it("commits change to log scale y axis setting", async () => {
-        const wrapper = getWrapper(false, false);
-        const inputs = wrapper.findAll("input");
-        expect((inputs[1].element as HTMLInputElement).checked).toBe(false);
-        await inputs[1].setValue(true);
-        expect(mockSetLockYAxis).toHaveBeenCalledTimes(1);
-        expect(mockSetLockYAxis.mock.calls[0][1]).toBe(true);
-    });
-});
diff --git a/app/static/tests/unit/components/options/linkData.test.ts b/app/static/tests/unit/components/options/linkData.test.ts
index d21406ba6..8a6d55b2e 100644
--- a/app/static/tests/unit/components/options/linkData.test.ts
+++ b/app/static/tests/unit/components/options/linkData.test.ts
@@ -6,6 +6,7 @@ import { getters } from "../../../../src/app/store/fitData/getters";
 import { mockFitDataState, mockFitState, mockGraphsState, mockModelState } from "../../../mocks";
 import { FitDataAction } from "../../../../src/app/store/fitData/actions";
 import { getters as graphGetters } from "../../../../src/app/store/graphs/getters";
+import { defaultGraphSettings } from "../../../../src/app/store/graphs/state";
 
 describe("LinkData", () => {
     const getWrapper = (includeColumns = true, includeValidModel = true, mockUpdateLinkedVariable = jest.fn()) => {
@@ -33,7 +34,14 @@ describe("LinkData", () => {
                 graphs: {
                     namespaced: true,
                     state: mockGraphsState({
-                        config: [{ selectedVariables: ["I", "R"], unselectedVariables: [] }]
+                        config: [
+                            {
+                                id: "123",
+                                selectedVariables: ["I", "R"],
+                                unselectedVariables: [],
+                                settings: defaultGraphSettings()
+                            }
+                        ]
                     }),
                     getters: graphGetters
                 },
diff --git a/app/static/tests/unit/components/options/optionsTab.test.ts b/app/static/tests/unit/components/options/optionsTab.test.ts
index d94e31319..3de4f0404 100644
--- a/app/static/tests/unit/components/options/optionsTab.test.ts
+++ b/app/static/tests/unit/components/options/optionsTab.test.ts
@@ -12,10 +12,11 @@ import SensitivityOptions from "../../../../src/app/components/options/Sensitivi
 import OptimisationOptions from "../../../../src/app/components/options/OptimisationOptions.vue";
 import { mockModelState, mockRunState } from "../../../mocks";
 import { RunMutation } from "../../../../src/app/store/run/mutations";
-import GraphSettings from "../../../../src/app/components/options/GraphSettings.vue";
+import GraphSettings from "../../../../src/app/components/GraphSettings.vue";
 import ParameterSets from "../../../../src/app/components/options/ParameterSets.vue";
 import { getters as runGetters } from "../../../../src/app/store/run/getters";
 import AdvancedSettings from "../../../../src/app/components/options/AdvancedSettings.vue";
+import GraphConfigsCollapsible from "../../../../src/app/components/graphConfig/GraphConfigsCollapsible.vue";
 
 describe("OptionsTab", () => {
     const mockTooltipDirective = jest.fn();
@@ -73,7 +74,7 @@ describe("OptionsTab", () => {
         });
         const wrapper = getWrapper(store);
         const collapses = wrapper.findAllComponents(VerticalCollapse);
-        expect(collapses.length).toBe(5);
+        expect(collapses.length).toBe(4);
         expect(collapses.at(0)!.props("title")).toBe("Model Parameters");
         expect(collapses.at(0)!.props("collapseId")).toBe("model-params");
         const paramValues = collapses.at(0)!.findComponent(ParameterValues);
@@ -81,18 +82,16 @@ describe("OptionsTab", () => {
         expect(collapses.at(1)!.props("title")).toBe("Run Options");
         expect(collapses.at(1)!.props("collapseId")).toBe("run-options");
         expect(collapses.at(1)!.findComponent(RunOptions).exists()).toBe(true);
-        expect(collapses.at(2)!.props("title")).toBe("Graph Settings");
-        expect(collapses.at(2)!.props("collapseId")).toBe("graph-settings");
-        expect(collapses.at(2)!.findComponent(GraphSettings).exists()).toBe(true);
-        expect(collapses.at(3)!.props("title")).toBe("Advanced Settings");
-        expect(collapses.at(3)!.props("collapseId")).toBe("advanced-settings");
-        expect(collapses.at(3)!.props("collapsedDefault")).toBe(true);
-        expect(collapses.at(3)!.findComponent(AdvancedSettings).exists()).toBe(true);
-        expect(collapses.at(4)!.props("title")).toBe("Saved Parameter Sets");
-        expect(collapses.at(4)!.props("collapseId")).toBe("parameter-sets");
-        expect(collapses.at(4)!.findComponent(ParameterSets).exists()).toBe(true);
+        expect(collapses.at(2)!.props("title")).toBe("Advanced Settings");
+        expect(collapses.at(2)!.props("collapseId")).toBe("advanced-settings");
+        expect(collapses.at(2)!.props("collapsedDefault")).toBe(true);
+        expect(collapses.at(2)!.findComponent(AdvancedSettings).exists()).toBe(true);
+        expect(collapses.at(3)!.props("title")).toBe("Saved Parameter Sets");
+        expect(collapses.at(3)!.props("collapseId")).toBe("parameter-sets");
+        expect(collapses.at(3)!.findComponent(ParameterSets).exists()).toBe(true);
         expect(wrapper.find("#reset-params-btn").exists()).toBe(true);
         expect(wrapper.find("#reset-params-btn").text()).toBe("Reset");
+        expect(wrapper.findComponent(GraphConfigsCollapsible).exists()).toBe(true);
     });
 
     it("can reset model parameters", async () => {
@@ -155,7 +154,7 @@ describe("OptionsTab", () => {
                     columnToFit: null
                 },
                 graphs: {
-                    settings: {
+                    fitGraphSettings: {
                         logScaleYAxis: false
                     }
                 }
@@ -187,16 +186,17 @@ describe("OptionsTab", () => {
         expect(collapses.at(3)!.props("title")).toBe("Optimisation");
         expect(collapses.at(3)!.props("collapseId")).toBe("optimisation");
         expect(collapses.at(3)!.findComponent(OptimisationOptions).exists()).toBe(true);
-        expect(collapses.at(4)!.props("title")).toBe("Graph Settings");
-        expect(collapses.at(4)!.props("collapseId")).toBe("graph-settings");
-        expect(collapses.at(4)!.findComponent(GraphSettings).exists()).toBe(true);
-        expect(collapses.at(5)!.props("title")).toBe("Advanced Settings");
-        expect(collapses.at(5)!.props("collapseId")).toBe("advanced-settings");
-        expect(collapses.at(5)!.props("collapsedDefault")).toBe(true);
-        expect(collapses.at(5)!.findComponent(AdvancedSettings).exists()).toBe(true);
-        expect(collapses.at(6)!.props("title")).toBe("Saved Parameter Sets");
-        expect(collapses.at(6)!.props("collapseId")).toBe("parameter-sets");
-        expect(collapses.at(6)!.findComponent(ParameterSets).exists()).toBe(true);
+        expect(collapses.at(4)!.props("title")).toBe("Advanced Settings");
+        expect(collapses.at(4)!.props("collapseId")).toBe("advanced-settings");
+        expect(collapses.at(4)!.props("collapsedDefault")).toBe(true);
+        expect(collapses.at(4)!.findComponent(AdvancedSettings).exists()).toBe(true);
+        expect(collapses.at(5)!.props("title")).toBe("Saved Parameter Sets");
+        expect(collapses.at(5)!.props("collapseId")).toBe("parameter-sets");
+        expect(collapses.at(5)!.findComponent(ParameterSets).exists()).toBe(true);
+        expect(collapses.at(6)!.props("title")).toBe("Fit Graph Settings");
+        expect(collapses.at(6)!.props("collapseId")).toBe("graph-settings");
+        expect(collapses.at(6)!.findComponent(GraphSettings).props("fitPlot")).toBe(true);
+
         expect(wrapper.find("#reset-params-btn").exists()).toBe(true);
         expect(wrapper.find("#reset-params-btn").text()).toBe("Reset");
     });
@@ -219,7 +219,7 @@ describe("OptionsTab", () => {
         });
         const wrapper = getWrapper(store);
         const collapses = wrapper.findAllComponents(VerticalCollapse);
-        expect(collapses.length).toBe(3);
+        expect(collapses.length).toBe(2);
         expect(collapses.at(0)!.props("title")).toBe("Model Parameters");
         expect(collapses.at(0)!.props("collapseId")).toBe("model-params");
         const paramValues = collapses.at(0)!.findComponent(ParameterValues);
@@ -227,9 +227,6 @@ describe("OptionsTab", () => {
         expect(collapses.at(1)!.props("title")).toBe("Run Options");
         expect(collapses.at(1)!.props("collapseId")).toBe("run-options");
         expect(collapses.at(1)!.findComponent(RunOptions).exists()).toBe(true);
-        expect(collapses.at(2)!.props("title")).toBe("Graph Settings");
-        expect(collapses.at(2)!.props("collapseId")).toBe("graph-settings");
-        expect(collapses.at(2)!.findComponent(GraphSettings).exists()).toBe(true);
         expect(wrapper.find("#reset-params-btn").exists()).toBe(true);
         expect(wrapper.find("#reset-params-btn").text()).toBe("Reset");
     });
diff --git a/app/static/tests/unit/components/run/runPlot.test.ts b/app/static/tests/unit/components/run/runPlot.test.ts
index a605b9df2..d92eeef60 100644
--- a/app/static/tests/unit/components/run/runPlot.test.ts
+++ b/app/static/tests/unit/components/run/runPlot.test.ts
@@ -9,7 +9,8 @@ import WodinPlot from "../../../../src/app/components/WodinPlot.vue";
 import { BasicState } from "../../../../src/app/store/basic/state";
 import { FitDataGetter } from "../../../../src/app/store/fitData/getters";
 import { getters as runGetters } from "../../../../src/app/store/run/getters";
-import { mockBasicState, mockGraphsState, mockRunState } from "../../../mocks";
+import { mockGraphsState, mockModelState, mockRunState } from "../../../mocks";
+import { defaultGraphSettings } from "../../../../src/app/store/graphs/state";
 
 describe("RunPlot", () => {
     const mockSolution = jest.fn().mockReturnValue({
@@ -87,6 +88,36 @@ describe("RunPlot", () => {
         config: [{ selectedVariables, unselectedVariables: [] }]
     };
 
+    const linkedXAxis = { autorange: false, range: [1, 2] };
+
+    const defaultRunState = () =>
+        mockRunState({
+            endTime: 99,
+            resultOde: mockResult,
+            parameterSets: [
+                {
+                    name: "Set 1",
+                    displayName: "Hey",
+                    displayNameErrorMsg: "",
+                    hidden: false,
+                    parameterValues: { a: 2 }
+                },
+                {
+                    name: "Set 2",
+                    displayName: "Bye",
+                    displayNameErrorMsg: "",
+                    hidden: false,
+                    parameterValues: { a: 4 }
+                }
+            ]
+        });
+
+    const graphConfig = {
+        selectedVariables,
+        unselectedVariables: [],
+        settings: defaultGraphSettings()
+    };
+
     afterEach(() => {
         jest.clearAllMocks();
     });
@@ -98,31 +129,15 @@ describe("RunPlot", () => {
                 model: {
                     paletteModel
                 },
-                run: mockRunState({
-                    endTime: 99,
-                    resultOde: mockResult,
-                    parameterSets: [
-                        {
-                            name: "Set 1",
-                            displayName: "Hey",
-                            displayNameErrorMsg: "",
-                            hidden: false,
-                            parameterValues: { a: 2 }
-                        },
-                        {
-                            name: "Set 2",
-                            displayName: "Bye",
-                            displayNameErrorMsg: "",
-                            hidden: false,
-                            parameterValues: { a: 4 }
-                        }
-                    ]
-                })
+                run: defaultRunState()
             } as any
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
-                fadePlot: false
+                fadePlot: false,
+                graphIndex: 0,
+                linkedXAxis,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -138,8 +153,10 @@ describe("RunPlot", () => {
             mockAllFitData,
             selectedVariables,
             {},
-            ["Hey", "Bye"]
+            ["Hey", "Bye"],
+            1
         ]);
+        expect(wodinPlot.props("linkedXAxis")).toStrictEqual(linkedXAxis);
 
         // Generates expected plot data from model
         const plotData = wodinPlot.props("plotData");
@@ -183,6 +200,33 @@ describe("RunPlot", () => {
         });
     });
 
+    it("emits updateXAxis event", () => {
+        const store = new Vuex.Store<BasicState>({
+            state: {
+                graphs: graphsState,
+                model: {
+                    paletteModel
+                },
+                run: defaultRunState()
+            } as any
+        });
+        const wrapper = shallowMount(RunPlot, {
+            props: {
+                fadePlot: false,
+                graphIndex: 0,
+                linkedXAxis,
+                graphConfig
+            },
+            global: {
+                plugins: [store]
+            }
+        });
+        const wodinPlot = wrapper.findComponent(WodinPlot);
+        const xAxis = { autorange: false, range: [111, 222] };
+        wodinPlot.vm.$emit("updateXAxis", xAxis);
+        expect(wrapper.emitted("updateXAxis")![0]).toStrictEqual([xAxis]);
+    });
+
     it("renders as expected when there are parameter set solutions", () => {
         const store = new Vuex.Store<BasicState>({
             state: {
@@ -229,7 +273,9 @@ describe("RunPlot", () => {
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
-                fadePlot: false
+                fadePlot: false,
+                graphIndex: 0,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -240,12 +286,15 @@ describe("RunPlot", () => {
         expect(wodinPlot.props("fadePlot")).toBe(false);
         expect(wodinPlot.props("placeholderMessage")).toBe("Model has not been run.");
         expect(wodinPlot.props("endTime")).toBe(99);
+        expect(wodinPlot.props("graphIndex")).toBe(0);
+        expect(wodinPlot.props("graphConfig")).toStrictEqual(graphConfig);
         expect(wodinPlot.props("redrawWatches")).toStrictEqual([
             mockSolution,
             mockAllFitData,
             selectedVariables,
             { Set1: mockParamSetResult1.solution, Set2: mockParamSetResult2.solution },
-            ["rand1", "rand2", "rand3"]
+            ["rand1", "rand2", "rand3"],
+            1
         ]);
 
         // Generates expected plot data from model
@@ -363,7 +412,9 @@ describe("RunPlot", () => {
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
-                fadePlot: false
+                fadePlot: false,
+                graphConfig,
+                graphIndex: 0
             },
             global: {
                 plugins: [store]
@@ -374,6 +425,8 @@ describe("RunPlot", () => {
         expect(wodinPlot.props("placeholderMessage")).toBe("Model has not been run.");
         expect(wodinPlot.props("endTime")).toBe(99);
         expect(wodinPlot.props("redrawWatches")).toStrictEqual([]);
+        expect(wodinPlot.props("graphIndex")).toBe(0);
+        expect(wodinPlot.props("graphConfig")).toStrictEqual(graphConfig);
 
         const plotData = wodinPlot.props("plotData");
         const data = plotData(0, 1, 10);
@@ -384,12 +437,14 @@ describe("RunPlot", () => {
         const store = new Vuex.Store<BasicState>({
             state: {
                 graphs: graphsState,
-                run: mockRunState()
+                run: mockRunState(),
+                model: mockModelState()
             } as any
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
-                fadePlot: true
+                fadePlot: true,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -448,7 +503,8 @@ describe("RunPlot", () => {
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
-                fadePlot: false
+                fadePlot: false,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -463,7 +519,8 @@ describe("RunPlot", () => {
             mockAllFitData,
             selectedVariables,
             {},
-            ["Hey", "Bye"]
+            ["Hey", "Bye"],
+            1
         ]);
 
         // Generates expected plot data from model
@@ -524,12 +581,14 @@ describe("RunPlot", () => {
                 graphs: mockGraphsState({
                     config: [{ selectedVariables: [] }]
                 } as any),
-                run: mockRunState()
+                run: mockRunState(),
+                model: mockModelState()
             } as any
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
-                fadePlot: true
+                fadePlot: true,
+                graphConfig: { ...graphConfig, selectedVariables: [] }
             },
             global: {
                 plugins: [store]
diff --git a/app/static/tests/unit/components/run/runStochasticPlot.test.ts b/app/static/tests/unit/components/run/runStochasticPlot.test.ts
index a7eacefe5..5d1693a0f 100644
--- a/app/static/tests/unit/components/run/runStochasticPlot.test.ts
+++ b/app/static/tests/unit/components/run/runStochasticPlot.test.ts
@@ -9,6 +9,7 @@ import WodinPlot from "../../../../src/app/components/WodinPlot.vue";
 import { StochasticState } from "../../../../src/app/store/stochastic/state";
 import RunPlot from "../../../../src/app/components/run/RunPlot.vue";
 import { mockGraphsState, mockModelState, mockRunState } from "../../../mocks";
+import { defaultGraphSettings } from "../../../../src/app/store/graphs/state";
 
 describe("RunPlot for stochastic", () => {
     const mockSolution = jest.fn().mockReturnValue({
@@ -32,7 +33,24 @@ describe("RunPlot for stochastic", () => {
 
     const selectedVariables = ["S", "I", "R"];
 
-    const graphsState = mockGraphsState({ config: [{ selectedVariables, unselectedVariables: [] }] });
+    const graphsState = mockGraphsState({
+        config: [
+            {
+                id: "1234",
+                selectedVariables,
+                unselectedVariables: [],
+                settings: defaultGraphSettings()
+            }
+        ]
+    });
+
+    const graphConfig = {
+        selectedVariables,
+        unselectedVariables: [],
+        settings: defaultGraphSettings()
+    };
+
+    const linkedXAxis = { autorange: false, range: [1, 2] };
 
     afterEach(() => {
         jest.clearAllMocks();
@@ -56,7 +74,10 @@ describe("RunPlot for stochastic", () => {
         });
         const wrapper = shallowMount(RunStochasticPlot, {
             props: {
-                fadePlot: false
+                fadePlot: false,
+                graphIndex: 0,
+                linkedXAxis,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -66,8 +87,11 @@ describe("RunPlot for stochastic", () => {
         expect(wodinPlot.props("fadePlot")).toBe(false);
         expect(wodinPlot.props("placeholderMessage")).toBe("Model has not been run.");
         expect(wodinPlot.props("endTime")).toBe(99);
-        expect(wodinPlot.props("redrawWatches")).toStrictEqual([mockSolution]);
+        expect(wodinPlot.props("redrawWatches")).toStrictEqual([mockSolution, 1]);
         expect(wodinPlot.props("recalculateOnRelayout")).toBe(true);
+        expect(wodinPlot.props("linkedXAxis")).toStrictEqual(linkedXAxis);
+        expect(wodinPlot.props("graphIndex")).toBe(0);
+        expect(wodinPlot.props("graphConfig")).toStrictEqual(graphConfig);
 
         // Generates expected plot data from model
         const plotData = wodinPlot.props("plotData");
@@ -102,6 +126,39 @@ describe("RunPlot for stochastic", () => {
         ]);
     });
 
+    it("emits updateXAxis event", () => {
+        const store = new Vuex.Store<StochasticState>({
+            state: {
+                graphs: graphsState,
+                model: mockModelState({ paletteModel }),
+                run: {
+                    endTime: 99,
+                    numberOfReplicates: 20,
+                    resultDiscrete: mockResult
+                },
+                config: {
+                    maxReplicatesDisplay: 50,
+                    maxReplicatesRun: 1000
+                }
+            } as any
+        });
+        const wrapper = shallowMount(RunStochasticPlot, {
+            props: {
+                fadePlot: false,
+                graphIndex: 0,
+                linkedXAxis,
+                graphConfig
+            },
+            global: {
+                plugins: [store]
+            }
+        });
+        const wodinPlot = wrapper.findComponent(WodinPlot);
+        const xAxis = { autorange: false, range: [111, 222] };
+        wodinPlot.vm.$emit("updateXAxis", xAxis);
+        expect(wrapper.emitted("updateXAxis")![0]).toStrictEqual([xAxis]);
+    });
+
     it("renders as expected when model has no stochastic result", () => {
         const store = new Vuex.Store<StochasticState>({
             state: {
@@ -114,7 +171,9 @@ describe("RunPlot for stochastic", () => {
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
-                fadePlot: false
+                fadePlot: false,
+                graphIndex: 0,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -125,6 +184,8 @@ describe("RunPlot for stochastic", () => {
         expect(wodinPlot.props("placeholderMessage")).toBe("Model has not been run.");
         expect(wodinPlot.props("endTime")).toBe(99);
         expect(wodinPlot.props("redrawWatches")).toStrictEqual([]);
+        expect(wodinPlot.props("graphIndex")).toBe(0);
+        expect(wodinPlot.props("graphConfig")).toStrictEqual(graphConfig);
 
         const plotData = wodinPlot.props("plotData");
         const data = plotData();
@@ -148,7 +209,8 @@ describe("RunPlot for stochastic", () => {
         });
         const wrapper = shallowMount(RunStochasticPlot, {
             props: {
-                fadePlot: false
+                fadePlot: false,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -171,7 +233,8 @@ describe("RunPlot for stochastic", () => {
         });
         const wrapper = shallowMount(RunPlot, {
             props: {
-                fadePlot: true
+                fadePlot: true,
+                graphConfig
             },
             global: {
                 plugins: [store]
@@ -195,7 +258,8 @@ describe("RunPlot for stochastic", () => {
         });
         const wrapper = shallowMount(RunStochasticPlot, {
             props: {
-                fadePlot: false
+                fadePlot: false,
+                graphConfig
             },
             global: {
                 plugins: [store]
diff --git a/app/static/tests/unit/components/run/runTab.test.ts b/app/static/tests/unit/components/run/runTab.test.ts
index 8f7047382..1bcab6ff8 100644
--- a/app/static/tests/unit/components/run/runTab.test.ts
+++ b/app/static/tests/unit/components/run/runTab.test.ts
@@ -8,7 +8,15 @@ import Vuex from "vuex";
 import { shallowMount } from "@vue/test-utils";
 import { nextTick } from "vue";
 import { BasicState } from "../../../../src/app/store/basic/state";
-import { mockBasicState, mockGraphsState, mockModelState, mockRunState, mockStochasticState } from "../../../mocks";
+import {
+    mockBasicState,
+    mockFitState,
+    mockGraphsState,
+    mockModelFitState,
+    mockModelState,
+    mockRunState,
+    mockStochasticState
+} from "../../../mocks";
 import { ModelState } from "../../../../src/app/store/model/state";
 import { RunState } from "../../../../src/app/store/run/state";
 import RunTab from "../../../../src/app/components/run/RunTab.vue";
@@ -26,6 +34,7 @@ import { AppType } from "../../../../src/app/store/appState/state";
 import { RunMutation } from "../../../../src/app/store/run/mutations";
 import { RunAction } from "../../../../src/app/store/run/actions";
 import { getters as graphGetters } from "../../../../src/app/store/graphs/getters";
+import { FitState } from "../../../../src/app/store/fit/state";
 
 describe("RunTab", () => {
     const defaultModelState = {
@@ -65,8 +74,11 @@ describe("RunTab", () => {
                 graphs: {
                     namespaced: true,
                     state: mockGraphsState({
-                        config: [{ selectedVariables, unselectedVariables: [] }]
-                    }),
+                        config: [
+                            { id: "123", selectedVariables, unselectedVariables: [] },
+                            { id: "456", selectedVariables: [], unselectedVariables: [] }
+                        ]
+                    } as any),
                     getters: graphGetters
                 },
                 model: {
@@ -108,8 +120,11 @@ describe("RunTab", () => {
                 graphs: {
                     namespaced: true,
                     state: mockGraphsState({
-                        config: [{ selectedVariables: ["S"], unselectedVariables: [] }]
-                    }),
+                        config: [
+                            { id: "123", selectedVariables: ["S"], unselectedVariables: [] },
+                            { id: "456", selectedVariables: [], unselectedVariables: [] }
+                        ]
+                    } as any),
                     getters: graphGetters
                 },
                 model: {
@@ -138,13 +153,59 @@ describe("RunTab", () => {
         });
     };
 
+    const getFitWrapper = () => {
+        const store = new Vuex.Store<FitState>({
+            state: mockFitState(),
+            modules: {
+                graphs: {
+                    namespaced: true,
+                    state: mockGraphsState({
+                        config: [
+                            { id: "123", selectedVariables: ["S"], unselectedVariables: [] },
+                            { id: "456", selectedVariables: [], unselectedVariables: [] }
+                        ]
+                    } as any),
+                    getters: graphGetters
+                },
+                modelFit: {
+                    namespaced: true,
+                    state: mockModelFitState({
+                        sumOfSquares: 21.2
+                    })
+                }
+            }
+        });
+        return shallowMount(RunTab, {
+            global: {
+                plugins: [store]
+            }
+        });
+    };
+
     it("renders as expected when can run model", () => {
         const runState = { ...defaultRunState, userDownloadFileName: "test.xlsx" };
         const wrapper = getWrapper(defaultModelState, runState);
         expect(wrapper.find("button#run-btn").text()).toBe("Run model");
         expect((wrapper.find("button#run-btn").element as HTMLButtonElement).disabled).toBe(false);
         expect(wrapper.findComponent(ActionRequiredMessage).props("message")).toBe("");
-        expect(wrapper.findComponent(RunPlot).props("fadePlot")).toBe(false);
+        const plots = wrapper.findAllComponents(RunPlot);
+        expect(plots.length).toBe(2);
+        expect(plots.at(0)!.props("graphIndex")).toBe(0);
+        expect(plots.at(0)!.props("fadePlot")).toBe(false);
+        expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual({ autorange: true });
+        expect(plots.at(0)!.props("graphConfig")).toStrictEqual({
+            id: "123",
+            selectedVariables: ["S"],
+            unselectedVariables: []
+        });
+        expect(plots.at(1)!.props("graphIndex")).toBe(1);
+        expect(plots.at(1)!.props("fadePlot")).toBe(false);
+        expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual({ autorange: true });
+        expect(plots.at(1)!.props("graphConfig")).toStrictEqual({
+            id: "456",
+            selectedVariables: [],
+            unselectedVariables: []
+        });
 
         // Download button disabled because there is no model solution
         const downloadBtn = wrapper.find("button#download-btn");
@@ -161,6 +222,23 @@ describe("RunTab", () => {
         expect(wrapper.findComponent(RunStochasticPlot).exists()).toBe(false);
     });
 
+    it("renders sumOfSquares for Fit app", () => {
+        const wrapper = getFitWrapper();
+        expect(wrapper.findAll("#squares").length).toBe(1);
+        expect(wrapper.find("#squares").text()).toBe("Sum of squares: 21.2");
+    });
+
+    it("propagates x axis changes to all run plots", async () => {
+        const wrapper = getWrapper();
+        const plots = wrapper.findAllComponents(RunPlot);
+        expect(plots.length).toBe(2);
+        const newXAxis = { autorange: false, range: [1, 10] };
+        plots.at(0)!.vm.$emit("updateXAxis", newXAxis);
+        await nextTick();
+        expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual(newXAxis);
+        expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual(newXAxis);
+    });
+
     it("renders as expected when app is stochastic", () => {
         const wrapper = getStochasticWrapper(
             {},
@@ -168,12 +246,42 @@ describe("RunTab", () => {
                 solution: jest.fn()
             }
         );
-        expect(wrapper.findComponent(RunStochasticPlot).props("fadePlot")).toBe(false);
+        const plots = wrapper.findAllComponents(RunStochasticPlot);
+        expect(plots.length).toBe(2);
+        expect(plots.at(0)!.props("graphIndex")).toBe(0);
+        expect(plots.at(0)!.props("fadePlot")).toBe(false);
+        expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual({ autorange: true });
+        expect(plots.at(0)!.props("graphConfig")).toStrictEqual({
+            id: "123",
+            selectedVariables: ["S"],
+            unselectedVariables: []
+        });
+
+        expect(plots.at(1)!.props("graphIndex")).toBe(1);
+        expect(plots.at(1)!.props("fadePlot")).toBe(false);
+        expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual({ autorange: true });
+        expect(plots.at(1)!.props("graphConfig")).toStrictEqual({
+            id: "456",
+            selectedVariables: [],
+            unselectedVariables: []
+        });
+
         expect(wrapper.findComponent(ActionRequiredMessage).props("message")).toBe("");
         expect(wrapper.findComponent(RunPlot).exists()).toBe(false);
         expect((wrapper.find("button#run-btn").element as HTMLButtonElement).disabled).toBe(false);
     });
 
+    it("propagates x axis changes to all run stochastic plots", async () => {
+        const wrapper = getStochasticWrapper();
+        const plots = wrapper.findAllComponents(RunStochasticPlot);
+        expect(plots.length).toBe(2);
+        const newXAxis = { autorange: false, range: [1, 10] };
+        plots.at(0)!.vm.$emit("updateXAxis", newXAxis);
+        await nextTick();
+        expect(plots.at(0)!.props("linkedXAxis")).toStrictEqual(newXAxis);
+        expect(plots.at(1)!.props("linkedXAxis")).toStrictEqual(newXAxis);
+    });
+
     it("disables run button when state has no runner", () => {
         const wrapper = getWrapper({ odinRunnerOde: null }, defaultRunState, false);
         expect((wrapper.find("button#run-btn").element as HTMLButtonElement).disabled).toBe(true);
@@ -224,7 +332,9 @@ describe("RunTab", () => {
         expect(wrapper.findComponent(ActionRequiredMessage).props("message")).toBe(
             "Model code has been updated. Compile code and Run Model to update."
         );
-        expect(wrapper.findComponent(RunPlot).props("fadePlot")).toBe(true);
+        const plots = wrapper.findAllComponents(RunPlot);
+        expect(plots.at(0)!.props("fadePlot")).toBe(true);
+        expect(plots.at(1)!.props("fadePlot")).toBe(true);
     });
 
     it("fades plot and shows message when model run required", () => {
@@ -239,7 +349,9 @@ describe("RunTab", () => {
         expect(wrapper.findComponent(ActionRequiredMessage).props("message")).toBe(
             "Plot is out of date: model code has been recompiled. Run model to update."
         );
-        expect(wrapper.findComponent(RunPlot).props("fadePlot")).toBe(true);
+        const plots = wrapper.findAllComponents(RunPlot);
+        expect(plots.at(0)!.props("fadePlot")).toBe(true);
+        expect(plots.at(1)!.props("fadePlot")).toBe(true);
     });
 
     it("fades plot and show message when no selected variables", () => {
@@ -247,12 +359,16 @@ describe("RunTab", () => {
         expect(wrapper.findComponent(ActionRequiredMessage).props("message")).toBe(
             "Please select at least one variable."
         );
-        expect(wrapper.findComponent(RunPlot).props("fadePlot")).toBe(true);
+        const plots = wrapper.findAllComponents(RunPlot);
+        expect(plots.at(0)!.props("fadePlot")).toBe(true);
+        expect(plots.at(1)!.props("fadePlot")).toBe(true);
     });
 
     it("fades plot when compile required when stochastic", () => {
         const wrapper = getStochasticWrapper({}, {}, true);
-        expect(wrapper.findComponent(RunStochasticPlot).props("fadePlot")).toBe(true);
+        const plots = wrapper.findAllComponents(RunStochasticPlot);
+        expect(plots.at(0)!.props("fadePlot")).toBe(true);
+        expect(plots.at(1)!.props("fadePlot")).toBe(true);
     });
 
     it("invokes run model action when run button is clicked", () => {
diff --git a/app/static/tests/unit/components/sensitivity/sensitivitySummaryDownload.test.ts b/app/static/tests/unit/components/sensitivity/sensitivitySummaryDownload.test.ts
index 6eb09f7a4..cc8ddf850 100644
--- a/app/static/tests/unit/components/sensitivity/sensitivitySummaryDownload.test.ts
+++ b/app/static/tests/unit/components/sensitivity/sensitivitySummaryDownload.test.ts
@@ -15,6 +15,7 @@ import LoadingSpinner from "../../../../src/app/components/LoadingSpinner.vue";
 import { ModelGetter } from "../../../../src/app/store/model/getters";
 import { getters as graphsGetters } from "../../../../src/app/store/graphs/getters";
 import { mockGraphsState } from "../../../mocks";
+import { defaultGraphSettings } from "../../../../src/app/store/graphs/state";
 
 describe("SensitivitySummaryDownload", () => {
     const mockSetUserSummaryDownloadFileName = jest.fn();
@@ -86,8 +87,10 @@ describe("SensitivitySummaryDownload", () => {
                     state: mockGraphsState({
                         config: [
                             {
+                                id: "123",
                                 selectedVariables: ["S"],
-                                unselectedVariables: []
+                                unselectedVariables: [],
+                                settings: defaultGraphSettings()
                             }
                         ]
                     }),
diff --git a/app/static/tests/unit/components/sensitivity/sensitivitySummaryPlot.test.ts b/app/static/tests/unit/components/sensitivity/sensitivitySummaryPlot.test.ts
index 36a3f3b42..5b5ec00e2 100644
--- a/app/static/tests/unit/components/sensitivity/sensitivitySummaryPlot.test.ts
+++ b/app/static/tests/unit/components/sensitivity/sensitivitySummaryPlot.test.ts
@@ -16,6 +16,7 @@ import { SensitivityMutation } from "../../../../src/app/store/sensitivity/mutat
 import SensitivitySummaryPlot from "../../../../src/app/components/sensitivity/SensitivitySummaryPlot.vue";
 import { RunGetter } from "../../../../src/app/store/run/getters";
 import WodinPlotDataSummary from "../../../../src/app/components/WodinPlotDataSummary.vue";
+import { GraphConfig } from "../../../../src/app/store/graphs/state";
 
 jest.mock("plotly.js-basic-dist-min", () => ({
     newPlot: jest.fn(),
@@ -198,22 +199,23 @@ describe("SensitivitySummaryPlot", () => {
                         [SensitivityMutation.SetPlotTime]: mockSetPlotTime,
                         [SensitivityMutation.SetLoading]: mockSetLoading
                     }
-                },
-                graphs: {
-                    namespaced: true,
-                    state: {
-                        settings: { logScaleYAxis },
-                        config: [{ selectedVariables }]
-                    }
                 }
             }
         });
 
+        const graphConfig = {
+            selectedVariables,
+            settings: { logScaleYAxis }
+        } as any;
+
         return shallowMount(SensitivitySummaryPlot, {
             global: {
                 plugins: [store]
             },
-            props: { fadePlot }
+            props: {
+                fadePlot,
+                graphConfig
+            }
         });
     };
 
@@ -530,7 +532,13 @@ describe("SensitivitySummaryPlot", () => {
 
     it("redraws plot if graph setting changes", async () => {
         const wrapper = getWrapper();
-        (store!.state as any).graphs.settings.logScaleYAxis = true;
+        const graphConfig = wrapper.props("graphConfig");
+        await wrapper.setProps({
+            graphConfig: {
+                ...graphConfig,
+                settings: { logScaleYAxis: true } as any
+            }
+        });
         await nextTick();
         expect(mockPlotlyNewPlot).toHaveBeenCalledTimes(2);
     });
diff --git a/app/static/tests/unit/components/sensitivity/sensitivityTab.test.ts b/app/static/tests/unit/components/sensitivity/sensitivityTab.test.ts
index f9e2960ce..ac2cd1756 100644
--- a/app/static/tests/unit/components/sensitivity/sensitivityTab.test.ts
+++ b/app/static/tests/unit/components/sensitivity/sensitivityTab.test.ts
@@ -43,6 +43,9 @@ describe("SensitivityTab", () => {
                         config: [
                             {
                                 selectedVariables
+                            },
+                            {
+                                selectedVariables: []
                             }
                         ]
                     },
@@ -126,7 +129,14 @@ describe("SensitivityTab", () => {
         const wrapper = getWrapper();
         expect(wrapper.findComponent(LoadingButton).props("isDisabled")).toBe(false);
         expect(wrapper.findComponent(ActionRequiredMessage).props("message")).toBe("");
-        expect(wrapper.findComponent(SensitivityTracesPlot).props("fadePlot")).toBe(false);
+        const plots = wrapper.findAllComponents(SensitivityTracesPlot);
+        expect(plots.length).toBe(2);
+        expect(plots.at(0)!.props("fadePlot")).toBe(false);
+        expect(plots.at(0)!.props("graphConfig")).toStrictEqual({ selectedVariables: ["S"] });
+        expect(plots.at(0)!.props("graphIndex")).toStrictEqual(0);
+        expect(plots.at(1)!.props("fadePlot")).toBe(false);
+        expect(plots.at(1)!.props("graphConfig")).toStrictEqual({ selectedVariables: [] });
+        expect(plots.at(1)!.props("graphIndex")).toStrictEqual(1);
         expect(wrapper.findComponent(ErrorInfo).props("error")).toBe(null);
         expect(wrapper.find("#sensitivity-running").exists()).toBe(false);
         expect(wrapper.findComponent(SensitivitySummaryPlot).exists()).toBe(false);
@@ -150,7 +160,12 @@ describe("SensitivityTab", () => {
     it("renders as expected when Time at Extreme", () => {
         const sensitivityState = { plotSettings: { plotType: SensitivityPlotType.TimeAtExtreme } as any };
         const wrapper = getWrapper(AppType.Basic, {}, sensitivityState);
-        expect(wrapper.findComponent(SensitivitySummaryPlot).props("fadePlot")).toBe(false);
+        const plots = wrapper.findAllComponents(SensitivitySummaryPlot);
+        expect(plots.length).toBe(2);
+        expect(plots.at(0)!.props("fadePlot")).toBe(false);
+        expect(plots.at(0)!.props("graphConfig")).toStrictEqual({ selectedVariables: ["S"] });
+        expect(plots.at(1)!.props("fadePlot")).toBe(false);
+        expect(plots.at(1)!.props("graphConfig")).toStrictEqual({ selectedVariables: [] });
         expect(wrapper.findComponent(SensitivityTracesPlot).exists()).toBe(false);
     });
 
diff --git a/app/static/tests/unit/components/sensitivity/sensitivityTracesPlot.test.ts b/app/static/tests/unit/components/sensitivity/sensitivityTracesPlot.test.ts
index 7cfc1c976..0a584d494 100644
--- a/app/static/tests/unit/components/sensitivity/sensitivityTracesPlot.test.ts
+++ b/app/static/tests/unit/components/sensitivity/sensitivityTracesPlot.test.ts
@@ -411,7 +411,7 @@ describe("SensitivityTracesPlot", () => {
                     paletteModel: mockPalette
                 },
                 graphs: {
-                    config: [{ selectedVariables: hasSelectedVariables ? selectedVariables : [] }]
+                    config: []
                 }
             } as any,
             modules: {
@@ -466,7 +466,11 @@ describe("SensitivityTracesPlot", () => {
         });
 
         return shallowMount(SensitivityTracesPlot, {
-            props: { fadePlot },
+            props: {
+                fadePlot,
+                graphConfig: { selectedVariables: hasSelectedVariables ? selectedVariables : [] } as any,
+                graphIndex: 0
+            },
             global: {
                 plugins: [store]
             }
@@ -495,8 +499,13 @@ describe("SensitivityTracesPlot", () => {
             undefined,
             selectedVariables,
             {},
-            []
+            [],
+            0
         ]);
+        expect(wodinPlot.props("graphConfig")).toStrictEqual({
+            selectedVariables: ["y", "z"]
+        });
+        expect(wodinPlot.props("graphIndex")).toBe(0);
 
         const plotData = wodinPlot.props("plotData");
         expect(plotData(0, 1, 100)).toStrictEqual(expectedPlotData);
@@ -515,8 +524,13 @@ describe("SensitivityTracesPlot", () => {
             mockAllFitData,
             selectedVariables,
             {},
-            []
+            [],
+            0
         ]);
+        expect(wodinPlot.props("graphConfig")).toStrictEqual({
+            selectedVariables: ["y", "z"]
+        });
+        expect(wodinPlot.props("graphIndex")).toBe(0);
 
         const plotData = wodinPlot.props("plotData");
         expect(plotData(0, 1, 100)).toStrictEqual([...expectedPlotData, expectedFitPlotData]);
@@ -535,7 +549,8 @@ describe("SensitivityTracesPlot", () => {
             mockAllFitData,
             selectedVariables,
             { "Set 1": mockParameterSetBatch1 },
-            ["Hey", "Bye"]
+            ["Hey", "Bye"],
+            0
         ]);
 
         const plotData = wodinPlot.props("plotData");
@@ -561,7 +576,7 @@ describe("SensitivityTracesPlot", () => {
         expect(wodinPlot.props("fadePlot")).toBe(false);
         expect(wodinPlot.props("placeholderMessage")).toBe("Sensitivity has not been run.");
         expect(wodinPlot.props("endTime")).toBe(1);
-        expect(wodinPlot.props("redrawWatches")).toStrictEqual([undefined, selectedVariables, {}, []]);
+        expect(wodinPlot.props("redrawWatches")).toStrictEqual([undefined, selectedVariables, {}, [], 0]);
 
         const plotData = wodinPlot.props("plotData");
         const data = plotData(0, 1, 100);
diff --git a/app/static/tests/unit/components/wodinPlot.test.ts b/app/static/tests/unit/components/wodinPlot.test.ts
index d8050c168..4227f6a00 100644
--- a/app/static/tests/unit/components/wodinPlot.test.ts
+++ b/app/static/tests/unit/components/wodinPlot.test.ts
@@ -10,12 +10,13 @@ jest.mock("plotly.js-basic-dist-min", () => ({
 /* eslint-disable import/first */
 import { shallowMount, VueWrapper } from "@vue/test-utils";
 import { nextTick } from "vue";
-import * as plotly from "plotly.js-basic-dist-min";
 import Vuex, { Store } from "vuex";
+import * as plotly from "plotly.js-basic-dist-min";
 import WodinPlot from "../../../src/app/components/WodinPlot.vue";
 import WodinPlotDataSummary from "../../../src/app/components/WodinPlotDataSummary.vue";
 import { BasicState } from "../../../src/app/store/basic/state";
 import { GraphsMutation } from "../../../src/app/store/graphs/mutations";
+import { defaultGraphSettings } from "../../../src/app/store/graphs/state";
 
 describe("WodinPlot", () => {
     const mockPlotlyNewPlot = jest.spyOn(plotly, "newPlot");
@@ -50,30 +51,33 @@ describe("WodinPlot", () => {
         }
     ];
     const mockPlotDataFn = jest.fn().mockReturnValue(mockPlotData);
+    const settings = defaultGraphSettings();
     const defaultProps = {
         fadePlot: false,
         endTime: 99,
         redrawWatches: [],
         plotData: mockPlotDataFn,
-        placeholderMessage: "No data available"
+        placeholderMessage: "No data available",
+        fitPlot: false,
+        graphIndex: 1,
+        graphConfig: { settings }
     };
 
     const mockSetYAxisRange = jest.fn();
+    const mockSetFitYAxisRange = jest.fn();
 
-    const getStore = (logScaleYAxis = false, lockYAxis = false) => {
+    const getStore = (fitGraphSettings = defaultGraphSettings()) => {
         return new Vuex.Store<BasicState>({
             modules: {
                 graphs: {
                     namespaced: true,
                     state: {
-                        settings: {
-                            logScaleYAxis,
-                            lockYAxis,
-                            yAxisRange: [10, 20]
-                        }
+                        fitGraphSettings,
+                        config: [{ settings }, { settings }]
                     },
                     mutations: {
-                        [GraphsMutation.SetYAxisRange]: mockSetYAxisRange
+                        [GraphsMutation.SetYAxisRange]: mockSetYAxisRange,
+                        [GraphsMutation.SetFitYAxisRange]: mockSetFitYAxisRange
                     }
                 }
             }
@@ -110,7 +114,6 @@ describe("WodinPlot", () => {
     afterEach(() => {
         jest.clearAllMocks();
         jest.restoreAllMocks();
-        mockSetYAxisRange.mockReset();
     });
 
     it("renders plot ref element", () => {
@@ -201,9 +204,8 @@ describe("WodinPlot", () => {
 
     const expectedLayout = {
         margin: { t: 25 },
-        uirevision: "true",
-        xaxis: { autorange: true, title: "Time" },
-        yaxis: { autorange: true, type: "linear" }
+        xaxis: { title: "Time" },
+        yaxis: { type: "linear" }
     };
 
     it("relayout reruns plotData and calls react if not autorange", async () => {
@@ -256,6 +258,71 @@ describe("WodinPlot", () => {
         expect(mockPlotlyReact.mock.calls[0][2]).toStrictEqual(expectedLayout);
     });
 
+    it("relayout preserves locked y axis range", async () => {
+        const store = getStore();
+        const wrapper = getWrapper(
+            {
+                graphConfig: {
+                    settings: {
+                        ...defaultGraphSettings(),
+                        lockYAxis: true,
+                        yAxisRange: [10, 20]
+                    }
+                }
+            },
+            store
+        );
+        const { relayout } = wrapper.vm as any;
+        const relayoutEvent = {
+            "xaxis.autorange": false,
+            "xaxis.range[0]": 2,
+            "xaxis.range[1]": 7,
+            "yaxis.autorange": false,
+            "yaxis.range[0]": 1,
+            "yaxis.range[1]": 2
+        };
+        await relayout(relayoutEvent);
+        expect(mockPlotDataFn.mock.calls.length).toBe(1);
+        expect(mockPlotDataFn.mock.calls[0][0]).toBe(2);
+        expect(mockPlotDataFn.mock.calls[0][1]).toBe(7);
+        expect(mockPlotDataFn.mock.calls[0][2]).toBe(1000);
+
+        const divElement = wrapper.find("div.plot").element;
+        expect(mockPlotlyReact.mock.calls[0][0]).toBe(divElement);
+        expect(mockPlotlyReact.mock.calls[0][1]).toStrictEqual(mockPlotData);
+        expect(mockPlotlyReact.mock.calls[0][2]).toStrictEqual({
+            ...expectedLayout,
+            yaxis: { type: "linear", autorange: false, range: [10, 20] } // locked y axis range
+        });
+    });
+
+    it("relayout saves and uses y axis range from last zoom if no locked y axis", async () => {
+        const wrapper = getWrapper();
+        const { relayout } = wrapper.vm as any;
+        const relayoutEvent1 = {
+            "yaxis.autorange": false,
+            "yaxis.range[0]": 1,
+            "yaxis.range[1]": 2
+        };
+        await relayout(relayoutEvent1);
+
+        const relayoutEvent2 = {
+            "xaxis.autorange": false,
+            "xaxis.range[0]": 2,
+            "xaxis.range[1]": 7
+        };
+        await relayout(relayoutEvent2);
+
+        const divElement = wrapper.find("div.plot").element;
+        expect(mockPlotlyReact.mock.calls.length).toBe(1);
+        expect(mockPlotlyReact.mock.calls[0][0]).toBe(divElement);
+        expect(mockPlotlyReact.mock.calls[0][1]).toStrictEqual(mockPlotData);
+        expect(mockPlotlyReact.mock.calls[0][2]).toStrictEqual({
+            ...expectedLayout,
+            yaxis: { type: "linear", autorange: false, range: [1, 2] }
+        });
+    });
+
     it("relayout does nothing on autorange false if t0 is undefined", async () => {
         const wrapper = getWrapper();
         mockPlotElementOn(wrapper);
@@ -347,8 +414,29 @@ describe("WodinPlot", () => {
     });
 
     it("renders y axis log scale if graph setting is set", async () => {
-        const store = getStore(true);
-        const wrapper = getWrapper({}, store);
+        const store = getStore();
+        const wrapper = getWrapper(
+            {
+                graphConfig: {
+                    settings: { ...defaultGraphSettings(), logScaleYAxis: true }
+                }
+            },
+            store
+        );
+        mockPlotElementOn(wrapper);
+
+        wrapper.setProps({ redrawWatches: [{} as any] });
+        await nextTick();
+        expect(mockPlotlyNewPlot.mock.calls[0][2]).toStrictEqual({
+            margin: { t: 25 },
+            xaxis: { title: "Time" },
+            yaxis: { type: "log" }
+        });
+    });
+
+    it("renders y axis log scale if fit graph setting is set, and fitPlot is true", async () => {
+        const store = getStore({ ...defaultGraphSettings(), logScaleYAxis: true });
+        const wrapper = getWrapper({ fitPlot: true }, store);
         mockPlotElementOn(wrapper);
 
         wrapper.setProps({ redrawWatches: [{} as any] });
@@ -361,8 +449,37 @@ describe("WodinPlot", () => {
     });
 
     it("locks axes if graph setting is set", async () => {
-        const store = getStore(false, true);
-        const wrapper = getWrapper({}, store);
+        const store = getStore();
+        const wrapper = getWrapper(
+            {
+                graphConfig: {
+                    settings: {
+                        ...defaultGraphSettings(),
+                        lockYAxis: true,
+                        yAxisRange: [10, 20]
+                    }
+                }
+            },
+            store
+        );
+        mockPlotElementOn(wrapper);
+
+        wrapper.setProps({ redrawWatches: [{} as any] });
+        await nextTick();
+        expect(mockPlotlyNewPlot.mock.calls[0][2]).toStrictEqual({
+            margin: { t: 25 },
+            xaxis: { title: "Time" },
+            yaxis: { type: "linear", autorange: false, range: [10, 20] }
+        });
+    });
+
+    it("locks axes if fit graph setting is set, and fitPlot is true", async () => {
+        const store = getStore({
+            ...defaultGraphSettings(),
+            lockYAxis: true,
+            yAxisRange: [10, 20]
+        });
+        const wrapper = getWrapper({ fitPlot: true }, store);
         mockPlotElementOn(wrapper);
 
         wrapper.setProps({ redrawWatches: [{} as any] });
@@ -375,7 +492,7 @@ describe("WodinPlot", () => {
     });
 
     it("commits SetYAxisRange on drawPlot", async () => {
-        const store = getStore(false, false);
+        const store = getStore();
         const wrapper = getWrapper({}, store);
         mockPlotElementOn(wrapper);
 
@@ -386,12 +503,36 @@ describe("WodinPlot", () => {
         await nextTick();
         await wrapper.setProps({ redrawWatches: [{} as any] });
         await nextTick();
-        expect(mockSetYAxisRange.mock.calls[0][1]).toStrictEqual([1, 2]);
+        expect(mockSetYAxisRange.mock.calls[0][1]).toStrictEqual({ graphIndex: 1, value: [1, 2] });
+        expect(mockSetFitYAxisRange).not.toHaveBeenCalled();
+    });
+
+    it("commits SetFitYAxisRange on drawPlot, when fitPlot is true", async () => {
+        const store = getStore();
+        const wrapper = getWrapper({ fitPlot: true }, store);
+        mockPlotElementOn(wrapper);
+
+        (wrapper.vm as any).plot = {
+            layout: mockLayout,
+            on: jest.fn()
+        };
+        await nextTick();
+        await wrapper.setProps({ redrawWatches: [{} as any] });
+        await nextTick();
+        expect(mockSetFitYAxisRange.mock.calls[0][1]).toStrictEqual([1, 2]);
+        expect(mockSetYAxisRange).not.toHaveBeenCalled();
     });
 
     it("relayout uses graph settings log scale y axis value", async () => {
-        const store = getStore(true);
-        const wrapper = getWrapper({}, store);
+        const store = getStore();
+        const wrapper = getWrapper(
+            {
+                graphConfig: {
+                    settings: { ...defaultGraphSettings(), logScaleYAxis: true }
+                }
+            },
+            store
+        );
         mockPlotElementOn(wrapper);
 
         wrapper.setProps({ redrawWatches: [{} as any] });
@@ -412,7 +553,7 @@ describe("WodinPlot", () => {
         expect(mockPlotlyReact.mock.calls[0][1]).toStrictEqual(mockPlotData);
         const expectedLogScaleLayout = {
             ...expectedLayout,
-            yaxis: { autorange: true, type: "log" }
+            yaxis: { type: "log" }
         };
         expect(mockPlotlyReact.mock.calls[0][2]).toStrictEqual(expectedLogScaleLayout);
     });
@@ -438,8 +579,11 @@ describe("WodinPlot", () => {
         expect(mockPlotlyNewPlot).toBeCalledTimes(1);
         expect(mockOn).toBeCalledTimes(1);
 
-        const store = (wrapper.vm as any).$store;
-        store.state.graphs.settings.logScaleYAxis = true;
+        await wrapper.setProps({
+            graphConfig: {
+                settings: { ...defaultGraphSettings(), logScaleYAxis: true }
+            }
+        });
         await nextTick();
 
         expect(mockPlotDataFn).toBeCalledTimes(2);
@@ -456,13 +600,110 @@ describe("WodinPlot", () => {
         expect(mockPlotlyNewPlot).toBeCalledTimes(1);
         expect(mockOn).toBeCalledTimes(1);
 
-        await wrapper.setProps({ fadePlot: true });
-        const store = (wrapper.vm as any).$store;
-        store.state.graphs.settings.logScaleYAxis = true;
+        await wrapper.setProps({
+            fadePlot: true,
+            graphConfig: {
+                settings: { ...defaultGraphSettings(), logScaleYAxis: true }
+            }
+        });
         await nextTick();
 
         expect(mockPlotDataFn).toBeCalledTimes(1);
         expect(mockPlotlyNewPlot).toBeCalledTimes(1);
         expect(mockOn).toBeCalledTimes(1);
     });
+
+    it("relayout emits updateXAxis event, if component has linked x axis and xaxis is in event", async () => {
+        const wrapper = getWrapper({ linkedXAxis: { autorange: true } });
+        const relayoutEvent = {
+            "xaxis.autorange": false,
+            "xaxis.range[0]": 2,
+            "xaxis.range[1]": 4
+        };
+
+        const { relayout } = wrapper.vm as any;
+        await relayout(relayoutEvent);
+        expect(wrapper.emitted("updateXAxis")![0]).toStrictEqual([{ autorange: false, range: [2, 4] }]);
+    });
+
+    it("relayout does not emit updateXAxis event, if xaxis is not in event", async () => {
+        const wrapper = getWrapper({ linkedXAxis: { autorange: true } });
+        const relayoutEvent = {
+            "yaxis.autorange": false,
+            "yaxis.range[0]": 2,
+            "yaxis.range[1]": 4
+        };
+
+        const { relayout } = wrapper.vm as any;
+        await relayout(relayoutEvent);
+        expect(wrapper.emitted("updateXAxis")).toBe(undefined);
+    });
+
+    it("update to linkedXAxis triggers relayout", async () => {
+        const wrapper = getWrapper({ linkedXAxis: { autorange: true } });
+        mockPlotElementOn(wrapper);
+        wrapper.setProps({ linkedXAxis: { autorange: false, range: [4, 6] } });
+        await nextTick();
+
+        expect(mockPlotDataFn).toHaveBeenCalledWith(4, 6, 1000);
+        expect(mockPlotlyReact).toHaveBeenCalledTimes(1);
+        const divElement = wrapper.find("div.plot").element;
+        expect(mockPlotlyReact.mock.calls[0][0]).toBe(divElement);
+        expect(mockPlotlyReact.mock.calls[0][1]).toStrictEqual(mockPlotData);
+        expect(mockPlotlyReact.mock.calls[0][2]).toStrictEqual(expectedLayout);
+        expect(mockPlotlyReact.mock.calls[0][3]).toStrictEqual({ responsive: true });
+    });
+
+    it("drawPlot uses linked x axis to generate data", async () => {
+        const wrapper = getWrapper({
+            linkedXAxis: { autorange: false, range: [3, 5] }
+        });
+        mockPlotElementOn(wrapper);
+
+        wrapper.setProps({ redrawWatches: [{} as any] });
+        await nextTick();
+        expect(mockPlotDataFn.mock.calls.length).toBe(2);
+        expect(mockPlotDataFn.mock.calls[1][0]).toBe(3);
+        expect(mockPlotDataFn.mock.calls[1][1]).toBe(5);
+        expect(mockPlotDataFn.mock.calls[1][2]).toBe(1000);
+    });
+
+    it("does not display Time xAxis label if not final config in array", async () => {
+        const store = getStore();
+        const wrapper = getWrapper(
+            {
+                graphIndex: 0
+            },
+            store
+        );
+        mockPlotElementOn(wrapper);
+
+        wrapper.setProps({ redrawWatches: [{} as any] });
+        await nextTick();
+        expect(mockPlotlyNewPlot.mock.calls[0][2]).toStrictEqual({
+            margin: { t: 25 },
+            xaxis: { title: "" },
+            yaxis: { type: "linear" }
+        });
+    });
+
+    it("does display Time xAxis label if fitPlot is true", async () => {
+        const store = getStore();
+        const wrapper = getWrapper(
+            {
+                graphIndex: 0,
+                fitPlot: true
+            },
+            store
+        );
+        mockPlotElementOn(wrapper);
+
+        wrapper.setProps({ redrawWatches: [{} as any] });
+        await nextTick();
+        expect(mockPlotlyNewPlot.mock.calls[0][2]).toStrictEqual({
+            margin: { t: 25 },
+            xaxis: { title: "Time" },
+            yaxis: { type: "linear" }
+        });
+    });
 });
diff --git a/app/static/tests/unit/plot.test.ts b/app/static/tests/unit/plot.test.ts
index 66f087116..5b73579e9 100644
--- a/app/static/tests/unit/plot.test.ts
+++ b/app/static/tests/unit/plot.test.ts
@@ -114,7 +114,7 @@ describe("allFitDataToPlotly", () => {
     };
 
     it("creates unlinked data", () => {
-        const res = allFitDataToPlotly(allFitData, palette, 0, 4);
+        const res = allFitDataToPlotly(allFitData, palette, 0, 4, ["B"]);
         expect(res).toStrictEqual([
             {
                 marker: { color: "#1c0a00" }, // first data colour
@@ -136,12 +136,12 @@ describe("allFitDataToPlotly", () => {
     });
 
     it("returns empty set if data missing", () => {
-        const res = allFitDataToPlotly(null, palette, 0, 4);
+        const res = allFitDataToPlotly(null, palette, 0, 4, ["B"]);
         expect(res).toStrictEqual([]);
     });
 
     it("filters data by time", () => {
-        const res = allFitDataToPlotly(allFitData, palette, 1, 3);
+        const res = allFitDataToPlotly(allFitData, palette, 1, 3, ["B"]);
         expect(res).toStrictEqual([
             {
                 marker: { color: "#1c0a00" },
@@ -168,7 +168,8 @@ describe("allFitDataToPlotly", () => {
             linkedVariables: { a: null, b: "B" },
             timeVariable: "t"
         };
-        const res = allFitDataToPlotly(allFitDataLinked, palette, 0, 4);
+        const selectedVariables = ["A", "B"];
+        const res = allFitDataToPlotly(allFitDataLinked, palette, 0, 4, selectedVariables);
         expect(res).toStrictEqual([
             {
                 marker: { color: "#1c0a00" }, // first data colour
@@ -188,6 +189,24 @@ describe("allFitDataToPlotly", () => {
             }
         ]);
     });
+
+    it("adds transparent data for unselected variable", () => {
+        const allFitDataLinked = {
+            data,
+            linkedVariables: { a: null, b: "B" },
+            timeVariable: "t"
+        };
+        const selectedVariables = ["A"];
+        const res = allFitDataToPlotly(allFitDataLinked, palette, 0, 4, selectedVariables);
+        expect(res[1]).toStrictEqual({
+            marker: { color: "transparent" }, // Model colour
+            mode: "markers",
+            name: "b",
+            type: "scatter",
+            x: [0, 1, 2, 3, 4],
+            y: [2, 4, 6, 8, 10]
+        });
+    });
 });
 
 describe("fitDataToPlotly", () => {
diff --git a/app/static/tests/unit/serialiser.test.ts b/app/static/tests/unit/serialiser.test.ts
index 95e2a0222..0a8d255b6 100644
--- a/app/static/tests/unit/serialiser.test.ts
+++ b/app/static/tests/unit/serialiser.test.ts
@@ -25,6 +25,13 @@ import { Language } from "../../src/app/types/languageTypes";
 import { AdvancedOptions } from "../../src/app/types/responseTypes";
 import { AdvancedComponentType } from "../../src/app/store/run/state";
 import { noSensitivityUpdateRequired } from "../../src/app/store/sensitivity/sensitivity";
+import { defaultGraphSettings } from "../../src/app/store/graphs/state";
+
+jest.mock("../../src/app/utils", () => {
+    return {
+        newUid: jest.fn().mockReturnValue("12345")
+    };
+});
 
 describe("serialise", () => {
     const codeState = {
@@ -364,15 +371,21 @@ describe("serialise", () => {
     });
 
     const graphsState = mockGraphsState({
-        settings: {
+        fitGraphSettings: {
             logScaleYAxis: true,
             lockYAxis: true,
             yAxisRange: [1, 2]
         },
         config: [
             {
+                id: "123",
                 selectedVariables: ["S", "I"],
-                unselectedVariables: ["R"]
+                unselectedVariables: ["R"],
+                settings: {
+                    logScaleYAxis: false,
+                    lockYAxis: true,
+                    yAxisRange: [10, 20]
+                }
             }
         ]
     });
@@ -536,6 +549,25 @@ describe("serialise", () => {
         }
     };
 
+    const expectedGraphs = {
+        fitGraphSettings: {
+            logScaleYAxis: true,
+            lockYAxis: true,
+            yAxisRange: [1, 2]
+        },
+        config: [
+            {
+                selectedVariables: ["S", "I"],
+                unselectedVariables: ["R"],
+                settings: {
+                    logScaleYAxis: false,
+                    lockYAxis: true,
+                    yAxisRange: [10, 20]
+                }
+            }
+        ]
+    };
+
     it("serialises BasicState as expected", () => {
         const serialised = serialiseState(basicState);
         const expected = {
@@ -545,7 +577,7 @@ describe("serialise", () => {
             run: expectedRun,
             sensitivity: expectedSensitivity,
             multiSensitivity: expectedMultiSensitivity,
-            graphs: graphsState
+            graphs: expectedGraphs
         };
         expect(JSON.parse(serialised)).toStrictEqual(expected);
     });
@@ -561,7 +593,7 @@ describe("serialise", () => {
             multiSensitivity: expectedMultiSensitivity,
             fitData: expectedFitData,
             modelFit: expectedModelFit,
-            graphs: graphsState
+            graphs: expectedGraphs
         };
         expect(JSON.parse(serialised)).toStrictEqual(expected);
     });
@@ -626,7 +658,7 @@ describe("serialise", () => {
                 ...expectedModelFit,
                 result: { ...expectedModelFit.result, hasResult: false }
             },
-            graphs: graphsState
+            graphs: expectedGraphs
         };
         expect(JSON.parse(serialised)).toStrictEqual(expected);
     });
@@ -651,7 +683,7 @@ describe("serialise", () => {
             multiSensitivity: { ...expectedMultiSensitivity, result: null },
             fitData: expectedFitData,
             modelFit: { ...expectedModelFit, result: null },
-            graphs: graphsState
+            graphs: expectedGraphs
         };
         expect(JSON.parse(serialised)).toStrictEqual(expected);
     });
@@ -700,7 +732,17 @@ describe("serialise", () => {
             fitData: mockFitDataState(),
             modelFit: mockModelFitState(),
             versions: mockVersionsState(),
-            graphs: mockGraphsState()
+            graphs: mockGraphsState({
+                config: [
+                    {
+                        id: "12345", // id from mocked newUid
+                        selectedVariables: [],
+                        unselectedVariables: [],
+                        settings: defaultGraphSettings()
+                    }
+                ],
+                fitGraphSettings: defaultGraphSettings()
+            })
         });
     });
 
@@ -709,8 +751,6 @@ describe("serialise", () => {
             openVisualisationTab: VisualisationTab.Fit,
             code: mockCodeState(),
             model: mockModelState({
-                selectedVariables: undefined,
-                unselectedVariables: undefined,
                 odinModelResponse: {
                     metadata: {
                         variables: ["S", "I", "R"]
@@ -736,12 +776,19 @@ describe("serialise", () => {
             sensitivity: {},
             fitData: {},
             modelFit: {},
-            graphs: defaultGraphsState,
+            graphs: defaultGraphsState(),
             versions: null
         } as any;
         deserialiseState(target, serialised);
-        expect(target.graphs.config[0].selectedVariables).toStrictEqual(["S", "I", "R"]);
-        expect(target.graphs.config[0].unselectedVariables).toStrictEqual([]);
+        expect(target.graphs.config).toStrictEqual([
+            {
+                id: "12345",
+                selectedVariables: ["S", "I", "R"],
+                unselectedVariables: [],
+                settings: defaultGraphSettings()
+            }
+        ]);
+        expect(target.graphs.fitGraphSettings).toStrictEqual(defaultGraphSettings());
     });
 
     it("deserialises default graph settings when undefined in serialised state", () => {
@@ -771,12 +818,14 @@ describe("serialise", () => {
             fitData: {},
             modelFit: {},
             versions: null,
-            graphs: defaultGraphsState
+            graphs: defaultGraphsState()
         } as any;
         // sanity check
-        expect(target.graphs.settings.logScaleYAxis).toBe(false);
+        expect(target.graphs.fitGraphSettings.logScaleYAxis).toBe(false);
+        expect(target.graphs.config[0].settings.logScaleYAxis).toBe(false);
 
         deserialiseState(target, serialised);
-        expect(target.graphs.settings.logScaleYAxis).toBe(false);
+        expect(target.graphs.fitGraphSettings.logScaleYAxis).toBe(false);
+        expect(target.graphs.config[0].settings.logScaleYAxis).toBe(false);
     });
 });
diff --git a/app/static/tests/unit/store/basic/basic.test.ts b/app/static/tests/unit/store/basic/basic.test.ts
index b8e778373..36a52d22a 100644
--- a/app/static/tests/unit/store/basic/basic.test.ts
+++ b/app/static/tests/unit/store/basic/basic.test.ts
@@ -2,7 +2,7 @@ import { localStorageManager } from "../../../../src/app/localStorageManager";
 
 jest.mock("../../../../src/app/utils", () => {
     return {
-        newSessionId: jest.fn().mockReturnValue("12345")
+        newUid: jest.fn().mockReturnValue("12345")
     };
 });
 
diff --git a/app/static/tests/unit/store/fit/fit.test.ts b/app/static/tests/unit/store/fit/fit.test.ts
index 33fe67d97..a3066d208 100644
--- a/app/static/tests/unit/store/fit/fit.test.ts
+++ b/app/static/tests/unit/store/fit/fit.test.ts
@@ -2,7 +2,7 @@ import { localStorageManager } from "../../../../src/app/localStorageManager";
 
 jest.mock("../../../../src/app/utils", () => {
     return {
-        newSessionId: jest.fn().mockReturnValue("12345")
+        newUid: jest.fn().mockReturnValue("12345")
     };
 });
 
diff --git a/app/static/tests/unit/store/graphs/actions.test.ts b/app/static/tests/unit/store/graphs/actions.test.ts
index caba3f8e8..6beebecfb 100644
--- a/app/static/tests/unit/store/graphs/actions.test.ts
+++ b/app/static/tests/unit/store/graphs/actions.test.ts
@@ -3,12 +3,13 @@ import { actions, GraphsAction } from "../../../../src/app/store/graphs/actions"
 import { GraphsMutation } from "../../../../src/app/store/graphs/mutations";
 import { AppType } from "../../../../src/app/store/appState/state";
 import { FitDataAction } from "../../../../src/app/store/fitData/actions";
+import { defaultGraphSettings } from "../../../../src/app/store/graphs/state";
 
 describe("Graphs actions", () => {
     const modelState = {
         odinModelResponse: {
             metadata: {
-                variables: ["a", "b", "c"]
+                variables: ["b", "a", "c"]
             }
         }
     } as any;
@@ -40,7 +41,7 @@ describe("Graphs actions", () => {
         expect(commit.mock.calls[0][0]).toBe(GraphsMutation.SetSelectedVariables);
         expect(commit.mock.calls[0][1]).toStrictEqual({
             graphIndex: 1,
-            selectedVariables: ["a", "b"],
+            selectedVariables: ["b", "a"], // should have reordered variables to match model
             unselectedVariables: ["c"]
         });
         expect(dispatch).not.toHaveBeenCalled();
@@ -67,7 +68,7 @@ describe("Graphs actions", () => {
         expect(commit.mock.calls[0][0]).toBe(GraphsMutation.SetSelectedVariables);
         expect(commit.mock.calls[0][1]).toStrictEqual({
             graphIndex: 1,
-            selectedVariables: ["a", "b"],
+            selectedVariables: ["b", "a"],
             unselectedVariables: ["c"]
         });
         expect(dispatch).toHaveBeenCalledTimes(1);
@@ -75,4 +76,18 @@ describe("Graphs actions", () => {
         expect(dispatch.mock.calls[0][1]).toBe(null);
         expect(dispatch.mock.calls[0][2]).toStrictEqual({ root: true });
     });
+    it("NewGraph adds empty graph", () => {
+        const commit = jest.fn();
+
+        (actions[GraphsAction.NewGraph] as any)({
+            commit,
+            rootState
+        });
+        expect(commit).toHaveBeenCalledTimes(1);
+        expect(commit.mock.calls[0][0]).toBe(GraphsMutation.AddGraph);
+        expect(commit.mock.calls[0][1].selectedVariables).toStrictEqual([]);
+        expect(commit.mock.calls[0][1].unselectedVariables).toStrictEqual(["b", "a", "c"]);
+        expect(commit.mock.calls[0][1].id.length).toBe(32);
+        expect(commit.mock.calls[0][1].settings).toStrictEqual(defaultGraphSettings());
+    });
 });
diff --git a/app/static/tests/unit/store/graphs/getters.test.ts b/app/static/tests/unit/store/graphs/getters.test.ts
new file mode 100644
index 000000000..e1a11c9c1
--- /dev/null
+++ b/app/static/tests/unit/store/graphs/getters.test.ts
@@ -0,0 +1,40 @@
+import { mockGraphsState } from "../../../mocks";
+import { getters, GraphsGetter } from "../../../../src/app/store/graphs/getters";
+import { defaultGraphSettings } from "../../../../src/app/store/graphs/state";
+
+describe("GraphsGetters", () => {
+    const settings = defaultGraphSettings();
+
+    it("gets allSelectedVariables", () => {
+        const state = mockGraphsState({
+            config: [
+                { id: "123", selectedVariables: ["a", "b"], unselectedVariables: ["c", "d"], settings },
+                { id: "456", selectedVariables: ["d"], unselectedVariables: ["a", "b", "c"], settings }
+            ]
+        });
+        expect((getters[GraphsGetter.allSelectedVariables] as any)(state)).toStrictEqual(["a", "b", "d"]);
+    });
+
+    it("gets hiddenVariables", () => {
+        const testGetters = {
+            allSelectedVariables: ["a", "b", "d"]
+        };
+        const rootState = {
+            model: {
+                odinModelResponse: {
+                    metadata: {
+                        variables: ["e", "d", "c", "b", "a"]
+                    }
+                }
+            }
+        } as any;
+        expect((getters[GraphsGetter.hiddenVariables] as any)({}, testGetters, rootState)).toStrictEqual(["e", "c"]);
+    });
+
+    it("gets legend width", () => {
+        const testGetters = {
+            allSelectedVariables: ["a", "zz", "a longer name"]
+        };
+        expect((getters[GraphsGetter.legendWidth] as any)({}, testGetters)).toBe(170);
+    });
+});
diff --git a/app/static/tests/unit/store/graphs/mutations.test.ts b/app/static/tests/unit/store/graphs/mutations.test.ts
index fd590c102..7d3647221 100644
--- a/app/static/tests/unit/store/graphs/mutations.test.ts
+++ b/app/static/tests/unit/store/graphs/mutations.test.ts
@@ -1,36 +1,64 @@
 import { mutations } from "../../../../src/app/store/graphs/mutations";
-import { GraphsState } from "../../../../src/app/store/graphs/state";
+import { defaultGraphSettings, GraphsState } from "../../../../src/app/store/graphs/state";
 import { mockGraphsState, mockModelState } from "../../../mocks";
 
 describe("Graphs mutations", () => {
-    const state: GraphsState = mockGraphsState();
+    const state: GraphsState = mockGraphsState({
+        config: [
+            {
+                id: "123",
+                selectedVariables: ["S"],
+                unselectedVariables: [],
+                settings: defaultGraphSettings()
+            },
+            {
+                id: "456",
+                selectedVariables: ["I"],
+                unselectedVariables: [],
+                settings: defaultGraphSettings()
+            }
+        ]
+    });
 
     it("sets logScaleYAxis", () => {
-        mutations.SetLogScaleYAxis(state, true);
-        expect(state.settings.logScaleYAxis).toBe(true);
+        mutations.SetLogScaleYAxis(state, { graphIndex: 1, value: true });
+        expect(state.config[1].settings.logScaleYAxis).toBe(true);
     });
 
     it("sets lockYAxis", () => {
-        mutations.SetLockYAxis(state, true);
-        expect(state.settings.lockYAxis).toBe(true);
+        mutations.SetLockYAxis(state, { graphIndex: 1, value: true });
+        expect(state.config[1].settings.lockYAxis).toBe(true);
     });
 
     it("sets yAxisRange", () => {
         mutations.SetYAxisRange(state, {
-            x: [1, 2],
-            y: [3, 4]
-        });
-        expect(state.settings.yAxisRange).toStrictEqual({
-            x: [1, 2],
-            y: [3, 4]
+            graphIndex: 1,
+            value: [3, 4]
         });
+        expect(state.config[1].settings.yAxisRange).toStrictEqual([3, 4]);
+    });
+
+    it("sets logScaleYAxis for fit graph", () => {
+        mutations.SetFitLogScaleYAxis(state, true);
+        expect(state.fitGraphSettings.logScaleYAxis).toBe(true);
+    });
+
+    it("sets lockYAxis for fit graph", () => {
+        mutations.SetFitLockYAxis(state, true);
+        expect(state.fitGraphSettings.lockYAxis).toBe(true);
+    });
+
+    it("sets yAxisRange", () => {
+        mutations.SetFitYAxisRange(state, [3, 4]);
+        expect(state.fitGraphSettings.yAxisRange).toStrictEqual([3, 4]);
     });
 
     it("SetSelectedVariables sets selected and unselected variables", () => {
+        const settings = defaultGraphSettings();
         const testState = mockGraphsState({
             config: [
-                { selectedVariables: [], unselectedVariables: [] },
-                { selectedVariables: [], unselectedVariables: [] }
+                { id: "123", selectedVariables: [], unselectedVariables: [], settings },
+                { id: "456", selectedVariables: [], unselectedVariables: [], settings }
             ]
         });
         mutations.SetSelectedVariables(testState, {
@@ -38,7 +66,50 @@ describe("Graphs mutations", () => {
             selectedVariables: ["x", "z"],
             unselectedVariables: ["y"]
         });
-        expect(testState.config[1]).toStrictEqual({ selectedVariables: ["x", "z"], unselectedVariables: ["y"] });
-        expect(testState.config[0]).toStrictEqual({ selectedVariables: [], unselectedVariables: [] });
+        expect(testState.config[1]).toStrictEqual({
+            id: "456",
+            selectedVariables: ["x", "z"],
+            unselectedVariables: ["y"],
+            settings
+        });
+        expect(testState.config[0]).toStrictEqual({
+            id: "123",
+            selectedVariables: [],
+            unselectedVariables: [],
+            settings
+        });
+    });
+
+    it("AddGraph pushes new graph to config", () => {
+        const settings = defaultGraphSettings();
+        const testState = mockGraphsState({
+            config: [{ id: "123", selectedVariables: ["a"], unselectedVariables: ["b", "c"], settings }]
+        });
+        mutations.AddGraph(testState, {
+            id: "456",
+            selectedVariables: [],
+            unselectedVariables: ["b", "a", "c"],
+            settings
+        });
+        expect(testState.config).toStrictEqual([
+            { id: "123", selectedVariables: ["a"], unselectedVariables: ["b", "c"], settings },
+            { id: "456", selectedVariables: [], unselectedVariables: ["b", "a", "c"], settings }
+        ]);
+    });
+
+    it("DeleteGraph removes graph from config", () => {
+        const settings = defaultGraphSettings();
+        const testState = mockGraphsState({
+            config: [
+                { id: "1", selectedVariables: ["a"], unselectedVariables: ["b", "c"], settings },
+                { id: "2", selectedVariables: ["b"], unselectedVariables: ["a", "c"], settings },
+                { id: "3", selectedVariables: ["c"], unselectedVariables: ["a", "b"], settings }
+            ]
+        });
+        mutations.DeleteGraph(testState, 1);
+        expect(testState.config).toStrictEqual([
+            { id: "1", selectedVariables: ["a"], unselectedVariables: ["b", "c"], settings },
+            { id: "3", selectedVariables: ["c"], unselectedVariables: ["a", "b"], settings }
+        ]);
     });
 });
diff --git a/app/static/tests/unit/store/stochastic/stochastic.test.ts b/app/static/tests/unit/store/stochastic/stochastic.test.ts
index a1b519bc0..c4a2e0fe7 100644
--- a/app/static/tests/unit/store/stochastic/stochastic.test.ts
+++ b/app/static/tests/unit/store/stochastic/stochastic.test.ts
@@ -2,11 +2,11 @@ import { localStorageManager } from "../../../../src/app/localStorageManager";
 
 jest.mock("../../../../src/app/utils", () => {
     return {
-        newSessionId: jest.fn().mockReturnValue("12345")
+        newUid: jest.fn().mockReturnValue("12345")
     };
 });
 
-describe("basic", () => {
+describe("stochasic", () => {
     it("generates and saves sessionId", async () => {
         const { storeOptions } = await import("../../../../src/app/store/stochastic/stochastic");
         const state = storeOptions.state as any;
diff --git a/app/static/tests/unit/utils.test.ts b/app/static/tests/unit/utils.test.ts
index 3c37659ed..e261a27a2 100644
--- a/app/static/tests/unit/utils.test.ts
+++ b/app/static/tests/unit/utils.test.ts
@@ -4,7 +4,7 @@ import {
     generateBatchPars,
     getCodeErrorFromResponse,
     processFitData,
-    newSessionId,
+    newUid,
     joinStringsSentence
 } from "../../src/app/utils";
 import { SensitivityScaleType, SensitivityVariationType } from "../../src/app/store/sensitivity/state";
@@ -485,7 +485,7 @@ describe("generateBatchPars", () => {
 
 describe("newSessionId", () => {
     it("generates expected id format", () => {
-        const id = newSessionId();
+        const id = newUid();
         expect(id).toMatch(/^[a-z0-9]{32}$/);
     });
 });