diff --git a/ui/src/dashboards/constants/gaugeColors.js b/ui/src/dashboards/constants/gaugeColors.js
index 665817aaf8..bc0416f8ae 100644
--- a/ui/src/dashboards/constants/gaugeColors.js
+++ b/ui/src/dashboards/constants/gaugeColors.js
@@ -96,6 +96,9 @@ export const DEFAULT_COLORS = [
 ]
 
 export const validateColors = colors => {
+  if (!colors) {
+    return false
+  }
   const hasMin = colors.some(color => color.type === COLOR_TYPE_MIN)
   const hasMax = colors.some(color => color.type === COLOR_TYPE_MAX)
 
diff --git a/ui/src/shared/components/Gauge.js b/ui/src/shared/components/Gauge.js
index 755ba27299..c9adfd521c 100644
--- a/ui/src/shared/components/Gauge.js
+++ b/ui/src/shared/components/Gauge.js
@@ -42,8 +42,11 @@ class Gauge extends Component {
     const gradientThickness = Math.max(minLineWidth, radius / 4)
     const labelValueFontSize = Math.max(minFontSize, radius / 4)
 
-    // Distill out max and min values
     const {colors} = this.props
+    if (!colors || colors.length === 0) {
+      return
+    }
+    // Distill out max and min values
     const minValue = Number(
       colors.find(color => color.type === COLOR_TYPE_MIN).value
     )