diff --git a/assets/src/scripts/components/hydrograph/axes.js b/assets/src/scripts/components/hydrograph/axes.js
index d6debd6b3f7f564ed6cc7cc7845e7b817571bf5a..da0e6e4c32d5f46ef6d0c78a0dc4eee1601ac8bc 100644
--- a/assets/src/scripts/components/hydrograph/axes.js
+++ b/assets/src/scripts/components/hydrograph/axes.js
@@ -87,7 +87,7 @@ function appendAxes(elem, {xAxis, yAxis, layout, yTitle}) {
     const yLoc = {x: 0, y: 0};
     const yLabelLoc = {
         x: layout.height / -2 + MARGIN.top,
-        y: -35
+        y: -40
     };
 
     // Remove existing axes before adding the new ones.
diff --git a/assets/src/scripts/components/hydrograph/cursor.js b/assets/src/scripts/components/hydrograph/cursor.js
index 69e75e53f4959b98037e652e860aa3b101e6e31b..daf00260d3a2c118dc1a2dbb79b954335d04ba1c 100644
--- a/assets/src/scripts/components/hydrograph/cursor.js
+++ b/assets/src/scripts/components/hydrograph/cursor.js
@@ -117,7 +117,7 @@ const cursorSlider = function (elem) {
                         .classed('active', cursorOffset !== null);
                 }, cursorOffsetSelector))
                 .call(link((input, layout) => {
-                    input.style('width', layout.width - MARGIN.right + SLIDER_OFFSET_PX * 2 + 'px');
+                    input.style('width', layout.width - (MARGIN.left + MARGIN.right) + SLIDER_OFFSET_PX * 2 + 'px');
                 }, layoutSelector));
         });
 };
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index 4bbf305fc92b02c01a3d46a0a58ed85122e8d6d3..0c38916e63a26d3cb5d45153b14a2844c6fb02d5 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -289,7 +289,7 @@ const timeSeriesGraph = function (elem) {
         .attr('class', 'hydrograph-container')
         .call(createTitle)
         .append('svg')
-            .call(link((elem, layout) => elem.attr('viewBox', `0 0 ${layout.width} ${layout.height}`), layoutSelector))
+            .call(link((elem, layout) => elem.attr('viewBox', `0 0 ${layout.width + MARGIN.left + MARGIN.right} ${layout.height + MARGIN.top + MARGIN.bottom}`), layoutSelector))
             .call(link(addSVGAccessibility, createStructuredSelector({
                 titleSelector,
                 descriptionSelector,
diff --git a/assets/src/scripts/components/hydrograph/layout.js b/assets/src/scripts/components/hydrograph/layout.js
index fc1b76229d745c351beb83b6e3d404ecf40a4d9a..063209f0893ac4a31a8efbdfaf85247a36f07c10 100644
--- a/assets/src/scripts/components/hydrograph/layout.js
+++ b/assets/src/scripts/components/hydrograph/layout.js
@@ -5,10 +5,10 @@ const { createSelector } = require('reselect');
 const ASPECT_RATIO = 1 / 2;
 const ASPECT_RATIO_PERCENT = `${100 * ASPECT_RATIO}%`;
 const MARGIN = {
-    top: 40,
-    right: 75,
-    bottom: 40,
-    left: 50
+    top: 0,
+    right: 0,
+    bottom: 20,
+    left: 75
 };
 const CIRCLE_RADIUS = 4;
 const CIRCLE_RADIUS_SINGLE_PT = 1;