diff --git a/assets/src/scripts/components/hydrograph/legend.js b/assets/src/scripts/components/hydrograph/legend.js
index 25b4faf1d155740a73ac36d80f7baf293e8440ad..566d71b72144afa397a688c5fd2d1d776be9e145 100644
--- a/assets/src/scripts/components/hydrograph/legend.js
+++ b/assets/src/scripts/components/hydrograph/legend.js
@@ -3,7 +3,7 @@ const memoize = require('fast-memoize');
 const { createSelector } = require('reselect');
 
 const { CIRCLE_RADIUS } = require('./layout');
-const { defineLineMarker, defineTextOnlyMarker, defineCircleMarker, defineRectangleMarker} = require('./markers');
+const { defineLineMarker, defineTextOnlyMarker, defineMedianMarker, defineRectangleMarker} = require('./markers');
 const { currentVariableLineSegmentsSelector, HASH_ID, MASK_DESC} = require('./drawingData');
 const { currentVariableTimeSeriesSelector } = require('./timeSeries');
 
@@ -90,11 +90,12 @@ const createLegendMarkers = function(displayItems) {
 
             const descriptionText = stats.description  ? `${stats.description} ` : '';
             const classes = `median-data-series median-modulo-${index % 6}`;
+            const classesLine = `median-data-series median-step-${index % 6}`;
             const label = `${descriptionText}${dateText}`;
 
             legendMarkers.push([
                 defineTextOnlyMarker(TS_LABEL.median),
-                defineCircleMarker(CIRCLE_RADIUS, null, classes, label)]);
+                defineMedianMarker(CIRCLE_RADIUS, null, classes, label)]);
         }
     }
 
diff --git a/assets/src/scripts/components/hydrograph/markers.js b/assets/src/scripts/components/hydrograph/markers.js
index 5dd5cb2bbe2450f709b6daa72359072cd4d847a9..ad581d35cd9e64ee378f157913efebff55befbe1 100644
--- a/assets/src/scripts/components/hydrograph/markers.js
+++ b/assets/src/scripts/components/hydrograph/markers.js
@@ -97,6 +97,21 @@ export const lineMarker = function(elem, {x, y, length, text=null, domId=null, d
     return group;
 };
 
+
+export const medianMarker = function (elem, {r, x, y, text=null, domId=null, domClass=null, fill=null}) {
+    let group = circleMarker(elem, {r: r, x: x, y: y, text: text, domId, domClass: domClass, fill: fill});
+    let line = group.append('line')
+        .attr('x1', x - 2.5*r)
+        .attr('x2', x + 2.5*r)
+        .attr('y1', y + Y_OFFSET)
+        .attr('y2', y + Y_OFFSET);
+    if (domClass !== null) {
+        let lineClasses = domClass.replace('modulo', 'step');
+        line.attr('class', lineClasses);
+    }
+    return group;
+};
+
 export const textOnlyMarker = function(elem, {x, y, text, domId=null, domClass=null}) {
     const group = elem.append('g');
     let markerText = group.append('text')
@@ -122,6 +137,7 @@ export const defineLineMarker = function(domId=null, domClass=null, text=null) {
     };
 };
 
+
 export const defineTextOnlyMarker = function(text, domId=null, domClass=null ) {
     return {
         type: textOnlyMarker,
@@ -132,7 +148,6 @@ export const defineTextOnlyMarker = function(text, domId=null, domClass=null ) {
 };
 
 
-
 export const defineRectangleMarker = function(domId=null, domClass=null, text=null, fill=null) {
     return {
         type: rectangleMarker,
@@ -143,9 +158,10 @@ export const defineRectangleMarker = function(domId=null, domClass=null, text=nu
     };
 };
 
-export const defineCircleMarker = function(radius, domId=null, domClass=null, text=null, fill=null) {
+
+export const defineMedianMarker = function(radius, domId=null, domClass=null, text=null, fill=null) {
     return {
-        type: circleMarker,
+        type: medianMarker,
         r: radius,
         domId: domId,
         domClass: domClass,