diff --git a/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx b/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx
index 6e915bd3671..7a4c2b2db58 100644
--- a/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx
@@ -142,7 +142,7 @@ export const AnnotationsPlugin2 = ({
           let yKey = config.scales[1].props.scaleKey;
 
           for (let i = 0; i < frame.length; i++) {
-            let color = getColorByName(vals.color?.[i] || DEFAULT_ANNOTATION_COLOR_HEX8);
+            let color = getColorByName(vals.color[i] || DEFAULT_ANNOTATION_COLOR_HEX8);
 
             let x0 = u.valToPos(vals.xMin[i], xKey, true);
             let x1 = u.valToPos(vals.xMax[i], xKey, true);
@@ -173,22 +173,19 @@ export const AnnotationsPlugin2 = ({
           ctx.setLineDash([5, 5]);
 
           for (let i = 0; i < vals.time.length; i++) {
-            let color = getColorByName(vals.color?.[i] || DEFAULT_ANNOTATION_COLOR_HEX8);
+            let color = getColorByName(vals.color[i] || DEFAULT_ANNOTATION_COLOR_HEX8);
 
             let x0 = u.valToPos(vals.time[i], 'x', true);
+            renderLine(ctx, y0, y1, x0, color);
 
-            if (!vals.isRegion?.[i]) {
-              renderLine(ctx, y0, y1, x0, color);
-              // renderUpTriangle(ctx, x0, y1, 8 * uPlot.pxRatio, 5 * uPlot.pxRatio, color);
-            } else if (canvasRegionRendering) {
-              renderLine(ctx, y0, y1, x0, color);
-
+            if (vals.isRegion[i]) {
               let x1 = u.valToPos(vals.timeEnd[i], 'x', true);
-
               renderLine(ctx, y0, y1, x1, color);
 
-              ctx.fillStyle = colorManipulator.alpha(color, 0.1);
-              ctx.fillRect(x0, y0, x1 - x0, u.bbox.height);
+              if (canvasRegionRendering) {
+                ctx.fillStyle = colorManipulator.alpha(color, 0.1);
+                ctx.fillRect(x0, y0, x1 - x0, u.bbox.height);
+              }
             }
           }
         }
@@ -219,14 +216,14 @@ export const AnnotationsPlugin2 = ({
       let markers: React.ReactNode[] = [];
 
       for (let i = 0; i < vals.time.length; i++) {
-        let color = getColorByName(vals.color?.[i] || DEFAULT_ANNOTATION_COLOR);
+        let color = getColorByName(vals.color[i] || DEFAULT_ANNOTATION_COLOR);
         let left = Math.round(plot.valToPos(vals.time[i], 'x')) || 0; // handles -0
         let style: React.CSSProperties | null = null;
         let className = '';
         let isVisible = true;
 
-        if (vals.isRegion?.[i]) {
-          let right = Math.round(plot.valToPos(vals.timeEnd?.[i], 'x')) || 0; // handles -0
+        if (vals.isRegion[i]) {
+          let right = Math.round(plot.valToPos(vals.timeEnd[i], 'x')) || 0; // handles -0
 
           isVisible = left < plot.rect.width && right > 0;