1 files changed, 17 insertions, 8 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
index 85b6d7f4cbe..440b1b12631 100644
--- a/app/assets/javascripts/monitoring/components/graph/legend.vue
+++ b/app/assets/javascripts/monitoring/components/graph/legend.vue
@@ -79,7 +79,8 @@
       },
 
       formatMetricUsage(series) {
-        const value = series.values[this.currentDataIndex].value;
+        const value = series.values[this.currentDataIndex] &&
+          series.values[this.currentDataIndex].value;
         if (isNaN(value)) {
           return '-';
         }
@@ -92,6 +93,12 @@
         }
         return `${this.legendTitle} series ${index + 1} ${this.formatMetricUsage(series)}`;
       },
+
+      strokeDashArray(type) {
+        if (type === 'dashed') return '6, 3';
+        if (type === 'dotted') return '3, 3';
+        return null;
+      },
     },
     mounted() {
       this.$nextTick(() => {
@@ -162,13 +169,15 @@
       v-for="(series, index) in timeSeries"
       :key="index"
       :transform="translateLegendGroup(index)">
-      <rect
-        :fill="series.areaColor"
-        :width="measurements.legends.width"
-        :height="measurements.legends.height"
-        x="20"
-        :y="graphHeight - measurements.legendOffset">
-      </rect>
+      <line
+        :stroke="series.lineColor"
+        :stroke-width="measurements.legends.height"
+        :stroke-dasharray="strokeDashArray(series.lineStyle)"
+        :x1="measurements.legends.offsetX"
+        :x2="measurements.legends.offsetX + measurements.legends.width"
+        :y1="graphHeight - measurements.legends.offsetY"
+        :y2="graphHeight - measurements.legends.offsetY">
+      </line>
       <text
         v-if="timeSeries.length > 1"
         class="legend-metric-title"