github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-03-10 12:12:39 -05:00
Code Issues 250 Packages Projects Releases 53 Wiki Activity

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

New Issue
Closed
opened 2026-02-28 21:30:29 -06:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-02-28 21:30:29 -06:00
Owner
Copy Link

Original Pull Request: https://github.com/actualbudget/actual/pull/6554

State: closed
Merged: Yes

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
**Original Pull Request:** https://github.com/actualbudget/actual/pull/6554 **State:** closed **Merged:** Yes --- ## 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" />
GiteaMirror added the pull-request label 2026-02-28 21:30:29 -06: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
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#6597
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?