diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index a63cf14a92aecbd13416213e13a71ea76276a00e..f6754bff6c495b89da1009431ae6308c2a12b72e 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -299,8 +299,42 @@ const watermark = function (elem) {
         }, layoutSelector));
 };
 
+const createDaterangeControls = function(elem) {
+    const DATE_RANGE = [{
+        label: 'seven-day',
+        name: '7 days',
+        period: 'P7D'
+    }, {
+        label: 'one-month',
+        name: '1 month',
+        period: 'P1M'
+    }, {
+        label: 'one-year',
+        name: '1 year',
+        period: 'P1Y'
+    }];
+    const container = elem.append('ul')
+        .attr('id', 'ts-daterange-select-container')
+        .attr('class', 'usa-fieldset-inputs usa-unstyled-list');
+    const li = container.selectAll('li')
+        .data(DATE_RANGE)
+        .enter().append('li');
+    li.append('input')
+        .attr('type', 'radio')
+        .attr('name', 'ts-daterange-input')
+        .attr('id', (d) => d.label)
+        .attr('value', (d) => d.period);
+    li.append('label')
+        .attr('for', (d) => d.label)
+        .text((d) => d.name);
+    li.select(`#${DATE_RANGE[0].label}`).attr('checked', true);
+
+};
+
 const timeSeriesGraph = function (elem) {
-    elem.call(watermark);
+    elem.call(watermark)
+            .call(createDaterangeControls);
+
     elem.append('div')
         .attr('class', 'hydrograph-container')
         .call(createTitle)
diff --git a/assets/src/styles/components/_hydrograph.scss b/assets/src/styles/components/_hydrograph.scss
index addab2ba0e19cc774e7212d8b94e55af91d86b2d..2e4d4438efd050aeb27fa3b43bb6837737b4ea14 100644
--- a/assets/src/styles/components/_hydrograph.scss
+++ b/assets/src/styles/components/_hydrograph.scss
@@ -4,6 +4,15 @@ $default-timeseries: blue;
 $selected: $color-aqua-lightest;
 $highlight: $color-gray-lightest;
 
+#ts-daterange-select-container {
+    li {
+        display: inline-block;
+        label {
+            width: 110px;
+        }
+    }
+}
+
 #select-timeseries  {
     label {
         font-weight: $font-bold;