Bump Chart

Bump ChartPreview

Tracks how expense categories rank against each other month-over-month. A rank-1 position means the highest spending category for that month.

Chart Type

Property	Value
Library	Apache ECharts via BaseChart
Series type	line (one series per category)
Source file	src/components/panels/BumpChartPanel.tsx

What It Shows

Each line represents an expense category. The y-axis shows rank position (inverted, so rank 1 is at the top). As categories rise and fall in spending relative to each other, their lines cross -- making it easy to spot when a category overtakes another.

Rankings are computed by sorting categories by monthly spending within each month, then assigning sequential ranks.

Key Features

Feature	Detail
Inverted y-axis	inverse: true -- rank 1 at the top
Smooth lines	smooth: 0.3 for gentle curves
End labels	Category name displayed at the right end of each line
Category-colored lines	Each line uses the category's assigned color
Focus emphasis	Hovering highlights one category line, fading others
Y-axis labels	Formatted as #1, #2, #3, etc.
X-axis labels	Formatted via formatMonth() from lib/formatting.ts

Visual Details

• Line width: 2.5px
• Symbol: circle, size 8
• Symbol border: panel background color, 2px width (creates an inset dot effect)
• End label font: mono, 10px, colored to match the category
• Grid: 40px left, 110px right (room for end labels), 20px top, 30px bottom

Interactivity

• Hover -- emphasis.focus: 'series' highlights the hovered line (width increases to 4px) and fades all other lines
• Tooltip -- standard ECharts tooltip via BaseChart

Data Source

Store	Fields
mockMonthlyByCategory	Mock data from src/mocks/personalData.ts
useFinanceStore	isMockMode flag
useChartTheme	Axis styles, split lines, label colors

Data is currently sourced from mock data. Each entry includes month, category, amount, and color fields. When connected to Akahu, this will pull from the monthly summary store.