Do not render time region line or fill if colors not provided

public/app/plugins/panel/graph/specs/time_region_manager.test.ts

@@ -43,6 +43,25 @@ describe('TimeRegionManager', () => {
     });
   }
 
+  describe('When colors missing in config', () => {
+    plotOptionsScenario('should not throw an error when fillColor is undefined', ctx => {
+      const regions = [
+        { fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, line: true, lineColor: '#ffffff', colorMode: 'custom' },
+      ];
+      const from = moment('2018-01-01T00:00:00+01:00');
+      const to = moment('2018-01-01T23:59:00+01:00');
+      expect(() => ctx.setup(regions, from, to)).not.toThrow();
+    });
+    plotOptionsScenario('should not throw an error when lineColor is undefined', ctx => {
+      const regions = [
+        { fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, fillColor: '#ffffff', line: true, colorMode: 'custom' },
+      ];
+      const from = moment('2018-01-01T00:00:00+01:00');
+      const to = moment('2018-01-01T23:59:00+01:00');
+      expect(() => ctx.setup(regions, from, to)).not.toThrow();
+    });
+  });
+
   describe('When creating plot markings using local time', () => {
     plotOptionsScenario('for day of week region', ctx => {
       const regions = [{ fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, line: true, colorMode: 'red' }];

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

@@ -50,8 +50,8 @@ function getColor(timeRegion, theme: GrafanaTheme): TimeRegionColorDefinition {
 
   if (timeRegion.colorMode === 'custom') {
     return {
-      fill: getColorFromHexRgbOrName(timeRegion.fillColor, theme),
-      line: getColorFromHexRgbOrName(timeRegion.lineColor, theme),
+      fill: timeRegion.fill && timeRegion.fillColor ? getColorFromHexRgbOrName(timeRegion.fillColor, theme) : null,
+      line: timeRegion.line && timeRegion.lineColor ? getColorFromHexRgbOrName(timeRegion.lineColor, theme) : null,
     };
   }
 
@@ -62,8 +62,8 @@ function getColor(timeRegion, theme: GrafanaTheme): TimeRegionColorDefinition {
   }
 
   return {
-    fill: getColorFromHexRgbOrName(colorMode.color.fill, theme),
-    line: getColorFromHexRgbOrName(colorMode.color.line, theme),
+    fill: timeRegion.fill ? getColorFromHexRgbOrName(colorMode.color.fill, theme) : null,
+    line: timeRegion.fill ? getColorFromHexRgbOrName(colorMode.color.line, theme) : null,
   };
 }