diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index 6155c9968ebdbde5a51cefc7d43812e72e69d9c8..fb5f2467785aa1fd98547b5eb645d593d0e6efc3 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -123,8 +123,8 @@ export const attachToNode = function (store,
         .call(drawTimeSeriesGraph, store, siteno, showMLName);
     if (!showOnlyGraph) {
         graphContainer.call(cursorSlider, store);
+        graphContainer.call(drawGraphBrush, store);
     }
-    graphContainer.call(drawGraphBrush, store);
     graphContainer.append('div')
         .classed('ts-legend-controls-container', true)
         .call(drawTimeSeriesLegend, store);
diff --git a/assets/src/scripts/components/hydrograph/index.spec.js b/assets/src/scripts/components/hydrograph/index.spec.js
index c9c9aa35c12f69f1432fbb87bcf7ac8feea8121c..83845467f30b4b17d00da9cb14466c31a313ca90 100644
--- a/assets/src/scripts/components/hydrograph/index.spec.js
+++ b/assets/src/scripts/components/hydrograph/index.spec.js
@@ -176,7 +176,7 @@ describe('Hydrograph charting and Loading indicators and data alerts', () => {
         expect(graphNode.innerHTML).toContain('No data is available');
     });
 
-    describe('SVG contains the expected elements', () => {
+    describe('graphNode contains the expected elements when showOnlyGraph is false', () => {
         /* eslint no-use-before-define: 0 */
         let store;
         beforeEach(() => {
@@ -256,15 +256,32 @@ describe('Hydrograph charting and Loading indicators and data alerts', () => {
             expect(selectAll('#median-points text').size()).toBe(0);
         });
 
+        it('should have brush element for the hydrograph', () => {
+            expect(selectAll('.brush').size()).toBe(1);
+        });
+
+        it('should have slider-wrapper element', () => {
+            expect(selectAll('.slider-wrapper').size()).toBe(1);
+        });
+
+        it('should have date control elements', () => {
+            expect(selectAll('#ts-daterange-select-container').size()).toBe(1);
+            expect(selectAll('#ts-customdaterange-select-container').size()).toBe(1);
+        });
+
+        it('should have method select element', () => {
+            expect(selectAll('#ts-method-select-container').size()).toBe(1);
+        });
+
+        it('should have the select time series element', () => {
+            expect(selectAll('#select-time-series').size()).toBe(1);
+        });
+
         it('should have tooltips for the select series table', () => {
             // one for each of the two parameters
             expect(selectAll('table .tooltip-item').size()).toBe(2);
         });
 
-        it('should have brush element for the hydrograph', () => {
-            expect(selectAll('.brush').size()).toBe(1);
-        });
-
         it('should not have tooltips for the select series table when the screen is large', (done) => {
             store.dispatch(Actions.resizeUI(800, 800));
             window.requestAnimationFrame(() => {
@@ -274,6 +291,75 @@ describe('Hydrograph charting and Loading indicators and data alerts', () => {
         });
     });
 
+    describe('hide elements when showOnlyGraph is set to true', () => {
+        let store;
+        beforeEach(() => {
+            store = configureStore({
+                ...TEST_STATE,
+                series: {
+                    ...TEST_STATE.series,
+                    timeSeries: {
+                        ...TEST_STATE.series.timeSeries,
+                        '00060:current': {
+                            ...TEST_STATE.series.timeSeries['00060:current'],
+                            startTime: 1514926800000,
+                            endTime: 1514930400000,
+                            points: [{
+                                dateTime: 1514926800000,
+                                value: 10,
+                                qualifiers: ['P']
+                            }, {
+                                dateTime: 1514930400000,
+                                value: null,
+                                qualifiers: ['P', 'FLD']
+                            }]
+                        }
+                    }
+                },
+                timeSeriesState: {
+                    showSeries: {
+                        current: true,
+                        compare: true,
+                        median: true
+                    },
+                    currentVariableID: '45807197',
+                    currentDateRange: 'P7D',
+                    currentMethodID: 'method1',
+                    loadingTSKeys: []
+                },
+                ui: {
+                    windowWidth: 400,
+                    width: 400,
+                    hydrographXRange: undefined
+                }
+
+            });
+
+            attachToNode(store, graphNode, {siteno: '123456788', showOnlyGraph: true});
+        });
+
+        it('should not have brush element for the hydrograph', () => {
+            expect(selectAll('.brush').size()).toBe(0);
+        });
+
+        it('should not have slider-wrapper element', () => {
+            expect(selectAll('.slider-wrapper').size()).toBe(0);
+        });
+
+        it('should not have date control elements', () => {
+            expect(selectAll('#ts-daterange-select-container').size()).toBe(0);
+            expect(selectAll('#ts-customdaterange-select-container').size()).toBe(0);
+        });
+
+        it('should not have method select element', () => {
+            expect(selectAll('#ts-method-select-container').size()).toBe(0);
+        });
+
+        it('should not have the select time series element', () => {
+            expect(selectAll('#select-time-series').size()).toBe(0);
+        });
+    });
+
     describe('hiding/showing provisional alert', () => {
 
         it('Expects the provisional alert to be visible when time series data is provided', () => {