diff --git a/ui/src/base/object_utils.ts b/ui/src/base/object_utils.ts
index d8cdd38..ec662a8 100644
--- a/ui/src/base/object_utils.ts
+++ b/ui/src/base/object_utils.ts
@@ -49,3 +49,7 @@
   }
   return true;
 }
+
+export function isString(s: unknown): s is string {
+  return typeof s === 'string' || s instanceof String;
+}
diff --git a/ui/src/common/canvas_utils.ts b/ui/src/common/canvas_utils.ts
index 71b3b76..2d09617 100644
--- a/ui/src/common/canvas_utils.ts
+++ b/ui/src/common/canvas_utils.ts
@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {isString} from '../base/object_utils';
 import {globals} from '../frontend/globals';
 
 export function cropText(str: string, charWidth: number, rectWidth: number) {
@@ -89,12 +90,20 @@
   ctx.lineTo(x + width, y + 4 * triangleSize);
   ctx.lineTo(x, y + height);
 
-  const gradient = ctx.createLinearGradient(x, y, x + width, y + height);
-  gradient.addColorStop(0.66, ctx.fillStyle as string);
-  gradient.addColorStop(1, '#FFFFFF');
-  ctx.fillStyle = gradient;
+  const fillStyle = ctx.fillStyle;
+  if (isString(fillStyle)) {
+    const gradient = ctx.createLinearGradient(x, y, x + width, y + height);
+    gradient.addColorStop(0.66, fillStyle);
+    gradient.addColorStop(1, '#FFFFFF');
+    ctx.fillStyle = gradient;
+  } else {
+    throw new Error(
+        `drawIncompleteSlice() expects fillStyle to be a simple color not ${
+            fillStyle}`);
+  }
 
   ctx.fill();
+  ctx.fillStyle = fillStyle;
 }
 
 export function drawTrackHoverTooltip(