diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index ced1e23232d..80ec1ca9b26 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -323,8 +323,10 @@ export default function TableChart<D extends DataRecord = DataRecord>(
 
   const getValueRange = useCallback(
     function getValueRange(key: string, alignPositiveNegative: boolean) {
-      if (typeof data?.[0]?.[key] === 'number') {
-        const nums = data.map(row => row[key]) as number[];
+      const nums = data
+        ?.map(row => row?.[key])
+        .filter(value => typeof value === 'number') as number[];
+      if (data && nums.length === data.length) {
         return (
           alignPositiveNegative
             ? [0, d3Max(nums.map(Math.abs))]
diff --git a/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx b/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx
index 166a88bce0c..611118f0d7c 100644
--- a/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx
@@ -324,6 +324,27 @@ describe('plugin-chart-table', () => {
         expect(cells[4]).toHaveTextContent('$ 2.47k');
       });
 
+      it('render data with a bigint value in a raw record mode', () => {
+        render(
+          ProviderWrapper({
+            children: (
+              <TableChart
+                {...transformProps(testData.bigint)}
+                sticky={false}
+                isRawRecords
+              />
+            ),
+          }),
+        );
+        const cells = document.querySelectorAll('td');
+        expect(document.querySelectorAll('th')[0]).toHaveTextContent('name');
+        expect(document.querySelectorAll('th')[1]).toHaveTextContent('id');
+        expect(cells[0]).toHaveTextContent('Michael');
+        expect(cells[1]).toHaveTextContent('4312');
+        expect(cells[2]).toHaveTextContent('John');
+        expect(cells[3]).toHaveTextContent('1234567890123456789');
+      });
+
       it('render raw data', () => {
         const props = transformProps({
           ...testData.raw,
diff --git a/superset-frontend/plugins/plugin-chart-table/test/testData.ts b/superset-frontend/plugins/plugin-chart-table/test/testData.ts
index c80bd3d6807..aa36bb2bc7b 100644
--- a/superset-frontend/plugins/plugin-chart-table/test/testData.ts
+++ b/superset-frontend/plugins/plugin-chart-table/test/testData.ts
@@ -349,6 +349,27 @@ const empty = {
   ],
 };
 
+const bigint = {
+  ...advanced,
+  queriesData: [
+    {
+      ...basicQueryResult,
+      colnames: ['name', 'id'],
+      coltypes: [GenericDataType.String, GenericDataType.Numeric],
+      data: [
+        {
+          name: 'Michael',
+          id: 4312,
+        },
+        {
+          name: 'John',
+          id: 1234567890123456789n,
+        },
+      ],
+    },
+  ],
+};
+
 export default {
   basic,
   advanced,
@@ -357,4 +378,5 @@ export default {
   comparisonWithConfig,
   empty,
   raw,
+  bigint,
 };