Switch to recharts.

package.json

@@ -9,7 +9,6 @@
   "private": true,
   "homepage": "./",
   "dependencies": {
-    "@ant-design/charts": "^2.6.5",
     "@ant-design/icons": "^6.1.0",
     "@babel/plugin-transform-private-property-in-object": "^7.27.1",
     "@codemirror/lang-cpp": "^6.0.3",
@@ -61,6 +60,7 @@
     "react-markdown": "^10.1.0",
     "react-responsive": "^10.0.1",
     "react-router-dom": "^7.8.2",
+    "recharts": "^3.8.1",
     "remark-gfm": "^4.0.1",
     "simplebar-react": "^3.3.2",
     "socket.io-client": "*",

src/components/Dashboard/common/HistoryDisplay.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useContext, useMemo, lazy, Suspense } from 'react'
+import { useEffect, useState, useContext, useMemo } from 'react'
 import {
   Card,
   Segmented,
@@ -6,13 +6,18 @@ import {
   Popover,
   DatePicker,
   Button,
-  Space,
-  Skeleton
+  Space
 } from 'antd'
-
-const Column = lazy(() =>
-  import('@ant-design/charts').then((module) => ({ default: module.Column }))
-)
+import {
+  ResponsiveContainer,
+  BarChart,
+  Bar,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend
+} from 'recharts'
 
 import PropTypes from 'prop-types'
 import { getModelByName } from '../../../database/ObjectModels'
@@ -285,39 +290,17 @@ const HistoryDisplay = ({
     return colors.default
   })
 
-  const config = {
-    data: chartData,
-    height,
-    xField: 'dateFormatted',
-    yField: 'value',
-    theme: {
-      type: isDarkMode ? 'dark' : 'light',
-      fontFamily: '"DM Sans", -apple-system, BlinkMacSystemFont, sans-serif'
-    },
-    stack: true,
-    colorField: 'category',
-    columnWidthRatio: 1,
-    scale: {
-      color: {
-        range: colorRange
+  const chartRows = Array.from(
+    chartData.reduce((acc, item) => {
+      const existing = acc.get(item.date) || {
+        date: item.date,
+        dateFormatted: item.dateFormatted
       }
-    },
-    smooth: true,
-    interaction: {
-      tooltip: {
-        marker: false
-      }
-    },
-    legend: {
-      position: 'top'
-    },
-    animation: {
-      appear: {
-        animation: 'wave-in',
-        duration: 1000
-      }
-    }
-  }
+      existing[item.category] = item.value
+      acc.set(item.date, existing)
+      return acc
+    }, new Map()).values()
+  ).sort((a, b) => new Date(a.date) - new Date(b.date))
 
   const customTimeRangeContent = (
     <Space.Compact>
@@ -391,22 +374,45 @@ const HistoryDisplay = ({
           <LoadingPlaceholder message='Loading history data...' />
         </Flex>
       )}
-      {chartData.length > 0 && (
-        <Suspense
-          fallback={
-            <Flex
-              justify='center'
-              align='center'
-              style={{ height: `${height}px` }}
-            >
-              <Skeleton active paragraph={{ rows: 4 }} />
-            </Flex>
-          }
-        >
-          <Column {...config} />
-        </Suspense>
+      {chartRows.length > 0 && (
+        <div style={{ width: '100%', height: `${height}px` }}>
+          <ResponsiveContainer width='100%' height='100%'>
+            <BarChart data={chartRows}>
+              <CartesianGrid
+                strokeDasharray='3 3'
+                stroke={isDarkMode ? '#303030' : '#f0f0f0'}
+              />
+              <XAxis
+                dataKey='dateFormatted'
+                tick={{ fill: isDarkMode ? '#d9d9d9' : '#595959', fontSize: 12 }}
+              />
+              <YAxis
+                tick={{ fill: isDarkMode ? '#d9d9d9' : '#595959', fontSize: 12 }}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: isDarkMode ? '#1f1f1f' : '#ffffff',
+                  border: `1px solid ${isDarkMode ? '#303030' : '#f0f0f0'}`,
+                  borderRadius: 8
+                }}
+              />
+              <Legend />
+              {modelStats.map((statDef, index) => {
+                const category = statDef.label || statDef.name
+                return (
+                  <Bar
+                    key={category}
+                    dataKey={category}
+                    stackId='history'
+                    fill={colorRange[index] || colors.default}
+                  />
+                )
+              })}
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
       )}
-      {loading == false && chartData.length == 0 && (
+      {loading == false && chartRows.length == 0 && (
         <Flex justify='center' align='center' style={{ height: `${height}px` }}>
           <MissingPlaceholder message='No data available.' />
         </Flex>
@@ -423,7 +429,7 @@ HistoryDisplay.propTypes = {
   ]),
   styles: PropTypes.object,
   endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
-  height: PropTypes.string
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 }
 
 export default HistoryDisplay

vite.config.js

@@ -66,16 +66,6 @@ export default defineConfig({
             id.includes('node_modules/react-dom') ||
             id.includes('node_modules/react-router-dom')
           ) {
-            // EXCLUDE charts so they are handled by lazy loading in HistoryDisplay.jsx
-            if (
-              id.includes('node_modules/@ant-design/charts') ||
-              id.includes('node_modules/@ant-design/plots') ||
-              id.includes('node_modules/@ant-design/graphs') ||
-              id.includes('node_modules/@ant-design/charts-util') ||
-              id.includes('node_modules/@antv')
-            ) {
-              return
-            }
             return 'antd'
           }