diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index f13bc2c3d331086534a5a2b5805659946889d84b..463d736fc1aea1dcdd8295fc061f937f4ec2b5f6 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -164,11 +164,10 @@ const plotSvgDefs = function(elem) {
 const timeSeriesLegend = function(elem) {
     elem.append('div')
         .classed('hydrograph-container', true)
-        .append('svg')
-            .call(link(drawSimpleLegend, createStructuredSelector({
-                legendMarkerRows: legendMarkerRowsSelector,
-                layout: layoutSelector
-            })));
+        .call(link(drawSimpleLegend, createStructuredSelector({
+            legendMarkerRows: legendMarkerRowsSelector,
+            layout: layoutSelector
+        })));
 };
 
 
diff --git a/assets/src/scripts/components/hydrograph/legend.js b/assets/src/scripts/components/hydrograph/legend.js
index f0bee758f872e22c07d0f6bd406c0e447110751a..2af6625e7869b6019018dc1f7cdee9453aa2371a 100644
--- a/assets/src/scripts/components/hydrograph/legend.js
+++ b/assets/src/scripts/components/hydrograph/legend.js
@@ -71,8 +71,8 @@ const createLegendMarkers = function(displayItems) {
  * @param {Object} legendMarkerRows - Array of rows. Each row should be an array of legend markers.
  * @param {Object} layout - width and height of svg.
  */
-function drawSimpleLegend(svg, {legendMarkerRows, layout}) {
-    svg.selectAll('.legend').remove();
+function drawSimpleLegend(div, {legendMarkerRows, layout}) {
+    div.selectAll('.legend-svg').remove();
 
     if (!legendMarkerRows || !layout) {
         return;
@@ -83,6 +83,8 @@ function drawSimpleLegend(svg, {legendMarkerRows, layout}) {
     const verticalRowOffset = 18;
     const markerTextXOffset = 10;
 
+    let svg = div.append('svg')
+        .attr('class', 'legend-svg')
     let legend = svg
         .append('g')
             .attr('class', 'legend')