diff --git a/assets/src/scripts/components/hydrograph/legend.js b/assets/src/scripts/components/hydrograph/legend.js
index 59c0c224262793e21d940ec1409ff998b489965f..b23099f0866a9adfa5f783f2e14e72376f2cdaeb 100644
--- a/assets/src/scripts/components/hydrograph/legend.js
+++ b/assets/src/scripts/components/hydrograph/legend.js
@@ -192,7 +192,7 @@ const uniqueClassesSelector = memoize(tsKey => createSelector(
  * Select attributes from the state useful for legend creation
  */
 const legendDisplaySelector = createSelector(
-    (state) => state.showSeries,
+    (state) => state.timeseriesState.showSeries,
     currentVariableTimeSeriesSelector('median'),
     methodsSelector,
     uniqueClassesSelector('current'),
diff --git a/assets/src/scripts/components/hydrograph/legend.spec.js b/assets/src/scripts/components/hydrograph/legend.spec.js
index ee8816edafc8f7e3102aedbc3b95e1eb44ee033a..21a93da5cf2e471def544f2cd4b445908bdeb10a 100644
--- a/assets/src/scripts/components/hydrograph/legend.spec.js
+++ b/assets/src/scripts/components/hydrograph/legend.spec.js
@@ -165,11 +165,13 @@ describe('Legend module', () => {
                     }
                 }
             },
-            currentVariableID: '45807197',
-            showSeries: {
-                current: true,
-                compare: true,
-                median: true
+            timeseriesState: {
+                currentVariableID: '45807197',
+                showSeries: {
+                    current: true,
+                    compare: true,
+                    median: true
+                }
             }
         };
 
@@ -199,7 +201,10 @@ describe('Legend module', () => {
         it('Should return markers for a different selected variable', () => {
             const newData = {
                 ...TEST_DATA,
-                currentVariableID: '45807202'
+                timeseriesState: {
+                    ...TEST_DATA.timeseriesState,
+                    currentVariableID: '45807202'
+                }
             };
             const result = legendMarkerRowsSelector(newData);
 
@@ -216,11 +221,14 @@ describe('Legend module', () => {
         it('Should return markers only for time series shown', () => {
             const newData = {
                 ...TEST_DATA,
-                currentVariableID: '45807202',
-                showSeries: {
-                    'current': true,
-                    'compare': false,
-                    'median': true
+                timeseriesState: {
+                    ...TEST_DATA.timeseriesState,
+                    currentVariableID: '45807202',
+                    showSeries: {
+                        'current': true,
+                        'compare': false,
+                        'median': true
+                    }
                 }
             };