diff --git a/public/app/plugins/panel/graph/axisEditor.html b/public/app/plugins/panel/graph/axisEditor.html
index b1d6d9753c0..f7e183a5651 100644
--- a/public/app/plugins/panel/graph/axisEditor.html
+++ b/public/app/plugins/panel/graph/axisEditor.html
@@ -184,7 +184,7 @@
 				<li ng-if="panel.legend.rightSide" class="tight-form-item">
 					Side width
 				</li>
-				<li ng-if="panel.legend.rightSide" style="width: 105px">
+				<li ng-if="ctrl.panel.legend.rightSide" style="width: 105px">
 					<input type="number" class="input-small tight-form-input" placeholder="250" bs-tooltip="'Set a min-width for the legend side table/block'" data-placement="right"
 					ng-model="ctrl.panel.legend.sideWidth" ng-change="ctrl.render()" ng-model-onblur>
 				</li>
diff --git a/public/app/plugins/panel/graph/legend.js b/public/app/plugins/panel/graph/legend.js
index a1777772c98..a09bbbb6cb1 100644
--- a/public/app/plugins/panel/graph/legend.js
+++ b/public/app/plugins/panel/graph/legend.js
@@ -90,6 +90,14 @@ function (angular, _, $) {
         }
 
         function render() {
+          if (panel.legend.rightSide) {
+            var panelheight = scope.ctrl.height || scope.ctrl.panel.height || scope.ctrl.row.height;
+            $container.css("height", panelheight);
+            $container.toggleClass('graph-legend-fixed-height', true);
+          } else {
+            $container.css("height", "");
+          }
+
           if (firstRender) {
             elem.append($container);
             $container.on('click', '.graph-legend-icon', openColorSelector);
diff --git a/public/less/panel_graph.less b/public/less/panel_graph.less
index a0350d5d16c..36e96d67441 100644
--- a/public/less/panel_graph.less
+++ b/public/less/panel_graph.less
@@ -60,7 +60,6 @@
 }
 
 .graph-legend-table {
-  display: table;
   width: 100%;
   margin: 0;
 
@@ -272,4 +271,6 @@
   font-size: 12px;
 }
 
-
+.graph-legend-fixed-height {
+  overflow-y: scroll;
+}