diff --git a/ui/src/app/components/legend-config-panel.controller.js b/ui/src/app/components/legend-config-panel.controller.js
index 6253da01a5..8783df2533 100644
--- a/ui/src/app/components/legend-config-panel.controller.js
+++ b/ui/src/app/components/legend-config-panel.controller.js
@@ -28,20 +28,6 @@ export default function LegendConfigPanelController(mdPanelRef, $scope, types, l
         $scope.theForm.$setPristine();
     };
 
-    vm.onChangeDirection = function() {
-        if (vm.legendConfig.direction === types.direction.row.value) {
-            vm.isRowDirection = true;
-            vm.legendConfig.position = types.position.bottom.value;
-            vm.legendConfig.showMin = false;
-            vm.legendConfig.showMax = false;
-            vm.legendConfig.showAvg = false;
-            vm.legendConfig.showTotal = false;
-        }
-        else {
-            vm.isRowDirection = false;
-        }
-    };
-
     $scope.$watch('vm.legendConfig', function () {
         if (onLegendConfigUpdate) {
             onLegendConfigUpdate(vm.legendConfig);
diff --git a/ui/src/app/components/legend-config-panel.tpl.html b/ui/src/app/components/legend-config-panel.tpl.html
index 848330744d..985704115e 100644
--- a/ui/src/app/components/legend-config-panel.tpl.html
+++ b/ui/src/app/components/legend-config-panel.tpl.html
@@ -22,8 +22,7 @@
                 <md-content class="md-padding" layout="column">
                     <md-input-container>
                         <label translate>legend.direction</label>
-                        <md-select ng-model="vm.legendConfig.direction" style="min-width: 150px;"
-                                   ng-change="vm.onChangeDirection()">
+                        <md-select ng-model="vm.legendConfig.direction" style="min-width: 150px;">
                             <md-option ng-repeat="direction in vm.directions" ng-value="direction.value">
                                 {{direction.name | translate}}
                             </md-option>
@@ -38,16 +37,16 @@
                             </md-option>
                         </md-select>
                     </md-input-container>
-                    <md-checkbox flex aria-label="{{ 'legend.show-min' | translate }}" ng-disabled="vm.isRowDirection"
+                    <md-checkbox flex aria-label="{{ 'legend.show-min' | translate }}""
                                  ng-model="vm.legendConfig.showMin">{{ 'legend.show-min' | translate }}
                     </md-checkbox>
-                    <md-checkbox flex aria-label="{{ 'legend.show-max' | translate }}" ng-disabled="vm.isRowDirection"
+                    <md-checkbox flex aria-label="{{ 'legend.show-max' | translate }}""
                                  ng-model="vm.legendConfig.showMax">{{ 'legend.show-max' | translate }}
                     </md-checkbox>
-                    <md-checkbox flex aria-label="{{ 'legend.show-avg' | translate }}" ng-disabled="vm.isRowDirection"
+                    <md-checkbox flex aria-label="{{ 'legend.show-avg' | translate }}""
                                  ng-model="vm.legendConfig.showAvg">{{ 'legend.show-avg' | translate }}
                     </md-checkbox>
-                    <md-checkbox flex aria-label="{{ 'legend.show-total' | translate }}" ng-disabled="vm.isRowDirection"
+                    <md-checkbox flex aria-label="{{ 'legend.show-total' | translate }}""
                                  ng-model="vm.legendConfig.showTotal">{{ 'legend.show-total' | translate }}
                     </md-checkbox>
                 </md-content>
diff --git a/ui/src/app/components/legend.scss b/ui/src/app/components/legend.scss
index b363319e95..5130783f6f 100644
--- a/ui/src/app/components/legend.scss
+++ b/ui/src/app/components/legend.scss
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 table.tb-legend {
-  width: 100%;
   font-size: 12px;
 
   .tb-legend-header,
@@ -37,6 +36,15 @@ table.tb-legend {
       white-space: nowrap;
     }
 
+    .tb-legend-type {
+      min-width: 50px;
+      padding: 0 10px 1px 0;
+      font-weight: 700;
+      color: rgb(255, 110, 64);
+      text-align: right;
+      white-space: nowrap;
+    }
+
     .tb-legend-line {
       display: inline-block;
       width: 15px;
@@ -45,7 +53,9 @@ table.tb-legend {
     }
 
     .tb-legend-label {
+      padding: 2px 10px;
       text-align: left;
+      white-space: nowrap;
       outline: none;
 
       &.tb-horizontal {
@@ -63,3 +73,12 @@ table.tb-legend {
     }
   }
 }
+
+table.tb-legend-column {
+  width: 100%;
+}
+
+table.tb-legend-row {
+  width: auto;
+  margin-left: auto;
+}
diff --git a/ui/src/app/components/legend.tpl.html b/ui/src/app/components/legend.tpl.html
index d8ce5df1cb..157835729b 100644
--- a/ui/src/app/components/legend.tpl.html
+++ b/ui/src/app/components/legend.tpl.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<table class="tb-legend">
+<table class="tb-legend" ng-class="isRowDirection ? 'tb-legend-row' : 'tb-legend-column'"
+       ng-style="{ 'marginRight': isRowDirection && !displayHeader() ? 'auto' : '20px' }">
     <thead>
         <tr class="tb-legend-header" ng-if="!isRowDirection">
             <th colspan="2"></th>
@@ -26,7 +27,7 @@
         </tr>
     </thead>
     <tbody>
-        <tr class="tb-legend-keys" ng-repeat="legendKey in legendData.keys" ng-class="{ 'tb-row-direction': isRowDirection }">
+        <tr class="tb-legend-keys" ng-repeat="legendKey in legendData.keys" ng-if="!isRowDirection">
             <td><span class="tb-legend-line"  ng-style="{backgroundColor: legendKey.dataKey.color}"></span></td>
             <td class="tb-legend-label"
                 ng-click="toggleHideData(legendKey.dataIndex)"
@@ -38,5 +39,32 @@
             <td class="tb-legend-value" ng-if="legendConfig.showAvg === true">{{ legendData.data[legendKey.dataIndex].avg }}</td>
             <td class="tb-legend-value" ng-if="legendConfig.showTotal === true">{{ legendData.data[legendKey.dataIndex].total }}</td>
         </tr>
+        <tr class="tb-legend-keys" ng-class="{ 'tb-row-direction': !displayHeader() }" ng-if="isRowDirection">
+            <td></td>
+            <td ng-repeat="legendKey in legendData.keys">
+                <span class="tb-legend-line" ng-style="{backgroundColor: legendKey.dataKey.color}"></span>
+                <span class="tb-legend-label"
+                      ng-click="toggleHideData(legendKey.dataIndex)"
+                      ng-class="{ 'tb-hidden-label': legendData.keys[legendKey.dataIndex].dataKey.hidden}">
+                {{ legendKey.dataKey.label }}
+                </span>
+            </td>
+        </tr>
+        <tr class="tb-legend-keys" ng-if="isRowDirection && legendConfig.showMin === true">
+            <td class="tb-legend-type">{{ 'legend.min' | translate }}</td>
+            <td class="tb-legend-value" ng-repeat="legendKey in legendData.keys">{{ legendData.data[legendKey.dataIndex].min }}</td>
+        </tr>
+        <tr class="tb-legend-keys" ng-if="isRowDirection && legendConfig.showMax === true">
+            <td class="tb-legend-type">{{ 'legend.max' | translate }}</td>
+            <td class="tb-legend-value" ng-repeat="legendKey in legendData.keys">{{ legendData.data[legendKey.dataIndex].max }}</td>
+        </tr>
+        <tr class="tb-legend-keys" ng-if="isRowDirection && legendConfig.showAvg === true">
+            <td class="tb-legend-type">{{ 'legend.avg' | translate }}</td>
+            <td class="tb-legend-value" ng-repeat="legendKey in legendData.keys">{{ legendData.data[legendKey.dataIndex].avg }}</td>
+        </tr>
+        <tr class="tb-legend-keys" ng-if="isRowDirection && legendConfig.showTotal === true">
+            <td class="tb-legend-type">{{ 'legend.total' | translate }}</td>
+            <td class="tb-legend-value" ng-repeat="legendKey in legendData.keys">{{ legendData.data[legendKey.dataIndex].total }}</td>
+        </tr>
     </tbody>
 </table>
diff --git a/ui/src/app/locale/locale.constant-es_ES.json b/ui/src/app/locale/locale.constant-es_ES.json
index 0d76e8b566..0480b9d274 100644
--- a/ui/src/app/locale/locale.constant-es_ES.json
+++ b/ui/src/app/locale/locale.constant-es_ES.json
@@ -670,6 +670,10 @@
     "dialog": {
         "close": "Cerrar diálogo"
     },
+    "direction": {
+        "column": "Columna",
+        "row": "Fila"
+    },
     "error": {
         "unable-to-connect": "¡No se puede conectar al servidor! Por favor, revise su conexión a Internet.",
         "unhandled-error-code": "Código de error no controlado: {{errorCode}}",
@@ -1111,6 +1115,7 @@
         "select": "Seleccionar diseño objetivo"
     },
     "legend": {
+        "direction": "Dirección de la leyenda",
         "position": "Posición de la leyenda",
         "show-max": "Mostrar valor máximo",
         "show-min": "Mostrar valor mínimo",
diff --git a/ui/src/app/locale/locale.constant-it_IT.json b/ui/src/app/locale/locale.constant-it_IT.json
index b53bdbf558..f17f2ac551 100644
--- a/ui/src/app/locale/locale.constant-it_IT.json
+++ b/ui/src/app/locale/locale.constant-it_IT.json
@@ -670,6 +670,10 @@
     "dialog": {
         "close": "Close dialog"
     },
+    "direction": {
+        "column": "Colonna",
+        "row": "Riga"
+    },
     "error": {
         "unable-to-connect": "Impossibile connettersi al server! Controlla la connessione ad Internet.",
         "unhandled-error-code": "Codice errore non gestito: {{errorCode}}",
@@ -1116,6 +1120,7 @@
         "select": "Select target layout"
     },
     "legend": {
+        "direction": "Direzione",
         "position": "Posizione Legenda",
         "show-max": "Mostra valore max",
         "show-min": "Mostra valore min",