diff --git a/public/app/plugins/panel/heatmap/color_legend.ts b/public/app/plugins/panel/heatmap/color_legend.ts
index 0b23a10e000..2d52acb8ddb 100644
--- a/public/app/plugins/panel/heatmap/color_legend.ts
+++ b/public/app/plugins/panel/heatmap/color_legend.ts
@@ -46,7 +46,12 @@ module.directive('heatmapLegend', function() {
       let ctrl = scope.ctrl;
       let panel = scope.ctrl.panel;
 
+      render();
       ctrl.events.on('render', function() {
+        render();
+      });
+
+      function render() {
         if (!_.isEmpty(ctrl.data)) {
           let legendElem = $(elem).find('svg');
           let legendWidth = Math.floor(legendElem.outerWidth());
@@ -66,7 +71,7 @@ module.directive('heatmapLegend', function() {
             drawOpacityLegend(elem, colorOptions, rangeFrom, rangeTo, maxValue, minValue);
           }
         }
-      });
+      }
     }
   };
 });
@@ -241,7 +246,12 @@ function getOpacityScale(options, maxValue, minValue = 0) {
 }
 
 function getSvgElemX(elem) {
-  return elem.get(0).x.baseVal.value;
+  let svgElem = elem.get(0);
+  if (svgElem && svgElem.x && svgElem.x.baseVal) {
+    return elem.get(0).x.baseVal.value;
+  } else {
+    return 0;
+  }
 }
 
 function buildLegendTicks(rangeFrom, rangeTo, maxValue, minValue) {
diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
index 03bb46a104f..3b8d1fa9d41 100644
--- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
+++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts
@@ -26,6 +26,9 @@ let panelDefaults = {
     exponent: 0.5,
     colorScheme: 'interpolateOranges',
   },
+  legend: {
+    show: false
+  },
   dataFormat: 'timeseries',
   xAxis: {
     show: true,
diff --git a/public/app/plugins/panel/heatmap/module.html b/public/app/plugins/panel/heatmap/module.html
index ac9652a5afc..272aac99772 100644
--- a/public/app/plugins/panel/heatmap/module.html
+++ b/public/app/plugins/panel/heatmap/module.html
@@ -8,7 +8,7 @@
 		<div class="heatmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
 	</div>
 	<div class="heatmap-legend-wrapper">
-		<heatmap-legend></heatmap-legend>
+		<heatmap-legend ng-if="ctrl.panel.legend.show"></heatmap-legend>
 	</div>
 </div>
 <div class="clearfix"></div>
diff --git a/public/app/plugins/panel/heatmap/partials/display_editor.html b/public/app/plugins/panel/heatmap/partials/display_editor.html
index 4f215f3fcce..f161bf6cab4 100644
--- a/public/app/plugins/panel/heatmap/partials/display_editor.html
+++ b/public/app/plugins/panel/heatmap/partials/display_editor.html
@@ -53,6 +53,14 @@
     </div>
   </div>
 
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Legend</h5>
+    <gf-form-switch class="gf-form" label-class="width-8"
+      label="Show legend"
+      checked="ctrl.panel.legend.show" on-change="ctrl.render()">
+    </gf-form-switch>
+  </div>
+
   <div class="section gf-form-group">
     <h5 class="section-heading">Buckets</h5>
     <div class="gf-form">