Fix #7107

public/app/plugins/panel/graph/threshold_manager.ts

@@ -222,16 +222,30 @@ export class ThresholdManager {
 
 
       // fill
       // fill
       if (threshold.fill) {
       if (threshold.fill) {
-        options.grid.markings.push({
-          yaxis: { from: threshold.value, to: limit },
-          color: fillColor,
-        });
+        if (threshold.yaxis === 'right' && this.shouldDrawHandles) {
+          options.grid.markings.push({
+            y2axis: { from: threshold.value, to: limit },
+            color: fillColor,
+          });
+        } else {
+          options.grid.markings.push({
+            yaxis: { from: threshold.value, to: limit },
+            color: fillColor,
+          });
+        }
       }
       }
       if (threshold.line) {
       if (threshold.line) {
-        options.grid.markings.push({
-          yaxis: { from: threshold.value, to: threshold.value },
-          color: lineColor,
-        });
+        if (threshold.yaxis === 'right' && this.shouldDrawHandles) {
+          options.grid.markings.push({
+            y2axis: { from: threshold.value, to: threshold.value },
+            color: lineColor,
+          });
+        } else {
+          options.grid.markings.push({
+            yaxis: { from: threshold.value, to: threshold.value },
+            color: lineColor,
+          });
+        }
       }
       }
     }
     }
   }
   }

public/app/plugins/panel/graph/thresholds_form.ts

@@ -29,6 +29,7 @@ export class ThresholdFormCtrl {
       op: 'gt',
       op: 'gt',
       fill: true,
       fill: true,
       line: true,
       line: true,
+      yaxis: 'left',
     });
     });
     this.panelCtrl.render();
     this.panelCtrl.render();
   }
   }
@@ -110,6 +111,15 @@ var template = `
       </div>
       </div>
 
 
       <div class="gf-form">
       <div class="gf-form">
+        <label class="gf-form-label">Y-axis</label>
+        <div class="gf-form-select-wrapper">
+          <select class="gf-form-input" ng-model="threshold.yaxis"
+                  ng-options="f for f in ['left', 'right']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled">
+          </select>
+        </div>
+      </div>
+
+      <div class="gf-form">
         <label class="gf-form-label">
         <label class="gf-form-label">
           <a class="pointer" ng-click="ctrl.removeThreshold($index)" ng-disabled="ctrl.disabled">
           <a class="pointer" ng-click="ctrl.removeThreshold($index)" ng-disabled="ctrl.disabled">
             <i class="fa fa-trash"></i>
             <i class="fa fa-trash"></i>