diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json
index 9efccdb13a..612bc4389d 100644
--- a/packages/desktop-client/package.json
+++ b/packages/desktop-client/package.json
@@ -85,7 +85,7 @@
     "react-spring": "10.0.0",
     "react-swipeable": "^7.0.2",
     "react-virtualized-auto-sizer": "^2.0.2",
-    "recharts": "^3.4.1",
+    "recharts": "^3.7.0",
     "rehype-external-links": "^3.0.0",
     "remark-gfm": "^4.0.1",
     "rollup-plugin-visualizer": "^6.0.5",
diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
index a362d30959..922bd0516c 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -10,13 +10,14 @@ import {
   Bar,
   BarChart,
   CartesianGrid,
-  Cell,
   LabelList,
+  Rectangle,
   ReferenceLine,
   Tooltip,
   XAxis,
   YAxis,
 } from 'recharts';
+import type { BarShapeProps } from 'recharts';
 
 import type {
   balanceTypeOpType,
@@ -268,9 +269,8 @@ export function BarGraph({
                 <XAxis
                   dataKey={yAxis}
                   angle={-35}
-                  textAnchor="end"
                   height={Math.sqrt(longestLabelLength) * 25}
-                  tick={{ fill: theme.pageText }}
+                  tick={{ fill: theme.pageText, textAnchor: 'end' }}
                   tickLine={{ stroke: theme.pageText }}
                 />
               )}
@@ -315,6 +315,14 @@ export function BarGraph({
                     id: item.id,
                   })
                 }
+                shape={(props: BarShapeProps) => (
+                  <Rectangle
+                    {...props}
+                    fill={
+                      data.legend[props.index]?.color ?? props.fill ?? undefined
+                    }
+                  />
+                )}
               >
                 {viewLabels && !compact && (
                   <LabelList
@@ -322,13 +330,6 @@ export function BarGraph({
                     content={e => customLabel(e, balanceTypeOp, format)}
                   />
                 )}
-                {data.legend.map((entry, index) => (
-                  <Cell
-                    key={`cell-${index}`}
-                    fill={entry.color}
-                    name={entry.name}
-                  />
-                ))}
               </Bar>
             </BarChart>
           </div>
diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
index d76dd34aa9..2a7170d29a 100644
--- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -3,7 +3,8 @@ import React, { useState } from 'react';
 import type { CSSProperties } from 'react';
 
 import { theme } from '@actual-app/components/theme';
-import { Cell, Pie, PieChart, Sector, Tooltip } from 'recharts';
+import { Pie, PieChart, Sector, Tooltip } from 'recharts';
+import type { PieSectorShapeProps } from 'recharts';
 
 import type {
   balanceTypeOpType,
@@ -281,20 +282,6 @@ export function DonutGraph({
                 style={{ cursor: pointer }}
               >
                 <Pie
-                  activeShape={
-                    width < 220 || height < 130
-                      ? undefined
-                      : compact
-                        ? props => (
-                            <ActiveShapeMobileWithFormat
-                              {...props}
-                              format={format}
-                            />
-                          )
-                        : props => (
-                            <ActiveShapeWithFormat {...props} format={format} />
-                          )
-                  }
                   dataKey={val => getVal(val)}
                   nameKey={yAxis}
                   {...animationProps}
@@ -311,6 +298,20 @@ export function DonutGraph({
                   }
                   startAngle={90}
                   endAngle={-270}
+                  shape={(props: PieSectorShapeProps, index: number) => {
+                    const fill = data.legend[index]?.color ?? props.fill;
+                    const showActiveShape = width >= 220 && height >= 130;
+                    const isActive = props.isActive || index === activeIndex;
+                    if (isActive && showActiveShape) {
+                      const shapeProps = { ...props, fill, format };
+                      return compact ? (
+                        <ActiveShapeMobileWithFormat {...shapeProps} />
+                      ) : (
+                        <ActiveShapeWithFormat {...shapeProps} />
+                      );
+                    }
+                    return <Sector {...props} fill={fill} />;
+                  }}
                   onMouseLeave={() => setPointer('')}
                   onMouseEnter={(_, index) => {
                     if (canDeviceHover()) {
@@ -346,11 +347,7 @@ export function DonutGraph({
                       });
                     }
                   }}
-                >
-                  {data.legend.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={entry.color} />
-                  ))}
-                </Pie>
+                />
                 <Tooltip
                   content={() => null}
                   defaultIndex={activeIndex}
diff --git a/upcoming-release-notes/7022.md b/upcoming-release-notes/7022.md
new file mode 100644
index 0000000000..c095696738
--- /dev/null
+++ b/upcoming-release-notes/7022.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [matt-fidd]
+---
+
+Bump recharts
diff --git a/yarn.lock b/yarn.lock
index 2480a8aa0b..edbc88ef72 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -207,7 +207,7 @@ __metadata:
     react-spring: "npm:10.0.0"
     react-swipeable: "npm:^7.0.2"
     react-virtualized-auto-sizer: "npm:^2.0.2"
-    recharts: "npm:^3.4.1"
+    recharts: "npm:^3.7.0"
     rehype-external-links: "npm:^3.0.0"
     remark-gfm: "npm:^4.0.1"
     rollup-plugin-visualizer: "npm:^6.0.5"
@@ -24681,9 +24681,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"recharts@npm:^3.4.1":
-  version: 3.4.1
-  resolution: "recharts@npm:3.4.1"
+"recharts@npm:^3.7.0":
+  version: 3.7.0
+  resolution: "recharts@npm:3.7.0"
   dependencies:
     "@reduxjs/toolkit": "npm:1.x.x || 2.x.x"
     clsx: "npm:^2.1.1"
@@ -24700,7 +24700,7 @@ __metadata:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     react-is: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10/f05d69d54c9c44ed7ee513d30a05b04708c0ccd07780e3a1cc8283a7239bddb8719e6bff7981b96a71a967ce6ba910c5fb05ffac93f49a75354230e8d04f6958
+  checksum: 10/717d8d1886980fca6c6fd79c28abd5a12e2e8979cab30aa663035c8548010a3aef63d6fdc750e4834c9df99efabe61b3f0827b88020933586f90df8d1d083f3c
   languageName: node
   linkType: hard