diff --git a/CHANGELOG.md b/CHANGELOG.md
index 11ef13833d470cb35a28c1e286359ba6a56122a5..6ad8ea1e0d9cabb023dc84690fa4fd4ef6c46c21 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## Fixed
 - Fixed bug that made compare time series disappear when the brush was adjusted by adding
 offsets to time series state in order to adjust x scale.
+- Added DV legend.
 
 ## [0.27.0](https://github.com/usgs/waterdataui/compare/waterdataui-0.26.0...waterdataui-0.27.0) - 2020-3-11
 ### Changed
diff --git a/assets/src/scripts/components/dailyValueHydrograph/selectors/legend-data.spec.js b/assets/src/scripts/components/dailyValueHydrograph/selectors/legend-data.spec.js
index 5c77f2c81ac7a8b6af69256aa4cf4e906533c43e..03db3aa757eae955e4349103c196b42922da29ce 100644
--- a/assets/src/scripts/components/dailyValueHydrograph/selectors/legend-data.spec.js
+++ b/assets/src/scripts/components/dailyValueHydrograph/selectors/legend-data.spec.js
@@ -1,9 +1,5 @@
-import {select, selectAll} from 'd3-selection';
-import {drawTimeSeriesLegend} from '../legend';
 import {getLegendMarkerRows} from './legend-data';
 import {lineMarker} from '../../../d3-rendering/markers';
-import {configureStore} from '../../../store';
-
 
 describe('DV: Legend module', () => {
 
@@ -60,36 +56,4 @@ describe('DV: Legend module', () => {
 
     });
 
-    describe('DV: legend should render', () => {
-
-        let graphNode;
-        let store;
-
-        beforeEach(() => {
-            let body = select('body');
-            let component = body.append('div').attr('id', 'hydrograph');
-            component.append('div').attr('class', 'loading-indicator-container');
-            component.append('div').attr('class', 'graph-container');
-
-            graphNode = document.getElementById('hydrograph');
-
-            store = configureStore(TEST_STATE);
-            select(graphNode)
-                .call(drawTimeSeriesLegend, store);
-
-            jasmine.Ajax.install();
-        });
-
-        afterEach(() => {
-            jasmine.Ajax.uninstall();
-            select('#hydrograph').remove();
-        });
-
-
-        it('Should have 2 legend markers', () => {
-            expect(selectAll('.legend g').size()).toBe(2);
-        });
-
-    });
-
 });
\ No newline at end of file
diff --git a/assets/src/scripts/d3-rendering/legend.spec.js b/assets/src/scripts/d3-rendering/legend.spec.js
index 0b9a7fbcecb49542aa2ec90aa5de0e117fdc2b32..2629faf7eb51f1c28a4c1aab83c97f8c7a69f23d 100644
--- a/assets/src/scripts/d3-rendering/legend.spec.js
+++ b/assets/src/scripts/d3-rendering/legend.spec.js
@@ -1,8 +1,74 @@
-import {select} from 'd3-selection';
+import {select, selectAll} from 'd3-selection';
 import {lineMarker, rectangleMarker, textOnlyMarker} from './markers';
 import {drawSimpleLegend} from './legend';
+import {configureStore} from "../store";
+import {drawTimeSeriesLegend} from "../components/dailyValueHydrograph/legend";
 
-describe('D3-rendering: Legend module', () => {
+describe('Legend module', () => {
+
+    const TEST_STATE = {
+        observationsData: {
+            timeSeries: {
+                '12345': {
+                    type: 'Feature',
+                    id: '12345',
+                    properties: {
+                        phenomenonTimeStart: '2018-01-02',
+                        phenomenonTimeEnd: '2018-01-05',
+                        timeStep: ['2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05'],
+                        result: ['5.0', '4.0', '6.1', '3.2'],
+                        approvals: [['Approved'], ['Approved'], ['Approved'], ['Estimated']],
+                        nilReason: [null, 'AA', null, null],
+                        qualifiers: [null, null, ['ICE'], ['ICE']],
+                        grades: [['50'], ['50'], ['60'], ['60']]
+                    }
+                }
+            }
+        },
+        observationsState: {
+            currentTimeSeriesId: '12345'
+        },
+        ui: {
+            windowWidth: 1024,
+            width: 800
+        }
+    };
+
+    describe('Legend should render', () => {
+
+        let graphNode;
+        let store;
+
+        beforeEach(() => {
+            let body = select('body');
+            let component = body.append('div').attr('id', 'hydrograph');
+            component.append('div').attr('class', 'loading-indicator-container');
+            component.append('div').attr('class', 'graph-container');
+
+            graphNode = document.getElementById('hydrograph');
+
+            store = configureStore(TEST_STATE);
+            select(graphNode)
+                .call(drawTimeSeriesLegend, store);
+
+            jasmine.Ajax.install();
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+            select('#hydrograph').remove();
+        });
+
+
+        it('Should have 2 legend markers', () => {
+            expect(selectAll('.legend g').size()).toBe(2);
+        });
+
+    });
+
+});
+
+describe('Legend module', () => {
 
     describe('drawSimpleLegend', () => {
         let container;