recharts differences

note
bump dependencies
2026-03-09 03:32:54 -05:00 · 2025-10-22 17:10:42 +01:00 · 2025-10-22 14:26:52 +01:00 · 2025-10-22 14:26:31 +01:00
16 changed files with 972 additions and 881 deletions
--- a/packages/desktop-client/package.json
+++ b/packages/desktop-client/package.json
@@ -15,8 +15,8 @@
    "@emotion/css": "^11.13.5",
    "@fontsource/redacted-script": "^5.2.8",
    "@juggle/resize-observer": "^3.4.0",
-    "@lezer/highlight": "^1.2.1",
-    "@playwright/test": "1.56.0",
+    "@lezer/highlight": "^1.2.2",
+    "@playwright/test": "1.56.1",
    "@rollup/plugin-inject": "^5.0.5",
    "@swc/core": "^1.13.5",
    "@swc/helpers": "^0.5.17",
@@ -27,7 +27,7 @@
    "@types/lodash": "^4",
    "@types/promise-retry": "^1.1.6",
    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.1",
+    "@types/react-dom": "^19.2.2",
    "@types/react-grid-layout": "^1",
    "@types/react-modal": "^3.16.3",
    "@uiw/react-codemirror": "^4.25.2",
@@ -41,7 +41,7 @@
    "date-fns": "^4.1.0",
    "downshift": "9.0.10",
    "hyperformula": "^3.1.0",
-    "i18next": "^25.5.3",
+    "i18next": "^25.6.0",
    "i18next-parser": "^9.3.0",
    "i18next-resources-to-backend": "^1.2.1",
    "inter-ui": "^3.19.3",
@@ -62,7 +62,7 @@
    "react-dom": "19.2.0",
    "react-error-boundary": "^6.0.0",
    "react-grid-layout": "^1.5.2",
-    "react-hotkeys-hook": "^5.1.0",
+    "react-hotkeys-hook": "^5.2.1",
    "react-i18next": "^16.0.0",
    "react-markdown": "^10.1.0",
    "react-modal": "3.16.3",
@@ -72,15 +72,15 @@
    "react-spring": "10.0.0",
    "react-swipeable": "^7.0.2",
    "react-virtualized-auto-sizer": "^1.0.26",
-    "recharts": "^3.2.1",
+    "recharts": "^3.3.0",
    "rehype-external-links": "^3.0.0",
    "remark-gfm": "^4.0.1",
-    "rollup-plugin-visualizer": "^6.0.4",
+    "rollup-plugin-visualizer": "^6.0.5",
    "sass": "^1.93.2",
    "usehooks-ts": "^3.1.1",
    "uuid": "^13.0.0",
    "vite": "^7.1.11",
-    "vite-plugin-pwa": "^1.0.3",
+    "vite-plugin-pwa": "^1.1.0",
    "vite-tsconfig-paths": "^5.1.4",
    "vitest": "^3.2.4",
    "xml2js": "^0.6.2"
--- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
@@ -12,7 +12,6 @@ import {
  YAxis,
  Tooltip,
  LabelList,
-  ResponsiveContainer,
 } from 'recharts';

 import {
@@ -220,120 +219,119 @@ export function AreaGraph({
    >
      {(width, height) =>
        data.intervalData && (
-          <ResponsiveContainer>
-            <div>
-              {!compact && <div style={{ marginTop: '15px' }} />}
-              <AreaChart
-                width={width}
-                height={height}
-                data={data.intervalData}
-                margin={{
-                  top: 0,
-                  right: labelsMargin,
-                  left: leftMargin,
-                  bottom: 10,
-                }}
-              >
-                {compact ? null : (
-                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                )}
-                {compact ? null : (
-                  <XAxis
-                    dataKey="date"
-                    tick={{ fill: theme.pageText }}
-                    tickLine={{ stroke: theme.pageText }}
-                  />
-                )}
-                {compact ? null : (
-                  <YAxis
-                    dataKey={balanceTypeOp}
-                    domain={[
-                      viewLabels ? labelsMin : 'auto',
-                      viewLabels ? labelsMax : 'auto',
-                    ]}
-                    tickFormatter={tickFormatter}
-                    tick={{ fill: theme.pageText }}
-                    tickLine={{ stroke: theme.pageText }}
-                    tickSize={0}
-                  />
-                )}
-                {showTooltip && (
-                  <Tooltip
-                    content={
-                      <CustomTooltip
-                        balanceTypeOp={balanceTypeOp}
-                        format={format}
-                      />
-                    }
-                    isAnimationActive={false}
-                  />
-                )}
-                <defs>
-                  <linearGradient
-                    id={`fill${balanceTypeOp}`}
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="1"
-                  >
-                    <stop
-                      offset={off}
-                      stopColor={theme.reportsBlue}
-                      stopOpacity={0.2}
-                    />
-                    <stop
-                      offset={off}
-                      stopColor={theme.reportsRed}
-                      stopOpacity={0.2}
-                    />
-                  </linearGradient>
-                  <linearGradient
-                    id={`stroke${balanceTypeOp}`}
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="1"
-                  >
-                    <stop
-                      offset={off}
-                      stopColor={theme.reportsBlue}
-                      stopOpacity={1}
-                    />
-                    <stop
-                      offset={off}
-                      stopColor={theme.reportsRed}
-                      stopOpacity={1}
-                    />
-                  </linearGradient>
-                </defs>
-
-                <Area
-                  type="linear"
-                  dot={false}
-                  activeDot={false}
-                  animationDuration={0}
+          <div>
+            {!compact && <div style={{ marginTop: '15px' }} />}
+            <AreaChart
+              responsive
+              width={width}
+              height={height}
+              data={data.intervalData}
+              margin={{
+                top: 0,
+                right: labelsMargin,
+                left: leftMargin,
+                bottom: 10,
+              }}
+            >
+              {compact ? null : (
+                <CartesianGrid strokeDasharray="3 3" vertical={false} />
+              )}
+              {compact ? null : (
+                <XAxis
+                  dataKey="date"
+                  tick={{ fill: theme.pageText }}
+                  tickLine={{ stroke: theme.pageText }}
+                />
+              )}
+              {compact ? null : (
+                <YAxis
                  dataKey={balanceTypeOp}
-                  stroke={`url(#stroke${balanceTypeOp})`}
-                  fill={`url(#fill${balanceTypeOp})`}
-                  fillOpacity={1}
-                >
-                  {viewLabels && !compact && (
-                    <LabelList
-                      dataKey={balanceTypeOp}
-                      content={props =>
-                        customLabel({
-                          props,
-                          width,
-                          end: lastLabel,
-                          format,
-                        })
-                      }
+                  domain={[
+                    viewLabels ? labelsMin : 'auto',
+                    viewLabels ? labelsMax : 'auto',
+                  ]}
+                  tickFormatter={tickFormatter}
+                  tick={{ fill: theme.pageText }}
+                  tickLine={{ stroke: theme.pageText }}
+                  tickSize={0}
+                />
+              )}
+              {showTooltip && (
+                <Tooltip
+                  content={
+                    <CustomTooltip
+                      balanceTypeOp={balanceTypeOp}
+                      format={format}
                    />
-                  )}
-                </Area>
-              </AreaChart>
-            </div>
-          </ResponsiveContainer>
+                  }
+                  isAnimationActive={false}
+                />
+              )}
+              <defs>
+                <linearGradient
+                  id={`fill${balanceTypeOp}`}
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop
+                    offset={off}
+                    stopColor={theme.reportsBlue}
+                    stopOpacity={0.2}
+                  />
+                  <stop
+                    offset={off}
+                    stopColor={theme.reportsRed}
+                    stopOpacity={0.2}
+                  />
+                </linearGradient>
+                <linearGradient
+                  id={`stroke${balanceTypeOp}`}
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop
+                    offset={off}
+                    stopColor={theme.reportsBlue}
+                    stopOpacity={1}
+                  />
+                  <stop
+                    offset={off}
+                    stopColor={theme.reportsRed}
+                    stopOpacity={1}
+                  />
+                </linearGradient>
+              </defs>
+
+              <Area
+                type="linear"
+                dot={false}
+                activeDot={false}
+                animationDuration={0}
+                dataKey={balanceTypeOp}
+                stroke={`url(#stroke${balanceTypeOp})`}
+                fill={`url(#fill${balanceTypeOp})`}
+                fillOpacity={1}
+              >
+                {viewLabels && !compact && (
+                  <LabelList
+                    dataKey={balanceTypeOp}
+                    content={props =>
+                      customLabel({
+                        props,
+                        width,
+                        end: lastLabel,
+                        format,
+                      })
+                    }
+                  />
+                )}
+              </Area>
+            </AreaChart>
+          </div>
        )
      }
    </Container>
--- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -15,7 +15,6 @@ import {
  YAxis,
  Tooltip,
  LabelList,
-  ResponsiveContainer,
 } from 'recharts';

 import {
@@ -213,107 +212,104 @@ export function BarGraph({
    >
      {(width, height) =>
        data[splitData] && (
-          <ResponsiveContainer>
-            <div>
-              {!compact && <div style={{ marginTop: '15px' }} />}
-              <BarChart
-                width={width}
-                height={height}
-                stackOffset="sign"
-                data={data[splitData]}
-                style={{ cursor: pointer }}
-                margin={{
-                  top: labelsMargin,
-                  right: 0,
-                  left: leftMargin,
-                  bottom: 0,
-                }}
+          <div>
+            {!compact && <div style={{ marginTop: '15px' }} />}
+            <BarChart
+              responsive
+              width={width}
+              height={height}
+              stackOffset="sign"
+              data={data[splitData]}
+              style={{ cursor: pointer }}
+              margin={{
+                top: labelsMargin,
+                right: 0,
+                left: leftMargin,
+                bottom: 0,
+              }}
+            >
+              {showTooltip && (
+                <Tooltip
+                  cursor={{ fill: 'transparent' }}
+                  content={
+                    <CustomTooltip
+                      balanceTypeOp={balanceTypeOp}
+                      yAxis={yAxis}
+                      format={format}
+                    />
+                  }
+                  formatter={numberFormatterTooltip}
+                  isAnimationActive={false}
+                />
+              )}
+              {!compact && <CartesianGrid strokeDasharray="3 3" />}
+              {!compact && (
+                <XAxis
+                  dataKey={yAxis}
+                  angle={-35}
+                  textAnchor="end"
+                  height={Math.sqrt(longestLabelLength) * 25}
+                  tick={{ fill: theme.pageText }}
+                  tickLine={{ stroke: theme.pageText }}
+                />
+              )}
+              {!compact && (
+                <YAxis
+                  tickFormatter={value =>
+                    getCustomTick(
+                      format(value, 'financial-no-decimals'),
+                      privacyMode,
+                    )
+                  }
+                  tick={{ fill: theme.pageText }}
+                  tickLine={{ stroke: theme.pageText }}
+                  tickSize={0}
+                />
+              )}
+              {!compact && <ReferenceLine y={0} stroke={theme.pageTextLight} />}
+              <Bar
+                dataKey={val => getVal(val)}
+                stackId="a"
+                onMouseLeave={() => setPointer('')}
+                onMouseEnter={() =>
+                  !['Group', 'Interval'].includes(groupBy) &&
+                  setPointer('pointer')
+                }
+                onClick={item =>
+                  ((compact && showTooltip) || !compact) &&
+                  !['Group', 'Interval'].includes(groupBy) &&
+                  showActivity({
+                    navigate,
+                    categories,
+                    accounts,
+                    balanceTypeOp,
+                    filters,
+                    showHiddenCategories,
+                    showOffBudget,
+                    type: 'totals',
+                    startDate: data.startDate,
+                    endDate: data.endDate,
+                    field: groupBy.toLowerCase(),
+                    id: item.id,
+                  })
+                }
              >
-                {showTooltip && (
-                  <Tooltip
-                    cursor={{ fill: 'transparent' }}
-                    content={
-                      <CustomTooltip
-                        balanceTypeOp={balanceTypeOp}
-                        yAxis={yAxis}
-                        format={format}
-                      />
-                    }
-                    formatter={numberFormatterTooltip}
-                    isAnimationActive={false}
+                {viewLabels && !compact && (
+                  <LabelList
+                    dataKey={val => getVal(val)}
+                    content={e => customLabel(e, balanceTypeOp, format)}
                  />
                )}
-                {!compact && <CartesianGrid strokeDasharray="3 3" />}
-                {!compact && (
-                  <XAxis
-                    dataKey={yAxis}
-                    angle={-35}
-                    textAnchor="end"
-                    height={Math.sqrt(longestLabelLength) * 25}
-                    tick={{ fill: theme.pageText }}
-                    tickLine={{ stroke: theme.pageText }}
+                {data.legend.map((entry, index) => (
+                  <Cell
+                    key={`cell-${index}`}
+                    fill={entry.color}
+                    name={entry.name}
                  />
-                )}
-                {!compact && (
-                  <YAxis
-                    tickFormatter={value =>
-                      getCustomTick(
-                        format(value, 'financial-no-decimals'),
-                        privacyMode,
-                      )
-                    }
-                    tick={{ fill: theme.pageText }}
-                    tickLine={{ stroke: theme.pageText }}
-                    tickSize={0}
-                  />
-                )}
-                {!compact && (
-                  <ReferenceLine y={0} stroke={theme.pageTextLight} />
-                )}
-                <Bar
-                  dataKey={val => getVal(val)}
-                  stackId="a"
-                  onMouseLeave={() => setPointer('')}
-                  onMouseEnter={() =>
-                    !['Group', 'Interval'].includes(groupBy) &&
-                    setPointer('pointer')
-                  }
-                  onClick={item =>
-                    ((compact && showTooltip) || !compact) &&
-                    !['Group', 'Interval'].includes(groupBy) &&
-                    showActivity({
-                      navigate,
-                      categories,
-                      accounts,
-                      balanceTypeOp,
-                      filters,
-                      showHiddenCategories,
-                      showOffBudget,
-                      type: 'totals',
-                      startDate: data.startDate,
-                      endDate: data.endDate,
-                      field: groupBy.toLowerCase(),
-                      id: item.id,
-                    })
-                  }
-                >
-                  {viewLabels && !compact && (
-                    <LabelList
-                      dataKey={val => getVal(val)}
-                      content={e => customLabel(e, balanceTypeOp, format)}
-                    />
-                  )}
-                  {data.legend.map((entry, index) => (
-                    <Cell
-                      key={`cell-${index}`}
-                      fill={entry.color}
-                      name={entry.name}
-                    />
-                  ))}
-                </Bar>
-              </BarChart>
-            </div>
-          </ResponsiveContainer>
+                ))}
+              </Bar>
+            </BarChart>
+          </div>
        )
      }
    </Container>
--- a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
@@ -13,7 +13,6 @@ import {
  XAxis,
  YAxis,
  Tooltip,
-  ResponsiveContainer,
 } from 'recharts';

 import { PrivacyFilter } from '@desktop-client/components/PrivacyFilter';
@@ -102,32 +101,29 @@ export function BarLineGraph({
    >
      {(width, height) =>
        data && (
-          <ResponsiveContainer>
-            <div>
-              {!compact && <div style={{ marginTop: '15px' }} />}
-              <ComposedChart
-                width={width}
-                height={height}
-                data={data.data}
-                margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
-              >
-                {showTooltip && (
-                  <Tooltip
-                    content={<CustomTooltip />}
-                    formatter={numberFormatterTooltip}
-                    isAnimationActive={false}
-                  />
-                )}
-                {!compact && <CartesianGrid strokeDasharray="3 3" />}
-                {!compact && <XAxis dataKey="x" />}
-                {!compact && (
-                  <YAxis dataKey="y" tickFormatter={tickFormatter} />
-                )}
-                <Bar type="monotone" dataKey="y" fill="#8884d8" />
-                <Line type="monotone" dataKey="y" stroke="#8884d8" />
-              </ComposedChart>
-            </div>
-          </ResponsiveContainer>
+          <div>
+            {!compact && <div style={{ marginTop: '15px' }} />}
+            <ComposedChart
+              responsive
+              width={width}
+              height={height}
+              data={data.data}
+              margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
+            >
+              {showTooltip && (
+                <Tooltip
+                  content={<CustomTooltip />}
+                  formatter={numberFormatterTooltip}
+                  isAnimationActive={false}
+                />
+              )}
+              {!compact && <CartesianGrid strokeDasharray="3 3" />}
+              {!compact && <XAxis dataKey="x" />}
+              {!compact && <YAxis dataKey="y" tickFormatter={tickFormatter} />}
+              <Bar type="monotone" dataKey="y" fill="#8884d8" />
+              <Line type="monotone" dataKey="y" stroke="#8884d8" />
+            </ComposedChart>
+          </div>
        )
      }
    </Container>
--- a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
@@ -11,7 +11,6 @@ import {
  ComposedChart,
  Line,
  ReferenceLine,
-  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
@@ -143,73 +142,72 @@ export function CashFlowGraph({
  return (
    <Container style={style}>
      {(width, height) => (
-        <ResponsiveContainer>
-          <ComposedChart
-            width={width}
-            height={height}
-            stackOffset="sign"
-            data={data}
-          >
-            <CartesianGrid strokeDasharray="3 3" vertical={false} />
-            <XAxis
-              dataKey="date"
-              tick={{ fill: theme.reportsLabel }}
-              tickFormatter={x => {
-                // eslint-disable-next-line actual/typography
-                return d.format(x, isConcise ? "MMM ''yy" : 'MMM d', {
-                  locale,
-                });
-              }}
-              minTickGap={50}
-            />
-            <YAxis
-              tick={{ fill: theme.reportsLabel }}
-              tickCount={8}
-              tickFormatter={value =>
-                privacyMode && !yAxisIsHovered
-                  ? '...'
-                  : format(value, 'financial-no-decimals')
-              }
-              onMouseEnter={() => setYAxisIsHovered(true)}
-              onMouseLeave={() => setYAxisIsHovered(false)}
-            />
-            <Tooltip
-              labelFormatter={x => {
-                // eslint-disable-next-line actual/typography
-                return d.format(x, isConcise ? "MMM ''yy" : 'MMM d', {
-                  locale,
-                });
-              }}
-              content={<CustomTooltip isConcise={isConcise} format={format} />}
-              isAnimationActive={false}
-            />
+        <ComposedChart
+          responsive
+          width={width}
+          height={height}
+          stackOffset="sign"
+          data={data}
+        >
+          <CartesianGrid strokeDasharray="3 3" vertical={false} />
+          <XAxis
+            dataKey="date"
+            tick={{ fill: theme.reportsLabel }}
+            tickFormatter={x => {
+              // eslint-disable-next-line actual/typography
+              return d.format(x, isConcise ? "MMM ''yy" : 'MMM d', {
+                locale,
+              });
+            }}
+            minTickGap={50}
+          />
+          <YAxis
+            tick={{ fill: theme.reportsLabel }}
+            tickCount={8}
+            tickFormatter={value =>
+              privacyMode && !yAxisIsHovered
+                ? '...'
+                : format(value, 'financial-no-decimals')
+            }
+            onMouseEnter={() => setYAxisIsHovered(true)}
+            onMouseLeave={() => setYAxisIsHovered(false)}
+          />
+          <Tooltip
+            labelFormatter={x => {
+              // eslint-disable-next-line actual/typography
+              return d.format(x, isConcise ? "MMM ''yy" : 'MMM d', {
+                locale,
+              });
+            }}
+            content={<CustomTooltip isConcise={isConcise} format={format} />}
+            isAnimationActive={false}
+          />

-            <ReferenceLine y={0} stroke="#000" />
-            <Bar
-              dataKey="income"
-              stackId="a"
-              fill={chartTheme.colors.blue}
-              maxBarSize={MAX_BAR_SIZE}
-              animationDuration={ANIMATION_DURATION}
-            />
-            <Bar
-              dataKey="expenses"
-              stackId="a"
-              fill={chartTheme.colors.red}
-              maxBarSize={MAX_BAR_SIZE}
-              animationDuration={ANIMATION_DURATION}
-            />
-            <Line
-              type="monotone"
-              dataKey="balance"
-              dot={false}
-              hide={!showBalance}
-              stroke={theme.pageTextLight}
-              strokeWidth={2}
-              animationDuration={ANIMATION_DURATION}
-            />
-          </ComposedChart>
-        </ResponsiveContainer>
+          <ReferenceLine y={0} stroke="#000" />
+          <Bar
+            dataKey="income"
+            stackId="a"
+            fill={chartTheme.colors.blue}
+            maxBarSize={MAX_BAR_SIZE}
+            animationDuration={ANIMATION_DURATION}
+          />
+          <Bar
+            dataKey="expenses"
+            stackId="a"
+            fill={chartTheme.colors.red}
+            maxBarSize={MAX_BAR_SIZE}
+            animationDuration={ANIMATION_DURATION}
+          />
+          <Line
+            type="monotone"
+            dataKey="balance"
+            dot={false}
+            hide={!showBalance}
+            stroke={theme.pageTextLight}
+            strokeWidth={2}
+            animationDuration={ANIMATION_DURATION}
+          />
+        </ComposedChart>
      )}
    </Container>
  );
--- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -2,14 +2,7 @@
 import React, { useState, type CSSProperties } from 'react';

 import { theme } from '@actual-app/components/theme';
-import {
-  PieChart,
-  Pie,
-  Cell,
-  Sector,
-  ResponsiveContainer,
-  Tooltip,
-} from 'recharts';
+import { PieChart, Pie, Cell, Sector, Tooltip } from 'recharts';

 import {
  type balanceTypeOpType,
@@ -271,96 +264,92 @@ export function DonutGraph({

        return (
          data[splitData] && (
-            <ResponsiveContainer>
-              <div>
-                {!compact && <div style={{ marginTop: '15px' }} />}
-                <PieChart
-                  width={width}
-                  height={height}
-                  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}
-                    isAnimationActive={false}
-                    data={
-                      data[splitData]?.map(item => ({
-                        ...item,
-                      })) ?? []
-                    }
-                    innerRadius={Math.min(width, height) * 0.2}
-                    fill="#8884d8"
-                    labelLine={false}
-                    label={e =>
-                      viewLabels && !compact ? customLabel(e) : <div />
-                    }
-                    startAngle={90}
-                    endAngle={-270}
-                    onMouseLeave={() => setPointer('')}
-                    onMouseEnter={(_, index) => {
-                      if (canDeviceHover()) {
-                        setActiveIndex(index);
-                        if (!['Group', 'Interval'].includes(groupBy)) {
-                          setPointer('pointer');
-                        }
-                      }
-                    }}
-                    onClick={(item, index) => {
-                      if (!canDeviceHover()) {
-                        setActiveIndex(index);
+            <div>
+              {!compact && <div style={{ marginTop: '15px' }} />}
+              <PieChart
+                responsive
+                width={width}
+                height={height}
+                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}
+                  isAnimationActive={false}
+                  data={
+                    data[splitData]?.map(item => ({
+                      ...item,
+                    })) ?? []
+                  }
+                  innerRadius={Math.min(width, height) * 0.2}
+                  fill="#8884d8"
+                  labelLine={false}
+                  label={e =>
+                    viewLabels && !compact ? customLabel(e) : <div />
+                  }
+                  startAngle={90}
+                  endAngle={-270}
+                  onMouseLeave={() => setPointer('')}
+                  onMouseEnter={(_, index) => {
+                    if (canDeviceHover()) {
+                      setActiveIndex(index);
+                      if (!['Group', 'Interval'].includes(groupBy)) {
+                        setPointer('pointer');
                      }
+                    }
+                  }}
+                  onClick={(item, index) => {
+                    if (!canDeviceHover()) {
+                      setActiveIndex(index);
+                    }

-                      if (
-                        !['Group', 'Interval'].includes(groupBy) &&
-                        (canDeviceHover() || activeIndex === index) &&
-                        ((compact && showTooltip) || !compact)
-                      ) {
-                        showActivity({
-                          navigate,
-                          categories,
-                          accounts,
-                          balanceTypeOp,
-                          filters,
-                          showHiddenCategories,
-                          showOffBudget,
-                          type: 'totals',
-                          startDate: data.startDate,
-                          endDate: data.endDate,
-                          field: groupBy.toLowerCase(),
-                          id: item.id,
-                        });
-                      }
-                    }}
-                  >
-                    {data.legend.map((entry, index) => (
-                      <Cell key={`cell-${index}`} fill={entry.color} />
-                    ))}
-                  </Pie>
-                  <Tooltip
-                    content={() => null}
-                    defaultIndex={activeIndex}
-                    active={true}
-                  />
-                </PieChart>
-              </div>
-            </ResponsiveContainer>
+                    if (
+                      !['Group', 'Interval'].includes(groupBy) &&
+                      (canDeviceHover() || activeIndex === index) &&
+                      ((compact && showTooltip) || !compact)
+                    ) {
+                      showActivity({
+                        navigate,
+                        categories,
+                        accounts,
+                        balanceTypeOp,
+                        filters,
+                        showHiddenCategories,
+                        showOffBudget,
+                        type: 'totals',
+                        startDate: data.startDate,
+                        endDate: data.endDate,
+                        field: groupBy.toLowerCase(),
+                        id: item.id,
+                      });
+                    }
+                  }}
+                >
+                  {data.legend.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={entry.color} />
+                  ))}
+                </Pie>
+                <Tooltip
+                  content={() => null}
+                  defaultIndex={activeIndex}
+                  active={true}
+                />
+              </PieChart>
+            </div>
          )
        );
      }}
--- a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
@@ -12,7 +12,6 @@ import {
  XAxis,
  YAxis,
  Tooltip,
-  ResponsiveContainer,
 } from 'recharts';

 import {
@@ -190,81 +189,80 @@ export function LineGraph({
    >
      {(width, height) =>
        data && (
-          <ResponsiveContainer>
-            <div>
-              {!compact && <div style={{ marginTop: '15px' }} />}
-              <LineChart
-                width={width}
-                height={height}
-                data={data.intervalData}
-                margin={{ top: 10, right: 10, left: leftMargin, bottom: 10 }}
-                style={{ cursor: pointer }}
-              >
-                {showTooltip && (
-                  <Tooltip
-                    content={
-                      <CustomTooltip
-                        compact={compact}
-                        tooltip={tooltip}
-                        format={format}
-                      />
-                    }
-                    formatter={numberFormatterTooltip}
-                    isAnimationActive={false}
-                  />
-                )}
-                {!compact && <CartesianGrid strokeDasharray="3 3" />}
-                {!compact && (
-                  <XAxis
-                    dataKey="date"
-                    tick={{ fill: theme.pageText }}
-                    tickLine={{ stroke: theme.pageText }}
-                  />
-                )}
-                {!compact && (
-                  <YAxis
-                    tickFormatter={value =>
-                      getCustomTick(
-                        format(value, 'financial-no-decimals'),
-                        privacyMode,
-                      )
-                    }
-                    tick={{ fill: theme.pageText }}
-                    tickLine={{ stroke: theme.pageText }}
-                    tickSize={0}
-                  />
-                )}
-                {data.legend.map((entry, index) => {
-                  return (
-                    <Line
-                      key={index}
-                      strokeWidth={2}
-                      type="monotone"
-                      dataKey={entry.name}
-                      stroke={entry.color}
-                      activeDot={{
-                        r: entry.name === tooltip && !compact ? 8 : 3,
-                        onMouseEnter: () => {
-                          setTooltip(entry.name);
-                          if (!['Group', 'Interval'].includes(groupBy)) {
-                            setPointer('pointer');
-                          }
-                        },
-                        onMouseLeave: () => {
-                          setPointer('');
-                          setTooltip('');
-                        },
-                        onClick: (e, payload) =>
-                          ((compact && showTooltip) || !compact) &&
-                          !['Group', 'Interval'].includes(groupBy) &&
-                          onShowActivity(e, entry.id, payload),
-                      }}
+          <div>
+            {!compact && <div style={{ marginTop: '15px' }} />}
+            <LineChart
+              responsive
+              width={width}
+              height={height}
+              data={data.intervalData}
+              margin={{ top: 10, right: 10, left: leftMargin, bottom: 10 }}
+              style={{ cursor: pointer }}
+            >
+              {showTooltip && (
+                <Tooltip
+                  content={
+                    <CustomTooltip
+                      compact={compact}
+                      tooltip={tooltip}
+                      format={format}
                    />
-                  );
-                })}
-              </LineChart>
-            </div>
-          </ResponsiveContainer>
+                  }
+                  formatter={numberFormatterTooltip}
+                  isAnimationActive={false}
+                />
+              )}
+              {!compact && <CartesianGrid strokeDasharray="3 3" />}
+              {!compact && (
+                <XAxis
+                  dataKey="date"
+                  tick={{ fill: theme.pageText }}
+                  tickLine={{ stroke: theme.pageText }}
+                />
+              )}
+              {!compact && (
+                <YAxis
+                  tickFormatter={value =>
+                    getCustomTick(
+                      format(value, 'financial-no-decimals'),
+                      privacyMode,
+                    )
+                  }
+                  tick={{ fill: theme.pageText }}
+                  tickLine={{ stroke: theme.pageText }}
+                  tickSize={0}
+                />
+              )}
+              {data.legend.map((entry, index) => {
+                return (
+                  <Line
+                    key={index}
+                    strokeWidth={2}
+                    type="monotone"
+                    dataKey={entry.name}
+                    stroke={entry.color}
+                    activeDot={{
+                      r: entry.name === tooltip && !compact ? 8 : 3,
+                      onMouseEnter: () => {
+                        setTooltip(entry.name);
+                        if (!['Group', 'Interval'].includes(groupBy)) {
+                          setPointer('pointer');
+                        }
+                      },
+                      onMouseLeave: () => {
+                        setPointer('');
+                        setTooltip('');
+                      },
+                      onClick: (e, payload) =>
+                        ((compact && showTooltip) || !compact) &&
+                        !['Group', 'Interval'].includes(groupBy) &&
+                        onShowActivity(e, entry.id, payload),
+                    }}
+                  />
+                );
+              })}
+            </LineChart>
+          </div>
        )
      }
    </Container>
--- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
@@ -14,7 +14,6 @@ import {
  XAxis,
  YAxis,
  Tooltip,
-  ResponsiveContainer,
 } from 'recharts';

 import { computePadding } from './util/computePadding';
@@ -166,79 +165,78 @@ export function NetWorthGraph({
    >
      {(width, height) =>
        graphData && (
-          <ResponsiveContainer>
-            <div style={{ ...(!compact && { marginTop: '15px' }) }}>
-              <AreaChart
-                width={width}
-                height={height}
-                data={graphData.data}
-                margin={{
-                  top: 0,
-                  right: 0,
-                  left: compact
-                    ? 0
-                    : computePadding(
-                        graphData.data.map(item => item.y),
-                        value => format(value, 'financial-no-decimals'),
-                      ),
-                  bottom: 0,
-                }}
-              >
-                {compact ? null : (
-                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                )}
-                <XAxis
-                  dataKey="x"
-                  hide={compact}
-                  tick={{ fill: theme.pageText }}
-                  tickLine={{ stroke: theme.pageText }}
-                  ticks={weeklyTicks}
+          <div style={{ ...(!compact && { marginTop: '15px' }) }}>
+            <AreaChart
+              responsive
+              width={width}
+              height={height}
+              data={graphData.data}
+              margin={{
+                top: 0,
+                right: 0,
+                left: compact
+                  ? 0
+                  : computePadding(
+                      graphData.data.map(item => item.y),
+                      value => format(value, 'financial-no-decimals'),
+                    ),
+                bottom: 0,
+              }}
+            >
+              {compact ? null : (
+                <CartesianGrid strokeDasharray="3 3" vertical={false} />
+              )}
+              <XAxis
+                dataKey="x"
+                hide={compact}
+                tick={{ fill: theme.pageText }}
+                tickLine={{ stroke: theme.pageText }}
+                ticks={weeklyTicks}
+              />
+              <YAxis
+                dataKey="y"
+                domain={['auto', 'auto']}
+                hide={compact}
+                tickFormatter={tickFormatter}
+                tick={{ fill: theme.pageText }}
+                tickLine={{ stroke: theme.pageText }}
+              />
+              {showTooltip && (
+                <Tooltip
+                  content={<CustomTooltip />}
+                  formatter={numberFormatterTooltip}
+                  isAnimationActive={false}
                />
-                <YAxis
-                  dataKey="y"
-                  domain={['auto', 'auto']}
-                  hide={compact}
-                  tickFormatter={tickFormatter}
-                  tick={{ fill: theme.pageText }}
-                  tickLine={{ stroke: theme.pageText }}
-                />
-                {showTooltip && (
-                  <Tooltip
-                    content={<CustomTooltip />}
-                    formatter={numberFormatterTooltip}
-                    isAnimationActive={false}
+              )}
+              <defs>
+                <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+                  <stop
+                    offset={off}
+                    stopColor={theme.reportsBlue}
+                    stopOpacity={0.2}
                  />
-                )}
-                <defs>
-                  <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-                    <stop
-                      offset={off}
-                      stopColor={theme.reportsBlue}
-                      stopOpacity={0.2}
-                    />
-                    <stop
-                      offset={off}
-                      stopColor={theme.reportsRed}
-                      stopOpacity={0.2}
-                    />
-                  </linearGradient>
-                </defs>
+                  <stop
+                    offset={off}
+                    stopColor={theme.reportsRed}
+                    stopOpacity={0.2}
+                  />
+                </linearGradient>
+              </defs>

-                <Area
-                  type={interpolationType}
-                  dot={false}
-                  activeDot={false}
-                  animationDuration={0}
-                  dataKey="y"
-                  stroke={theme.reportsBlue}
-                  strokeWidth={2}
-                  fill={`url(#${gradientId})`}
-                  fillOpacity={1}
-                  connectNulls={true}
-                />
-              </AreaChart>
-            </div>
-          </ResponsiveContainer>
+              <Area
+                type={interpolationType}
+                dot={false}
+                activeDot={false}
+                animationDuration={0}
+                dataKey="y"
+                stroke={theme.reportsBlue}
+                strokeWidth={2}
+                fill={`url(#${gradientId})`}
+                fillOpacity={1}
+                connectNulls={true}
+              />
+            </AreaChart>
+          </div>
        )
      }
    </Container>
--- a/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
@@ -12,7 +12,6 @@ import {
  XAxis,
  YAxis,
  Tooltip,
-  ResponsiveContainer,
 } from 'recharts';

 import { type SpendingEntity } from 'loot-core/types/models';
@@ -215,116 +214,115 @@ export function SpendingGraph({
    >
      {(width, height) =>
        data.intervalData && (
-          <ResponsiveContainer>
-            <div>
-              {!compact && <div style={{ marginTop: '5px' }} />}
-              <AreaChart
-                width={width}
-                height={height}
-                data={data.intervalData}
-                margin={{
-                  top: 0,
-                  right: 0,
-                  left: computePadding(
-                    data.intervalData
-                      .map(item => getVal(item, maxYAxis ? compare : selection))
-                      .filter(value => value !== undefined),
-                    (value: number) => format(value, 'financial-no-decimals'),
-                  ),
-                  bottom: 0,
-                }}
-              >
-                {compact ? null : (
-                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                )}
-                {compact ? null : (
-                  <XAxis
-                    dataKey={val => getDate(val)}
-                    tick={{ fill: theme.pageText }}
-                    tickLine={{ stroke: theme.pageText }}
-                  />
-                )}
-                {compact ? null : (
-                  <YAxis
-                    dataKey={val => getVal(val, maxYAxis ? compare : selection)}
-                    domain={[0, 'auto']}
-                    tickFormatter={tickFormatter}
-                    tick={{ fill: theme.pageText }}
-                    tickLine={{ stroke: theme.pageText }}
-                    tickSize={0}
-                  />
-                )}
-                <Tooltip
-                  content={
-                    <CustomTooltip
-                      balanceTypeOp={balanceTypeOp}
-                      selection={selection}
-                      compare={compare}
-                      format={format}
-                    />
-                  }
-                  formatter={numberFormatterTooltip}
-                  isAnimationActive={false}
+          <div>
+            {!compact && <div style={{ marginTop: '5px' }} />}
+            <AreaChart
+              responsive
+              width={width}
+              height={height}
+              data={data.intervalData}
+              margin={{
+                top: 0,
+                right: 0,
+                left: computePadding(
+                  data.intervalData
+                    .map(item => getVal(item, maxYAxis ? compare : selection))
+                    .filter(value => value !== undefined),
+                  (value: number) => format(value, 'financial-no-decimals'),
+                ),
+                bottom: 0,
+              }}
+            >
+              {compact ? null : (
+                <CartesianGrid strokeDasharray="3 3" vertical={false} />
+              )}
+              {compact ? null : (
+                <XAxis
+                  dataKey={val => getDate(val)}
+                  tick={{ fill: theme.pageText }}
+                  tickLine={{ stroke: theme.pageText }}
                />
-                <defs>
-                  <linearGradient
-                    id={`fill${balanceTypeOp}`}
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="1"
-                  >
-                    <stop
-                      offset={gradientOffset()}
-                      stopColor={theme.reportsGreen}
-                      stopOpacity={0.2}
-                    />
-                  </linearGradient>
-                  <linearGradient
-                    id={`stroke${balanceTypeOp}`}
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="1"
-                  >
-                    <stop
-                      offset={gradientOffset()}
-                      stopColor={theme.reportsGreen}
-                      stopOpacity={1}
-                    />
-                  </linearGradient>
-                </defs>
+              )}
+              {compact ? null : (
+                <YAxis
+                  dataKey={val => getVal(val, maxYAxis ? compare : selection)}
+                  domain={[0, 'auto']}
+                  tickFormatter={tickFormatter}
+                  tick={{ fill: theme.pageText }}
+                  tickLine={{ stroke: theme.pageText }}
+                  tickSize={0}
+                />
+              )}
+              <Tooltip
+                content={
+                  <CustomTooltip
+                    balanceTypeOp={balanceTypeOp}
+                    selection={selection}
+                    compare={compare}
+                    format={format}
+                  />
+                }
+                formatter={numberFormatterTooltip}
+                isAnimationActive={false}
+              />
+              <defs>
+                <linearGradient
+                  id={`fill${balanceTypeOp}`}
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop
+                    offset={gradientOffset()}
+                    stopColor={theme.reportsGreen}
+                    stopOpacity={0.2}
+                  />
+                </linearGradient>
+                <linearGradient
+                  id={`stroke${balanceTypeOp}`}
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop
+                    offset={gradientOffset()}
+                    stopColor={theme.reportsGreen}
+                    stopOpacity={1}
+                  />
+                </linearGradient>
+              </defs>

-                <Area
-                  type="linear"
-                  dot={false}
-                  activeDot={{
-                    fill: theme.reportsGreen,
-                    fillOpacity: 1,
-                    r: 10,
-                  }}
-                  animationDuration={0}
-                  dataKey={val => getVal(val, compare)}
-                  stroke={`url(#stroke${balanceTypeOp})`}
-                  strokeWidth={3}
-                  fill={`url(#fill${balanceTypeOp})`}
-                  fillOpacity={1}
-                />
-                <Area
-                  type="linear"
-                  dot={false}
-                  activeDot={false}
-                  animationDuration={0}
-                  dataKey={val => getVal(val, selection)}
-                  stroke={theme.reportsGray}
-                  strokeDasharray="10 10"
-                  strokeWidth={3}
-                  fill={theme.reportsGray}
-                  fillOpacity={0.2}
-                />
-              </AreaChart>
-            </div>
-          </ResponsiveContainer>
+              <Area
+                type="linear"
+                dot={false}
+                activeDot={{
+                  fill: theme.reportsGreen,
+                  fillOpacity: 1,
+                  r: 10,
+                }}
+                animationDuration={0}
+                dataKey={val => getVal(val, compare)}
+                stroke={`url(#stroke${balanceTypeOp})`}
+                strokeWidth={3}
+                fill={`url(#fill${balanceTypeOp})`}
+                fillOpacity={1}
+              />
+              <Area
+                type="linear"
+                dot={false}
+                activeDot={false}
+                animationDuration={0}
+                dataKey={val => getVal(val, selection)}
+                stroke={theme.reportsGray}
+                strokeDasharray="10 10"
+                strokeWidth={3}
+                fill={theme.reportsGray}
+                fillOpacity={0.2}
+              />
+            </AreaChart>
+          </div>
        )
      }
    </Container>
--- a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
@@ -13,7 +13,6 @@ import {
  YAxis,
  Tooltip,
  LabelList,
-  ResponsiveContainer,
 } from 'recharts';

 import {
@@ -205,100 +204,99 @@ export function StackedBarGraph({
    >
      {(width, height) =>
        data.intervalData && (
-          <ResponsiveContainer>
-            <div>
-              {!compact && <div style={{ marginTop: '15px' }} />}
-              <BarChart
-                width={width}
-                height={height}
-                data={data.intervalData}
-                margin={{ top: 0, right: 0, left: leftMargin, bottom: 10 }}
-                style={{ cursor: pointer }}
-                stackOffset="sign" //stacked by sign
-              >
-                {showTooltip && (
-                  <Tooltip
-                    content={
-                      <CustomTooltip
-                        compact={compact}
-                        tooltip={tooltip}
-                        format={format}
-                      />
-                    }
-                    formatter={numberFormatterTooltip}
-                    isAnimationActive={false}
-                    cursor={{ fill: 'transparent' }}
-                  />
-                )}
-                <XAxis
-                  dataKey="date"
+          <div>
+            {!compact && <div style={{ marginTop: '15px' }} />}
+            <BarChart
+              responsive
+              width={width}
+              height={height}
+              data={data.intervalData}
+              margin={{ top: 0, right: 0, left: leftMargin, bottom: 10 }}
+              style={{ cursor: pointer }}
+              stackOffset="sign" //stacked by sign
+            >
+              {showTooltip && (
+                <Tooltip
+                  content={
+                    <CustomTooltip
+                      compact={compact}
+                      tooltip={tooltip}
+                      format={format}
+                    />
+                  }
+                  formatter={numberFormatterTooltip}
+                  isAnimationActive={false}
+                  cursor={{ fill: 'transparent' }}
+                />
+              )}
+              <XAxis
+                dataKey="date"
+                tick={{ fill: theme.pageText }}
+                tickLine={{ stroke: theme.pageText }}
+              />
+              {!compact && <CartesianGrid strokeDasharray="3 3" />}
+              {!compact && (
+                <YAxis
+                  tickFormatter={value =>
+                    getCustomTick(
+                      format(value, 'financial-no-decimals'),
+                      privacyMode,
+                    )
+                  }
                  tick={{ fill: theme.pageText }}
                  tickLine={{ stroke: theme.pageText }}
+                  tickSize={0}
                />
-                {!compact && <CartesianGrid strokeDasharray="3 3" />}
-                {!compact && (
-                  <YAxis
-                    tickFormatter={value =>
-                      getCustomTick(
-                        format(value, 'financial-no-decimals'),
-                        privacyMode,
-                      )
-                    }
-                    tick={{ fill: theme.pageText }}
-                    tickLine={{ stroke: theme.pageText }}
-                    tickSize={0}
-                  />
-                )}
-                {data.legend
-                  .slice(0)
-                  .reverse()
-                  .map(entry => (
-                    <Bar
-                      key={entry.name}
-                      dataKey={entry.name}
-                      stackId="a"
-                      fill={entry.color}
-                      onMouseLeave={() => {
-                        setPointer('');
-                        setTooltip('');
-                      }}
-                      onMouseEnter={() => {
-                        setTooltip(entry.name);
-                        if (!['Group', 'Interval'].includes(groupBy)) {
-                          setPointer('pointer');
-                        }
-                      }}
-                      onClick={e =>
-                        ((compact && showTooltip) || !compact) &&
-                        !['Group', 'Interval'].includes(groupBy) &&
-                        showActivity({
-                          navigate,
-                          categories,
-                          accounts,
-                          balanceTypeOp,
-                          filters,
-                          showHiddenCategories,
-                          showOffBudget,
-                          type: 'time',
-                          startDate: e.payload?.intervalStartDate,
-                          endDate: e.payload?.intervalEndDate,
-                          field: groupBy.toLowerCase(),
-                          id: entry.id,
-                          interval,
-                        })
+              )}
+              {data.legend
+                .slice(0)
+                .reverse()
+                .map(entry => (
+                  <Bar
+                    key={entry.name}
+                    dataKey={entry.name}
+                    stackId="a"
+                    fill={entry.color}
+                    onMouseLeave={() => {
+                      setPointer('');
+                      setTooltip('');
+                    }}
+                    onMouseEnter={() => {
+                      setTooltip(entry.name);
+                      if (!['Group', 'Interval'].includes(groupBy)) {
+                        setPointer('pointer');
                      }
-                    >
-                      {viewLabels && !compact && (
-                        <LabelList
-                          dataKey={entry.name}
-                          content={customLabelWithFormat}
-                        />
-                      )}
-                    </Bar>
-                  ))}
-              </BarChart>
-            </div>
-          </ResponsiveContainer>
+                    }}
+                    onClick={e =>
+                      ((compact && showTooltip) || !compact) &&
+                      !['Group', 'Interval'].includes(groupBy) &&
+                      showActivity({
+                        navigate,
+                        categories,
+                        accounts,
+                        balanceTypeOp,
+                        filters,
+                        showHiddenCategories,
+                        showOffBudget,
+                        type: 'time',
+                        startDate: e.payload?.intervalStartDate,
+                        endDate: e.payload?.intervalEndDate,
+                        field: groupBy.toLowerCase(),
+                        id: entry.id,
+                        interval,
+                      })
+                    }
+                  >
+                    {viewLabels && !compact && (
+                      <LabelList
+                        dataKey={entry.name}
+                        content={customLabelWithFormat}
+                      />
+                    )}
+                  </Bar>
+                ))}
+            </BarChart>
+          </div>
        )
      }
    </Container>
--- a/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx
+++ b/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx
@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';

 import { theme } from '@actual-app/components/theme';
 import { View } from '@actual-app/components/view';
-import { Bar, BarChart, LabelList, ResponsiveContainer } from 'recharts';
+import { Bar, BarChart, LabelList } from 'recharts';

 import { send } from 'loot-core/platform/client/fetch';
 import * as monthUtils from 'loot-core/shared/months';
@@ -205,46 +205,45 @@ export function CashFlowCard({
        {data ? (
          <Container style={{ height: 'auto', flex: 1 }}>
            {(width, height) => (
-              <ResponsiveContainer>
-                <BarChart
-                  width={width}
-                  height={height}
-                  data={[
-                    {
-                      income,
-                      expenses,
-                    },
-                  ]}
-                  margin={{
-                    top: 10,
-                    bottom: 0,
-                  }}
+              <BarChart
+                responsive
+                width={width}
+                height={height}
+                data={[
+                  {
+                    income,
+                    expenses,
+                  },
+                ]}
+                margin={{
+                  top: 10,
+                  bottom: 0,
+                }}
+              >
+                <Bar
+                  dataKey="income"
+                  fill={chartTheme.colors.blue}
+                  barSize={14}
                >
-                  <Bar
+                  <LabelList
                    dataKey="income"
-                    fill={chartTheme.colors.blue}
-                    barSize={14}
-                  >
-                    <LabelList
-                      dataKey="income"
-                      position="left"
-                      content={<CustomLabel name={t('Income')} />}
-                    />
-                  </Bar>
+                    position="left"
+                    content={<CustomLabel name={t('Income')} />}
+                  />
+                </Bar>

-                  <Bar
+                <Bar
+                  dataKey="expenses"
+                  fill={chartTheme.colors.red}
+                  barSize={14}
+                >
+                  <LabelList
                    dataKey="expenses"
-                    fill={chartTheme.colors.red}
-                    barSize={14}
-                  >
-                    <LabelList
-                      dataKey="expenses"
-                      position="right"
-                      content={<CustomLabel name={t('Expenses')} />}
-                    />
-                  </Bar>
-                </BarChart>
-              </ResponsiveContainer>
+                    position="right"
+                    content={<CustomLabel name={t('Expenses')} />}
+                  />
+                </Bar>
+              </BarChart>
            )}
          </Container>
        ) : (
--- a/packages/desktop-electron/package.json
+++ b/packages/desktop-electron/package.json
@@ -109,7 +109,7 @@
  "devDependencies": {
    "@electron/notarize": "3.1.0",
    "@electron/rebuild": "4.0.1",
-    "@playwright/test": "1.56.0",
+    "@playwright/test": "1.56.1",
    "@types/copyfiles": "^2",
    "@types/fs-extra": "^11",
    "copyfiles": "^2.4.1",
--- a/packages/eslint-plugin-actual/package.json
+++ b/packages/eslint-plugin-actual/package.json
@@ -14,7 +14,7 @@
    "eslint": "^9.37.0",
    "eslint-plugin-eslint-plugin": "^7.0.0",
    "eslint-plugin-node": "^11.1.0",
-    "eslint-vitest-rule-tester": "^2.2.2",
+    "eslint-vitest-rule-tester": "^2.3.0",
    "vitest": "^3.2.4"
  },
  "peerDependencies": {
--- a/packages/loot-core/package.json
+++ b/packages/loot-core/package.json
@@ -18,7 +18,7 @@
  "license": "ISC",
  "dependencies": {
    "@jlongster/sql.js": "^1.6.7",
-    "@reduxjs/toolkit": "^2.9.0",
+    "@reduxjs/toolkit": "^2.9.1",
    "@rschedule/core": "^1.5.0",
    "@rschedule/json-tools": "^1.5.0",
    "@rschedule/standard-date-adapter": "^1.5.0",
@@ -35,7 +35,7 @@
    "memoize-one": "^6.0.0",
    "mitt": "^3.0.1",
    "slash": "5.1.0",
-    "ua-parser-js": "^2.0.5",
+    "ua-parser-js": "^2.0.6",
    "uuid": "^13.0.0"
  },
  "devDependencies": {
@@ -45,7 +45,7 @@
    "@swc/core": "^1.13.5",
    "@types/adm-zip": "^0.5.7",
    "@types/better-sqlite3": "^7.6.13",
-    "@types/emscripten": "^1.41.2",
+    "@types/emscripten": "^1.41.4",
    "@types/jlongster__sql.js": "npm:@types/sql.js@latest",
    "@types/node": "^22.18.11",
    "@types/pegjs": "^0.10.6",
@@ -53,16 +53,16 @@
    "browserify-zlib": "^0.2.0",
    "buffer": "^6.0.3",
    "cross-env": "^10.1.0",
-    "fake-indexeddb": "^6.2.2",
+    "fake-indexeddb": "^6.2.4",
    "fast-check": "4.3.0",
-    "i18next": "^25.5.3",
+    "i18next": "^25.6.0",
    "jest-diff": "^30.2.0",
    "jsverify": "^0.8.4",
    "mockdate": "^3.0.5",
    "npm-run-all": "^4.1.5",
    "path-browserify": "^1.0.1",
    "peggy": "5.0.6",
-    "rollup-plugin-visualizer": "^6.0.4",
+    "rollup-plugin-visualizer": "^6.0.5",
    "stream-browserify": "^3.0.0",
    "ts-node": "^10.9.2",
    "typescript": "^5.9.3",
--- a/upcoming-release-notes/5983.md
+++ b/upcoming-release-notes/5983.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [matt-fidd]
+---
+
+Bump various dependencies
--- a/yarn.lock
+++ b/yarn.lock
@@ -137,8 +137,8 @@ __metadata:
    "@emotion/css": "npm:^11.13.5"
    "@fontsource/redacted-script": "npm:^5.2.8"
    "@juggle/resize-observer": "npm:^3.4.0"
-    "@lezer/highlight": "npm:^1.2.1"
-    "@playwright/test": "npm:1.56.0"
+    "@lezer/highlight": "npm:^1.2.2"
+    "@playwright/test": "npm:1.56.1"
    "@rollup/plugin-inject": "npm:^5.0.5"
    "@swc/core": "npm:^1.13.5"
    "@swc/helpers": "npm:^0.5.17"
@@ -149,7 +149,7 @@ __metadata:
    "@types/lodash": "npm:^4"
    "@types/promise-retry": "npm:^1.1.6"
    "@types/react": "npm:^19.2.2"
-    "@types/react-dom": "npm:^19.2.1"
+    "@types/react-dom": "npm:^19.2.2"
    "@types/react-grid-layout": "npm:^1"
    "@types/react-modal": "npm:^3.16.3"
    "@uiw/react-codemirror": "npm:^4.25.2"
@@ -163,7 +163,7 @@ __metadata:
    date-fns: "npm:^4.1.0"
    downshift: "npm:9.0.10"
    hyperformula: "npm:^3.1.0"
-    i18next: "npm:^25.5.3"
+    i18next: "npm:^25.6.0"
    i18next-parser: "npm:^9.3.0"
    i18next-resources-to-backend: "npm:^1.2.1"
    inter-ui: "npm:^3.19.3"
@@ -184,7 +184,7 @@ __metadata:
    react-dom: "npm:19.2.0"
    react-error-boundary: "npm:^6.0.0"
    react-grid-layout: "npm:^1.5.2"
-    react-hotkeys-hook: "npm:^5.1.0"
+    react-hotkeys-hook: "npm:^5.2.1"
    react-i18next: "npm:^16.0.0"
    react-markdown: "npm:^10.1.0"
    react-modal: "npm:3.16.3"
@@ -194,15 +194,15 @@ __metadata:
    react-spring: "npm:10.0.0"
    react-swipeable: "npm:^7.0.2"
    react-virtualized-auto-sizer: "npm:^1.0.26"
-    recharts: "npm:^3.2.1"
+    recharts: "npm:^3.3.0"
    rehype-external-links: "npm:^3.0.0"
    remark-gfm: "npm:^4.0.1"
-    rollup-plugin-visualizer: "npm:^6.0.4"
+    rollup-plugin-visualizer: "npm:^6.0.5"
    sass: "npm:^1.93.2"
    usehooks-ts: "npm:^3.1.1"
    uuid: "npm:^13.0.0"
    vite: "npm:^7.1.11"
-    vite-plugin-pwa: "npm:^1.0.3"
+    vite-plugin-pwa: "npm:^1.1.0"
    vite-tsconfig-paths: "npm:^5.1.4"
    vitest: "npm:^3.2.4"
    xml2js: "npm:^0.6.2"
@@ -2539,7 +2539,14 @@ __metadata:
  languageName: node
  linkType: hard

-"@lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.1.3, @lezer/highlight@npm:^1.2.1":
+"@lezer/common@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@lezer/common@npm:1.3.0"
+  checksum: 10/8e195a8e426bc18d4339b3f2a1a7ad39c3b2cfa740c7108657a241985f63bdee5255a5f5cf8d863b878881744288bcb679d16170f0e5bcebb141188b53cfd8c0
+  languageName: node
+  linkType: hard
+
+"@lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.1.3":
  version: 1.2.1
  resolution: "@lezer/highlight@npm:1.2.1"
  dependencies:
@@ -2548,6 +2555,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@lezer/highlight@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "@lezer/highlight@npm:1.2.2"
+  dependencies:
+    "@lezer/common": "npm:^1.3.0"
+  checksum: 10/73cb339de042b354cbc0b9e83978a91d2448435edae865a192cfc50d536e0b7d2e3cd563aabeb59eb6c86b0c38b3edc6f2871da8482c5dd8dca4a0899e743f7f
+  languageName: node
+  linkType: hard
+
 "@lezer/javascript@npm:^1.0.0":
  version: 1.5.4
  resolution: "@lezer/javascript@npm:1.5.4"
@@ -2976,14 +2992,14 @@ __metadata:
  languageName: node
  linkType: hard

-"@playwright/test@npm:1.56.0":
-  version: 1.56.0
-  resolution: "@playwright/test@npm:1.56.0"
+"@playwright/test@npm:1.56.1":
+  version: 1.56.1
+  resolution: "@playwright/test@npm:1.56.1"
  dependencies:
-    playwright: "npm:1.56.0"
+    playwright: "npm:1.56.1"
  bin:
    playwright: cli.js
-  checksum: 10/9ccfe7962f0e7b14b2a60d2db89fc6a21165957512b87fe8b1cf496683680468aecbbd0e41238c6d02c880ab10c5263bea2483b8d0f964e830d652504c31ece8
+  checksum: 10/9933fa9f8eb9e775e792421b99c984c310b92092e65de57508ae1951a2589d87bbb5f1c4114bfdf7f69c15c0a3acb3f31259e143fa597aa28e97f4b223e37637
  languageName: node
  linkType: hard

@@ -5107,7 +5123,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@reduxjs/toolkit@npm:1.x.x || 2.x.x, @reduxjs/toolkit@npm:^2.9.0":
+"@reduxjs/toolkit@npm:1.x.x || 2.x.x":
  version: 2.9.0
  resolution: "@reduxjs/toolkit@npm:2.9.0"
  dependencies:
@@ -5129,6 +5145,28 @@ __metadata:
  languageName: node
  linkType: hard

+"@reduxjs/toolkit@npm:^2.9.1":
+  version: 2.9.1
+  resolution: "@reduxjs/toolkit@npm:2.9.1"
+  dependencies:
+    "@standard-schema/spec": "npm:^1.0.0"
+    "@standard-schema/utils": "npm:^0.3.0"
+    immer: "npm:^10.0.3"
+    redux: "npm:^5.0.1"
+    redux-thunk: "npm:^3.1.0"
+    reselect: "npm:^5.1.0"
+  peerDependencies:
+    react: ^16.9.0 || ^17.0.0 || ^18 || ^19
+    react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-redux:
+      optional: true
+  checksum: 10/d545e62b9a8a34ebc5ea6eae4cbe59ea622d9fe65a736cc5d92854aa2db24f7f04a19f53e1067b6d7cddd1e7ddca29bc3d88a526782682126383fd2b930c13aa
+  languageName: node
+  linkType: hard
+
 "@rolldown/pluginutils@npm:1.0.0-beta.38":
  version: 1.0.0-beta.38
  resolution: "@rolldown/pluginutils@npm:1.0.0-beta.38"
@@ -6130,20 +6168,17 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/emscripten@npm:*, @types/emscripten@npm:^1.41.2":
+"@types/emscripten@npm:*":
  version: 1.41.2
  resolution: "@types/emscripten@npm:1.41.2"
  checksum: 10/95bc5acddaab2155a1fbe0c816717a2552b8d4df484d4bb8b6962b9f2e65c7a8d81872d6e80d706384608e9ea0cde07f852b3069e12921c2b445c6fb48bd985b
  languageName: node
  linkType: hard

-"@types/eslint@npm:^9.6.1":
-  version: 9.6.1
-  resolution: "@types/eslint@npm:9.6.1"
-  dependencies:
-    "@types/estree": "npm:*"
-    "@types/json-schema": "npm:*"
-  checksum: 10/719fcd255760168a43d0e306ef87548e1e15bffe361d5f4022b0f266575637acc0ecb85604ac97879ee8ae83c6a6d0613b0ed31d0209ddf22a0fe6d608fc56fe
+"@types/emscripten@npm:^1.41.4":
+  version: 1.41.4
+  resolution: "@types/emscripten@npm:1.41.4"
+  checksum: 10/35b7cbd09795065ebd44aff1be52ebeb5617a39898f05d33dc9a29b6ff3638839ed8df13751a815cb38396c4a5cea70d3188e8032e91904ea78ce415c9000b1d
  languageName: node
  linkType: hard

@@ -6277,7 +6312,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.15":
+"@types/json-schema@npm:^7.0.15":
  version: 7.0.15
  resolution: "@types/json-schema@npm:7.0.15"
  checksum: 10/1a3c3e06236e4c4aab89499c428d585527ce50c24fe8259e8b3926d3df4cfbbbcf306cfc73ddfb66cbafc973116efd15967020b0f738f63e09e64c7d260519e7
@@ -6437,12 +6472,12 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/react-dom@npm:^19.2.1":
-  version: 19.2.1
-  resolution: "@types/react-dom@npm:19.2.1"
+"@types/react-dom@npm:^19.2.2":
+  version: 19.2.2
+  resolution: "@types/react-dom@npm:19.2.2"
  peerDependencies:
    "@types/react": ^19.2.0
-  checksum: 10/273730069d34e8ba6e5261b968cc24c148cac98a017241aa8e87186a5d446c3afd4d98ceffa6be8ea2c2e96e9d2fb6450fbae5094ee2221d2a0b40f4b58cfb53
+  checksum: 10/73d5671e57ab73cb3f2acd7992faee8f90d5b4d155b972e76e91fa13e5871ebb5e224960b05039d57ea502cb3370746eb98beda5fa44e9712b4aee52653c237a
  languageName: node
  linkType: hard

@@ -6656,6 +6691,19 @@ __metadata:
  languageName: node
  linkType: hard

+"@typescript-eslint/project-service@npm:8.46.2":
+  version: 8.46.2
+  resolution: "@typescript-eslint/project-service@npm:8.46.2"
+  dependencies:
+    "@typescript-eslint/tsconfig-utils": "npm:^8.46.2"
+    "@typescript-eslint/types": "npm:^8.46.2"
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10/76ba446f86e83b4afd6dacbebc9a0737b5a3e0500a0712b37fea4f0141dcf4c9238e8e5a9a649cf609a4624cc575431506a2a56432aaa18d4c3a8cf2df9d1480
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/scope-manager@npm:8.46.0":
  version: 8.46.0
  resolution: "@typescript-eslint/scope-manager@npm:8.46.0"
@@ -6666,6 +6714,16 @@ __metadata:
  languageName: node
  linkType: hard

+"@typescript-eslint/scope-manager@npm:8.46.2":
+  version: 8.46.2
+  resolution: "@typescript-eslint/scope-manager@npm:8.46.2"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.46.2"
+    "@typescript-eslint/visitor-keys": "npm:8.46.2"
+  checksum: 10/6a8a9b644ff57ca9e992348553f19f6e010d76ff4872d972d333a16952e93cce4bf5096a1fefe1af8b452bce963fde6c78410d15817e673b75176ec3241949e9
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/tsconfig-utils@npm:8.46.0, @typescript-eslint/tsconfig-utils@npm:^8.46.0":
  version: 8.46.0
  resolution: "@typescript-eslint/tsconfig-utils@npm:8.46.0"
@@ -6675,6 +6733,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@typescript-eslint/tsconfig-utils@npm:8.46.2, @typescript-eslint/tsconfig-utils@npm:^8.46.2":
+  version: 8.46.2
+  resolution: "@typescript-eslint/tsconfig-utils@npm:8.46.2"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10/e459d131ca646cca6ad164593ca7e8c45ad3daa103a24e1e57fd47b5c1e5b5418948b749f02baa42e61103a496fc80d32ddd1841c11495bbcf37808b88bb0ef4
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/type-utils@npm:8.46.0":
  version: 8.46.0
  resolution: "@typescript-eslint/type-utils@npm:8.46.0"
@@ -6698,6 +6765,13 @@ __metadata:
  languageName: node
  linkType: hard

+"@typescript-eslint/types@npm:8.46.2, @typescript-eslint/types@npm:^8.46.2":
+  version: 8.46.2
+  resolution: "@typescript-eslint/types@npm:8.46.2"
+  checksum: 10/c641453c868b730ef64bd731cc47b19e1a5e45c090dfe9542ecd15b24c5a7b6dc94a8ef4e548b976aabcd1ca9dec1b766e417454b98ea59079795eb008226b38
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/typescript-estree@npm:8.46.0":
  version: 8.46.0
  resolution: "@typescript-eslint/typescript-estree@npm:8.46.0"
@@ -6718,7 +6792,27 @@ __metadata:
  languageName: node
  linkType: hard

-"@typescript-eslint/utils@npm:8.46.0, @typescript-eslint/utils@npm:^8.44.1":
+"@typescript-eslint/typescript-estree@npm:8.46.2":
+  version: 8.46.2
+  resolution: "@typescript-eslint/typescript-estree@npm:8.46.2"
+  dependencies:
+    "@typescript-eslint/project-service": "npm:8.46.2"
+    "@typescript-eslint/tsconfig-utils": "npm:8.46.2"
+    "@typescript-eslint/types": "npm:8.46.2"
+    "@typescript-eslint/visitor-keys": "npm:8.46.2"
+    debug: "npm:^4.3.4"
+    fast-glob: "npm:^3.3.2"
+    is-glob: "npm:^4.0.3"
+    minimatch: "npm:^9.0.4"
+    semver: "npm:^7.6.0"
+    ts-api-utils: "npm:^2.1.0"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10/4d2149ad97e7f7e2e4cf466932f52f38e90414d47341c5938e497fd0826d403db9896bbd5cc08e7488ad0d0ffb3817e6f18e9f0c623d8a8cda09af204f81aab8
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/utils@npm:8.46.0":
  version: 8.46.0
  resolution: "@typescript-eslint/utils@npm:8.46.0"
  dependencies:
@@ -6733,6 +6827,21 @@ __metadata:
  languageName: node
  linkType: hard

+"@typescript-eslint/utils@npm:^8.46.1":
+  version: 8.46.2
+  resolution: "@typescript-eslint/utils@npm:8.46.2"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.7.0"
+    "@typescript-eslint/scope-manager": "npm:8.46.2"
+    "@typescript-eslint/types": "npm:8.46.2"
+    "@typescript-eslint/typescript-estree": "npm:8.46.2"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10/91f6216f858161c3f59b2e035e0abce68fcdc9fbe45cb693a111c11ce5352c42fe0b1145a91e538c5459ff81b5e3741a4b38189b97e0e1a756567b6467c7b6c9
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/visitor-keys@npm:8.46.0":
  version: 8.46.0
  resolution: "@typescript-eslint/visitor-keys@npm:8.46.0"
@@ -6743,6 +6852,16 @@ __metadata:
  languageName: node
  linkType: hard

+"@typescript-eslint/visitor-keys@npm:8.46.2":
+  version: 8.46.2
+  resolution: "@typescript-eslint/visitor-keys@npm:8.46.2"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.46.2"
+    eslint-visitor-keys: "npm:^4.2.1"
+  checksum: 10/4352629a33bc1619dc78d55eaec382be4c7e1059af02660f62bfdb22933021deaf98504d4030b8db74ec122e6d554e9015341f87aed729fb70fae613f12f55a4
+  languageName: node
+  linkType: hard
+
 "@uiw/codemirror-extensions-basic-setup@npm:4.25.2":
  version: 4.25.2
  resolution: "@uiw/codemirror-extensions-basic-setup@npm:4.25.2"
@@ -9646,7 +9765,7 @@ __metadata:
    "@actual-app/sync-server": "workspace:*"
    "@electron/notarize": "npm:3.1.0"
    "@electron/rebuild": "npm:4.0.1"
-    "@playwright/test": "npm:1.56.0"
+    "@playwright/test": "npm:1.56.1"
    "@types/copyfiles": "npm:^2"
    "@types/fs-extra": "npm:^11"
    better-sqlite3: "npm:^12.4.1"
@@ -10542,7 +10661,7 @@ __metadata:
    eslint: "npm:^9.37.0"
    eslint-plugin-eslint-plugin: "npm:^7.0.0"
    eslint-plugin-node: "npm:^11.1.0"
-    eslint-vitest-rule-tester: "npm:^2.2.2"
+    eslint-vitest-rule-tester: "npm:^2.3.0"
    requireindex: "npm:^1.2.0"
    vitest: "npm:^3.2.4"
  peerDependencies:
@@ -10738,16 +10857,15 @@ __metadata:
  languageName: node
  linkType: hard

-"eslint-vitest-rule-tester@npm:^2.2.2":
-  version: 2.2.2
-  resolution: "eslint-vitest-rule-tester@npm:2.2.2"
+"eslint-vitest-rule-tester@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "eslint-vitest-rule-tester@npm:2.3.0"
  dependencies:
-    "@types/eslint": "npm:^9.6.1"
-    "@typescript-eslint/utils": "npm:^8.44.1"
+    "@typescript-eslint/utils": "npm:^8.46.1"
  peerDependencies:
    eslint: ^9.0.0
    vitest: ^1.0.0 || ^2.0.0 || ^3.0.0
-  checksum: 10/3d99d5fd180b13b4f9ba67d82795158cfea24e0da6e5a57abdaba20f2d3dc5862a039fb21997a3b90b329d2f515b3335b6e86dcc4ee1911b7a40279f810dc118
+  checksum: 10/d771e035f84975d922484b9c1c364939f9d5aac74330ef1a6b5689ba63f1b9eab08d59798fcf882c3c28d4e3e47bbec014503078b6afc7869b1f93af945e810e
  languageName: node
  linkType: hard

@@ -11056,10 +11174,10 @@ __metadata:
  languageName: node
  linkType: hard

-"fake-indexeddb@npm:^6.2.2":
-  version: 6.2.2
-  resolution: "fake-indexeddb@npm:6.2.2"
-  checksum: 10/b2dd94419ebc836bf8b68badf653fbba878a73ea775f4c0fbcc55ee1a5d67fbf4be469388fd8044c80e11e8c5be37bc697131ec2747191e3d4569e009e0bb403
+"fake-indexeddb@npm:^6.2.4":
+  version: 6.2.4
+  resolution: "fake-indexeddb@npm:6.2.4"
+  checksum: 10/5160c3f4209c0c785aa30e4efdd6d49496dadd9bffbc2bc7d65f68aa94fbcdd0611c7bc0fcf82a64e514d38e8708b336ccf358dc784672787630653a7417c8a7
  languageName: node
  linkType: hard

@@ -12357,9 +12475,9 @@ __metadata:
  languageName: node
  linkType: hard

-"i18next@npm:^25.5.3":
-  version: 25.5.3
-  resolution: "i18next@npm:25.5.3"
+"i18next@npm:^25.6.0":
+  version: 25.6.0
+  resolution: "i18next@npm:25.6.0"
  dependencies:
    "@babel/runtime": "npm:^7.27.6"
  peerDependencies:
@@ -12367,7 +12485,7 @@ __metadata:
  peerDependenciesMeta:
    typescript:
      optional: true
-  checksum: 10/eb7312b3261af4477b7e4d09ec1636372a79a8f81bb5ac9531bbb9aa498ca07f337f9ec2c89507f0d895ce6c0b1352a2ea4fbe47f665ab4feba3df2de79cbeab
+  checksum: 10/3eaa354f7028ff6051e4294c09bf518183c6653c019cfeed73fc4504786b3a474c3b55ed6b9832e122ba2538167b3eb85ae71fdd6423fb9ec9ebe2156b061d66
  languageName: node
  linkType: hard

@@ -13801,14 +13919,14 @@ __metadata:
    "@actual-app/crdt": "workspace:^"
    "@actual-app/web": "workspace:^"
    "@jlongster/sql.js": "npm:^1.6.7"
-    "@reduxjs/toolkit": "npm:^2.9.0"
+    "@reduxjs/toolkit": "npm:^2.9.1"
    "@rschedule/core": "npm:^1.5.0"
    "@rschedule/json-tools": "npm:^1.5.0"
    "@rschedule/standard-date-adapter": "npm:^1.5.0"
    "@swc/core": "npm:^1.13.5"
    "@types/adm-zip": "npm:^0.5.7"
    "@types/better-sqlite3": "npm:^7.6.13"
-    "@types/emscripten": "npm:^1.41.2"
+    "@types/emscripten": "npm:^1.41.4"
    "@types/jlongster__sql.js": "npm:@types/sql.js@latest"
    "@types/node": "npm:^22.18.11"
    "@types/pegjs": "npm:^0.10.6"
@@ -13823,10 +13941,10 @@ __metadata:
    csv-stringify: "npm:^6.6.0"
    date-fns: "npm:^4.1.0"
    deep-equal: "npm:^2.2.3"
-    fake-indexeddb: "npm:^6.2.2"
+    fake-indexeddb: "npm:^6.2.4"
    fast-check: "npm:4.3.0"
    handlebars: "npm:^4.7.8"
-    i18next: "npm:^25.5.3"
+    i18next: "npm:^25.6.0"
    jest-diff: "npm:^30.2.0"
    jsverify: "npm:^0.8.4"
    lru-cache: "npm:^11.2.2"
@@ -13837,12 +13955,12 @@ __metadata:
    npm-run-all: "npm:^4.1.5"
    path-browserify: "npm:^1.0.1"
    peggy: "npm:5.0.6"
-    rollup-plugin-visualizer: "npm:^6.0.4"
+    rollup-plugin-visualizer: "npm:^6.0.5"
    slash: "npm:5.1.0"
    stream-browserify: "npm:^3.0.0"
    ts-node: "npm:^10.9.2"
    typescript: "npm:^5.9.3"
-    ua-parser-js: "npm:^2.0.5"
+    ua-parser-js: "npm:^2.0.6"
    uuid: "npm:^13.0.0"
    vite: "npm:^7.1.11"
    vite-plugin-node-polyfills: "npm:^0.24.0"
@@ -16007,27 +16125,27 @@ __metadata:
  languageName: node
  linkType: hard

-"playwright-core@npm:1.56.0":
-  version: 1.56.0
-  resolution: "playwright-core@npm:1.56.0"
+"playwright-core@npm:1.56.1":
+  version: 1.56.1
+  resolution: "playwright-core@npm:1.56.1"
  bin:
    playwright-core: cli.js
-  checksum: 10/4859f49952f3cf1fc1cab01e4edd1df971eca0f4d49fb4287c65a234c47ec6fa51bfebd3946adca5af70a47faa8e97c7ef568c67100d7bec7c4a23639299b7f8
+  checksum: 10/df785eb3b3a8392b10dcde5f768e09b7fe459a7b06ed81180da69e048f2154b761f86d79572c2b62037a1f18a44e4ace72f5b6547f4f473b4ab13ab1d94007d2
  languageName: node
  linkType: hard

-"playwright@npm:1.56.0":
-  version: 1.56.0
-  resolution: "playwright@npm:1.56.0"
+"playwright@npm:1.56.1":
+  version: 1.56.1
+  resolution: "playwright@npm:1.56.1"
  dependencies:
    fsevents: "npm:2.3.2"
-    playwright-core: "npm:1.56.0"
+    playwright-core: "npm:1.56.1"
  dependenciesMeta:
    fsevents:
      optional: true
  bin:
    playwright: cli.js
-  checksum: 10/1b6bc464f281007e912a726bbf13b88c90afaef8ccf07690b2148a9a3ab832eac21259b93c47a8538838f74c1f2fd8bc591c49f0e081746de7282adff86786d4
+  checksum: 10/f1743f93b26f1d497257771428d93f3c9ed2d75b00d935f0cd1556ff2dc61d47f2df8b381d752fbd2c47082b685f0ffe4cc4b7ba440d7b4ba3a08572aec58fba
  languageName: node
  linkType: hard

@@ -16637,13 +16755,13 @@ __metadata:
  languageName: node
  linkType: hard

-"react-hotkeys-hook@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "react-hotkeys-hook@npm:5.1.0"
+"react-hotkeys-hook@npm:^5.2.1":
+  version: 5.2.1
+  resolution: "react-hotkeys-hook@npm:5.2.1"
  peerDependencies:
    react: ">=16.8.0"
    react-dom: ">=16.8.0"
-  checksum: 10/e912c0178fbfb04b841007aa3fc50cb326082346f860d3b92a22ff71516dfd487c6f60c0474d9609b982ad15e6b4741c35ca2b38adfeb133789d43ff6b0029c6
+  checksum: 10/4581b6bc2496954b5bd3c41924aba28f0d2e4a996476f38cce80e777b6a63f51e024992a11c2d7d4b4abe4815e0bba04fa692a0ed28aeb5f58df7852a77aab70
  languageName: node
  linkType: hard

@@ -17010,9 +17128,9 @@ __metadata:
  languageName: node
  linkType: hard

-"recharts@npm:^3.2.1":
-  version: 3.2.1
-  resolution: "recharts@npm:3.2.1"
+"recharts@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "recharts@npm:3.3.0"
  dependencies:
    "@reduxjs/toolkit": "npm:1.x.x || 2.x.x"
    clsx: "npm:^2.1.1"
@@ -17029,7 +17147,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/9342f6ab07e57d9c079bf492afb533a0cdb1b41a50e2d0586a7daaaf10e76e24cd91cefa9e0906b487dd77ed234b729e4c3cd6fe6ccb6424a93769a1e675bb94
+  checksum: 10/9842fb31627343e461b468f4bbb80c1ca47c478f0cdf72e8ccad6f547bdfdc561580bf5b7530799a8676c08d33a88eb1ee5852c2e9beae461e7aa65c593ae7d6
  languageName: node
  linkType: hard

@@ -17467,9 +17585,9 @@ __metadata:
  languageName: node
  linkType: hard

-"rollup-plugin-visualizer@npm:^6.0.4":
-  version: 6.0.4
-  resolution: "rollup-plugin-visualizer@npm:6.0.4"
+"rollup-plugin-visualizer@npm:^6.0.5":
+  version: 6.0.5
+  resolution: "rollup-plugin-visualizer@npm:6.0.5"
  dependencies:
    open: "npm:^8.0.0"
    picomatch: "npm:^4.0.2"
@@ -17485,7 +17603,7 @@ __metadata:
      optional: true
  bin:
    rollup-plugin-visualizer: dist/bin/cli.js
-  checksum: 10/a9988d530df9bbf8a57f1b61a7d5a756ba8b25e2887b3b1d65113641d395b005e6a3923afb953b45b38727cb8aaa02478193ca6906138ca4a2488db2d50531cf
+  checksum: 10/e2bcad7ee239f1a911339bc50ae24f92fb5ec86405e2f62c1a29eb1b4e1b1d450edb303ba2e65d6edcdb84271c1948f50befe75cd5785feec31e186859bfacde
  languageName: node
  linkType: hard

@@ -19427,17 +19545,16 @@ __metadata:
  languageName: node
  linkType: hard

-"ua-parser-js@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "ua-parser-js@npm:2.0.5"
+"ua-parser-js@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "ua-parser-js@npm:2.0.6"
  dependencies:
    detect-europe-js: "npm:^0.1.2"
    is-standalone-pwa: "npm:^0.1.1"
    ua-is-frozen: "npm:^0.1.2"
-    undici: "npm:^7.12.0"
  bin:
    ua-parser-js: script/cli.js
-  checksum: 10/e946cb1c85bfcd0f2d30c7d5e1b605e340bb458432e7e87fc4aa1b2f90117e4220521d4e0bc7dd8c2a5cadd0935dedb5ac434b70efdc0007221288c1d98b3cd5
+  checksum: 10/b0049d3b272979049c7df6af2ec2ce032e4351316b10c33699f6e3f0bec701336f67530cc3ccb363c554b1bb5047b75d2f46575699afacd6e541762ca3861f4d
  languageName: node
  linkType: hard

@@ -20064,9 +20181,9 @@ __metadata:
  languageName: node
  linkType: hard

-"vite-plugin-pwa@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "vite-plugin-pwa@npm:1.0.3"
+"vite-plugin-pwa@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "vite-plugin-pwa@npm:1.1.0"
  dependencies:
    debug: "npm:^4.3.6"
    pretty-bytes: "npm:^6.1.1"
@@ -20081,7 +20198,7 @@ __metadata:
  peerDependenciesMeta:
    "@vite-pwa/assets-generator":
      optional: true
-  checksum: 10/92b02050332b6748a00f0df7c2324a8463848ab76286fc28769eba639ae40ae770d622dfecf8efb1fe9ea5b1b15574d82be2857f8f0208ba68a095f3cf276813
+  checksum: 10/062c356a40d968e49637854b2b9cfa4ef8b7e58b6e6d4bee58e116b536548e886e71ee9bbdd253d1d9321b19e11ec2ea48c6462569916f3941b38bbcc368e199
  languageName: node
  linkType: hard
Author	SHA1	Message	Date
Matt Fiddaman	380f83f3ee	recharts differences	2025-10-22 17:10:42 +01:00
Matt Fiddaman	364110ae65	note	2025-10-22 14:26:52 +01:00
Matt Fiddaman	aa1f59e532	bump dependencies	2025-10-22 14:26:31 +01:00