diff --git a/web/ui/react-app/src/pages/graph/GraphHeatmapHelpers.test.ts b/web/ui/react-app/src/pages/graph/GraphHeatmapHelpers.test.ts
index dfc718587..26c44be68 100644
--- a/web/ui/react-app/src/pages/graph/GraphHeatmapHelpers.test.ts
+++ b/web/ui/react-app/src/pages/graph/GraphHeatmapHelpers.test.ts
@@ -1,8 +1,23 @@
+import { DataTableProps } from './DataTable';
 import { isHeatmapData } from './GraphHeatmapHelpers';
 
 describe('GraphHeatmapHelpers', () => {
-  it('isHeatmapData should return false for a vector', () => {
-    const data = {
+  it('isHeatmapData should return false for scalar and string resultType', () => {
+    let data = {
+      resultType: 'scalar',
+      result: [1703091180.125, '1703091180.125'],
+    } as DataTableProps['data'];
+    expect(isHeatmapData(data)).toBe(false);
+
+    data = {
+      resultType: 'string',
+      result: [1704305680.332, '2504'],
+    } as DataTableProps['data'];
+    expect(isHeatmapData(data)).toBe(false);
+  });
+
+  it('isHeatmapData should return false for a vector and matrix if length < 2', () => {
+    let data = {
       resultType: 'vector',
       result: [
         {
@@ -13,15 +28,39 @@ describe('GraphHeatmapHelpers', () => {
           value: [1703091180.683, '6'],
         },
       ],
-    };
+    } as DataTableProps['data'];
+    expect(isHeatmapData(data)).toBe(false);
+
+    data = {
+      resultType: 'matrix',
+      result: [
+        {
+          metric: {},
+          values: [[1703091180.683, '6']],
+        },
+      ],
+    } as DataTableProps['data'];
     expect(isHeatmapData(data)).toBe(false);
   });
 
-  it('isHeatmapData should return false for scalar resultType', () => {
+  it('isHeatmapData should return true for valid heatmap data', () => {
     const data = {
-      resultType: 'scalar',
-      result: [1703091180.125, '1703091180.125'],
-    };
-    expect(isHeatmapData(data)).toBe(false);
+      resultType: 'matrix',
+      result: [
+        {
+          metric: {
+            le: '100',
+          },
+          values: [[1703091180.683, '6']],
+        },
+        {
+          metric: {
+            le: '1000',
+          },
+          values: [[1703091190.683, '6.1']],
+        },
+      ],
+    } as DataTableProps['data'];
+    expect(isHeatmapData(data)).toBe(true);
   });
 });
diff --git a/web/ui/react-app/src/pages/graph/GraphHeatmapHelpers.ts b/web/ui/react-app/src/pages/graph/GraphHeatmapHelpers.ts
index d564959cb..d8b249c30 100644
--- a/web/ui/react-app/src/pages/graph/GraphHeatmapHelpers.ts
+++ b/web/ui/react-app/src/pages/graph/GraphHeatmapHelpers.ts
@@ -1,10 +1,12 @@
+import { DataTableProps } from './DataTable';
 import { GraphProps, GraphSeries } from './Graph';
 
-export function isHeatmapData(data: GraphProps['data']) {
-  if (!data?.result?.length || data?.result?.length < 2) {
+export function isHeatmapData(data: DataTableProps['data']) {
+  if (data?.resultType === 'scalar' || data?.resultType === 'string' || !data?.result?.length || data?.result?.length < 2) {
     return false;
   }
-  const result = data.result;
+  // Type assertion to prevent TS2349 error.
+  const result = data.result as GraphProps['data']['result'];
   const firstLabels = Object.keys(result[0].metric).filter((label) => label !== 'le');
   return result.every(({ metric }) => {
     const labels = Object.keys(metric).filter((label) => label !== 'le');