github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-07-16 15:14:02 -05:00
Code Issues 3.0k Packages Projects Releases 58 Wiki Activity

[PR #6554] [MERGED] Fix/stacked bar graph crash 6406 #32522

New Issue
Closed
opened 2026-04-18 08:33:27 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-18 08:33:27 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/6554
Author: @FictionFics
Created: 1/5/2026
Status: ✅ Merged
Merged: 1/8/2026
Merged by: @youngcw

Base: master ← Head: fix/stacked-bar-graph-crash-6406

📝 Commits (3)

  • 1195800 fix: remove responsive prop from StackedBarGraph to prevent infinite loop
  • dc75797 docs: add release notes for #6406
  • b581ea9 [autofix.ci] apply automated fixes

📊 Changes

2 files changed (+6 additions, -1 deletions)

View changed files

📝 packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx (+0 -1)
➕ upcoming-release-notes/6554.md (+6 -0)

📄 Description

Fix: Remove responsive prop from StackedBarGraph to prevent infinite loop

Fixes #6406

Problem

The StackedBarGraph component was crashing with React Error #185 (Maximum update depth exceeded) when displaying reports with:

  • Mode: Time
  • Split: Category
  • Type: Net
  • Interval: Monthly
  • Live date range: Year to date
  • 6+ months of data

Root Cause

The responsive prop on recharts' BarChart was conflicting with explicit width and height props provided by the Container's AutoSizer, causing recharts' useElementOffset hook to trigger an infinite re-render loop.

Solution

Removed the redundant responsive prop since explicit dimensions are already provided by the Container component through AutoSizer.

Testing Steps

  1. Create a custom report with the configuration above
  2. Add at least 6-7 months of transaction data across multiple categories
  3. Switch to Stacked Bar Graph view
  4. Verify the graph renders without crashing

Notes

  • Tested with the Netlify preview deployment
  • Other graph components (BarGraph, LineGraph, etc.) have the same pattern and may need similar fixes.

Testing Results ✅

Tested the fix successfully with Netlify preview:

Configuration used:

  • Mode: Time
  • Split: Category
  • Type: Net
  • Interval: Monthly
  • Range: Year to date
  • Data: 7+ months with multiple categories

Result:
✅ Stacked Bar Graph renders correctly without crashing
✅ No React Error #185 (Maximum update depth exceeded)
✅ All interactions work properly (tooltips, hover effects)

The removal of the responsive prop fixed the infinite loop issue caused by the conflict between AutoSizer and recharts' useElementOffset hook.

Screenshot 2026-01-05 at 13 54 17

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/6554 **Author:** [@FictionFics](https://github.com/FictionFics) **Created:** 1/5/2026 **Status:** ✅ Merged **Merged:** 1/8/2026 **Merged by:** [@youngcw](https://github.com/youngcw) **Base:** `master` ← **Head:** `fix/stacked-bar-graph-crash-6406` --- ### 📝 Commits (3) - [`1195800`](https://github.com/actualbudget/actual/commit/1195800c5cafdbc9cfddaec81f57f8422ea2fc2e) fix: remove responsive prop from StackedBarGraph to prevent infinite loop - [`dc75797`](https://github.com/actualbudget/actual/commit/dc757973e0ab3e31dd590f1371d850e6fc04649e) docs: add release notes for #6406 - [`b581ea9`](https://github.com/actualbudget/actual/commit/b581ea9ec83d722ace0b3456420e516a88d44881) [autofix.ci] apply automated fixes ### 📊 Changes **2 files changed** (+6 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx` (+0 -1) ➕ `upcoming-release-notes/6554.md` (+6 -0) </details> ### 📄 Description ## Fix: Remove responsive prop from StackedBarGraph to prevent infinite loop Fixes #6406 ### Problem The StackedBarGraph component was crashing with React Error #185 (Maximum update depth exceeded) when displaying reports with: - Mode: Time - Split: Category - Type: Net - Interval: Monthly - Live date range: Year to date - 6+ months of data ### Root Cause The `responsive` prop on recharts' BarChart was conflicting with explicit `width` and `height` props provided by the Container's AutoSizer, causing recharts' `useElementOffset` hook to trigger an infinite re-render loop. ### Solution Removed the redundant `responsive` prop since explicit dimensions are already provided by the Container component through AutoSizer. ### Testing Steps 1. Create a custom report with the configuration above 2. Add at least 6-7 months of transaction data across multiple categories 3. Switch to Stacked Bar Graph view 4. Verify the graph renders without crashing ### Notes - Tested with the Netlify preview deployment - Other graph components (BarGraph, LineGraph, etc.) have the same pattern and may need similar fixes. ### Testing Results ✅ Tested the fix successfully with Netlify preview: **Configuration used:** - Mode: Time - Split: Category - Type: Net - Interval: Monthly - Range: Year to date - Data: 7+ months with multiple categories **Result:** ✅ Stacked Bar Graph renders correctly without crashing ✅ No React Error #185 (Maximum update depth exceeded) ✅ All interactions work properly (tooltips, hover effects) The removal of the `responsive` prop fixed the infinite loop issue caused by the conflict between AutoSizer and recharts' useElementOffset hook. <img width="2285" height="1060" alt="Screenshot 2026-01-05 at 13 54 17" src="https://github.com/user-attachments/assets/88a29835-241f-45e2-9250-4f64bf6e1514" /> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-18 08:33:27 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
AI generated
API
bank sync
budgeting
bug
can’t replicate
dependencies
docker
documentation
electron
experimental feature
feature
feedback
goal templates
good first issue
help wanted
importers
maintenance
needs info
needs testing
needs triage
needs votes
openid
payees
pull-request
Mirrored from GitHub Pull Request
 regression
reports
responsive
rules
schedules
server
✨ merged
split transactions
tech debt
tech-support
theme
transaction import
transaction reconciliation
transactions
translations
upstream
user interface
✅ approved
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#32522
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?