diff --git a/public/app/plugins/panel/graph/threshold_manager.ts b/public/app/plugins/panel/graph/threshold_manager.ts
index f0bc7d62499..dcebc45c1e7 100644
--- a/public/app/plugins/panel/graph/threshold_manager.ts
+++ b/public/app/plugins/panel/graph/threshold_manager.ts
@@ -216,12 +216,6 @@ export class ThresholdManager {
break;
}
case 'custom': {
- if (!threshold.fillColor) {
- threshold.fillColor = 'rgba(255, 255, 255, 1)';
- }
- if (!threshold.lineColor) {
- threshold.lineColor = 'rgba(255, 255, 255, 0)';
- }
fillColor = threshold.fillColor;
lineColor = threshold.lineColor;
break;
diff --git a/public/app/plugins/panel/graph/thresholds_form.html b/public/app/plugins/panel/graph/thresholds_form.html
index 99e2f530c8d..075b4824d28 100644
--- a/public/app/plugins/panel/graph/thresholds_form.html
+++ b/public/app/plugins/panel/graph/thresholds_form.html
@@ -23,7 +23,7 @@
@@ -73,4 +73,4 @@
-
\ No newline at end of file
+
diff --git a/public/app/plugins/panel/graph/thresholds_form.ts b/public/app/plugins/panel/graph/thresholds_form.ts
index 4f480873d5b..08acd887559 100644
--- a/public/app/plugins/panel/graph/thresholds_form.ts
+++ b/public/app/plugins/panel/graph/thresholds_form.ts
@@ -1,5 +1,6 @@
import coreModule from 'app/core/core_module';
-
+import config from 'app/core/config';
+import tinycolor from 'tinycolor2';
export class ThresholdFormCtrl {
panelCtrl: any;
panel: any;
@@ -56,6 +57,19 @@ export class ThresholdFormCtrl {
this.render();
};
}
+
+ onThresholdTypeChange(index) {
+ // Because of the ng-model binding, threshold's color mode is already set here
+ if (this.panel.thresholds[index].colorMode === 'custom') {
+ this.panel.thresholds[index].fillColor = tinycolor(config.theme.colors.blueBase)
+ .setAlpha(0.2)
+ .toRgbString();
+ this.panel.thresholds[index].lineColor = tinycolor(config.theme.colors.blueShade)
+ .setAlpha(0.6)
+ .toRgbString();
+ }
+ this.panelCtrl.render();
+ }
}
coreModule.directive('graphThresholdForm', () => {