actualbudget/actual

[Bug]: Custom report widget of barchart mouseover legend is truncated incorrectly

Open

#7297 opened on Mar 26, 2026

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (7,129 stars) (603 forks)batch import
bughelp wantedreports

Description

What happened?

I have a custom report to show my net spending by group, over time, as a stacked bar graph, for a bunch of different categories. On my dashboard I have a widget of this report. When I mouse over a month, the tooltip that shows the legend for the categories and their spending is truncated very inconsistently. The amount of categories shown in the tooltip varies per month, in some cases it does not even show one category.

Note that when I open the report the tooltip works just fine. When I create the same report but as a line graph instead, the tooltip truncates at 4 categories for every month.

In my opinion, even with 20 entries, the tooltip is not so big that it needs truncating. Not being able to see this legend greatly reduces the usefullness of the widget. I would suggest making the tooltip behave the same for the widget as it does in the report.

This screenshot shows the tooltip not even showing one category.

How can we reproduce the issue?

  1. Create a custom report for more than 4 categories over time, split by category, monthly interval.
  2. Add a widget of this report to your dashboard.
  3. Mouseover the bars in the chart to show the tooltip.
  4. Observe that the tooltip length is not the same every month, even though there are more than 4 categories with entries in each month.

Where are you hosting Actual?

Docker

What browsers are you seeing the problem on?

Firefox

Operating System

Windows 10

Contributor guide

Tech stack
javascriptreactcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic React knowledgeFamiliarity with chart libraries
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
The bug report indicates inconsistent tooltip truncation in the custom report widget's bar chart. The tooltip works correctly when viewing the report directly but truncates incorrectly on the dashboard widget. The repository uses JavaScript and likely React. The chart component is probably in a 'reports' or 'widgets' directory. Look for tooltip rendering logic, possibly in a file like 'Tooltip.jsx' or within the chart component. Compare the tooltip behavior between the widget and the report view. The truncation may be due to a CSS overflow or a max height property that differs between the two contexts. Check for any recent changes to the tooltip component or styling. Review the single existing comment (if any) for additional context.