[Insights] [R1] Simplify Insights graphs, move row detail into tooltips, and polish chart styling #102814

Background

Today the Spend dashboard on Insights renders four graphs behind a beta: Spend over time as a line chart, Top spenders and Top merchants as horizontal bar charts, and Top categories as a donut. Each graph has a list beneath it, and every row in that list shows the item label, its amount, its expense count, and its share of total spend.

Running this in product showed two problems. Horizontal bars put the item label inside the chart, so a long name like IT Software Licenses and Subscriptions (General Subscriptions under $10K) either truncates or squeezes the plot area. Separately, showing the amount, the count, and the share on every row puts a lot on screen before the reader has asked for any of it, when a tooltip can carry that detail on demand instead.

This issue reduces what each graph shows by default, moves the per-item detail into tooltips, switches the ranking charts to vertical bars, and applies a set of chart styling updates. There are no backend or data changes: every value described below already comes back from the existing dashboard query.

Change summary

• Switch Top spenders, Top merchants, and Top categories under Compare from horizontal to vertical bars, and move each item's label out of the chart and into the list beneath it.
• Reduce each list row to the item label and its amount, plus a percentage change when Compare is on. The expense count and share of total spend move into the tooltip.
• Add a tooltip to every plotted element, on hover on desktop and on tap on mobile, using the full-height column or bar group as the target rather than the drawn shape.
• Remove the chart legend, since the tooltip now names each period and the darker swatch is always the current period.
• Apply the chart styling updates: a right-aligned condensed y-axis, dashed gridlines, 4px lines with no dots at rest, rounded bars that fill the available width, and 400/200-level swatches that become 400/700 in dark mode.
• No backend changes, no new or changed queries, no change to which graphs appear, and no change to how many rows each list shows.

Product and design details

More design details in Figma.

Ranking charts

• Top spenders, Top merchants, and Top categories under Compare render as vertical bars. No item label is drawn inside the chart.
• Bars are as wide as the space allows while keeping a 16px gap between them, with a 4px border radius.
• Under Compare, each item renders as a pair: the current period in the item's 400-level swatch and the comparison period in its 200-level swatch, 4px apart, with 16px between pairs.
• Top categories remains a donut when Compare is off and becomes vertical bars when Compare is on. That switch is existing behavior and is unchanged.

Row anatomy

Each row in a graph's list shows, left to right:

• The item's indicator: a 20px colored dot for Top merchants and Top categories, or a 16px avatar with a 2px outside border for Top spenders.
• The item label, which wraps across as many lines as it needs. Labels are never truncated.
• The amount, right-aligned, with a 20px minimum gap from the label.

With Compare on, each row adds a second line beneath the amount: the percentage change, prefixed with an up or down arrow.

Rows no longer show the expense count or the share of total spend. Both move into the tooltip, which is the main density reduction in this issue. There is a 24px gap between the chart and the first row.

Tooltips

With Compare off, the tooltip has three lines:

1. The item label, or the period for Spend over time, in the strong label style.
2. The amount and its share of the period total, as $24,000.00 (36.6%).
3. The expense count, as 841 expenses.

With Compare on, the tooltip drops the expense count and reads:

1. The item label, or the period for Spend over time.
2. One line per period, each led by that period's color dot, giving the period name, the amount, and its share: 2026: $24,000.00 (36.6%).
3. The delta: an arrow, the absolute change, and the percentage change against the comparison period, in the same color the row's percentage change uses.

Period names reuse whatever the Date and Compare filters resolve to, so Year to Date with Previous period labels the two lines 2026 and 2025. Both lines are always labeled, including on Top merchants and Top categories.

Tooltip styling: 12px padding, 8px border radius, appBG background, borders border, and an 8px gap between lines.

Hover and tap targets

The target is deliberately larger than the drawn shape, so a short bar or a low line point is still easy to hit.

• Spend over time: a full-height vertical band covering the plot area for each x-axis bucket. Hovering anywhere in the band shows that period's tooltip, draws a dot on the line at that point, and draws a vertical guideline through the band.
• Bar charts: a full-height rectangle covering the whole bar, or the whole pair under Compare. Hovering the empty space above a short bar still shows that item's tooltip.
• Top categories donut: the slice itself.

On desktop, clicking a bar, line point, or slice still opens the Spend page filtered to that data, unchanged from today.

On mobile, tap shows the tooltip, and there is no tap-to-drill-in. Drilling into Spend on mobile happens from each card's ⋮ menu, using the existing View on Spend action.

Chart styling

• Y-axis: condensed values ($25k, $1.5m), right-aligned, in the icons color.
• Gridlines: dashed and rounded where the renderer supports it, with a 4px dash and an 8px gap.
• Line chart: 4px stroke, no dots at rest, rounded terminals, and a gradient area fill beneath the line.
• Card header buttons use small ghost buttons with the standard hover treatment. Group by on Spend over time is the only one today. The Explain button in the mocks arrives with the AI insight cards in a later release, so it is not part of this issue.
• The legend is removed from every graph. Period identification lives in the tooltip, and the current period is always the darker 400-level swatch, so a reader can tell the two series apart without hovering.

Color

• Each item uses its 400-level swatch for the current period and its 200-level swatch for the comparison period.
• In dark mode, the 200-level comparison swatch becomes the 700-level swatch. The 400-level swatch is unchanged.
• A row's percentage change and a tooltip's delta line use success-hover when the value decreased and danger when it increased, because an increase in spend is the unfavorable direction on this dashboard.

Mobile

The single column stack keeps today's order:

1. Spend over time
2. Top spenders
3. Top merchants
4. Top categories

• Spend over time labels only the first and last x-axis buckets, since there isn't room for twelve.
• The filter row scrolls horizontally when the chips exceed the screen width.
• Rows use the same anatomy as desktop, with labels wrapping.