## MODIFIED Requirements

### Requirement: Budget gauge charts must display health status
The system SHALL render monthly and yearly budget health using gauge (semi-circle) charts showing current usage vs limit.

#### Scenario: Monthly gauge shows expense usage
- **WHEN** user views expense budget analysis
- **THEN** monthly gauge displays current expense / monthly limit as a percentage with remaining balance in center

#### Scenario: Monthly gauge shows income progress
- **WHEN** user views income budget analysis
- **THEN** monthly gauge displays current income / monthly target as a percentage with shortfall/excess in center

#### Scenario: Yearly gauge shows expense usage
- **WHEN** user views expense budget analysis
- **THEN** yearly gauge displays current expense / yearly limit as a percentage with remaining balance in center

#### Scenario: Yearly gauge shows income progress
- **WHEN** user views income budget analysis
- **THEN** yearly gauge displays current income / yearly target as a percentage with shortfall/excess in center

#### Scenario: Gauge changes color when exceeding limit
- **WHEN** expense usage exceeds 100% of budget
- **THEN** gauge arc color changes to red (var(--van-danger-color))

#### Scenario: Gauge changes color when exceeding income target
- **WHEN** income exceeds 100% of target
- **THEN** gauge arc color changes to green (var(--van-success-color))

### Requirement: Budget variance chart must show category-level differences
The system SHALL render a horizontal bar chart comparing actual vs budgeted amounts for each category.

#### Scenario: Variance chart displays all categories
- **WHEN** user has multiple budget categories
- **THEN** chart shows horizontal bars for each category with actual (solid) and budget (dashed) values

#### Scenario: Variance chart highlights overbudget categories
- **WHEN** a category's actual exceeds budget
- **THEN** the bar is colored red and labeled with overage amount

#### Scenario: Variance chart shows underbudget categories
- **WHEN** a category's actual is below budget
- **THEN** the bar is colored green and labeled with remaining amount

### Requirement: Budget burndown chart must track daily spending trend
The system SHALL render line charts showing cumulative spending vs ideal pace for monthly and yearly periods.

#### Scenario: Monthly burndown chart shows ideal vs actual
- **WHEN** user views monthly burndown
- **THEN** chart displays two lines: ideal linear spending and actual cumulative spending

#### Scenario: Monthly burndown projects month-end total
- **WHEN** current date is mid-month
- **THEN** chart shows projected month-end total based on current pace (dotted line extension)

#### Scenario: Yearly burndown chart shows ideal vs actual
- **WHEN** user views yearly burndown
- **THEN** chart displays two lines: ideal linear spending and actual cumulative spending by month

#### Scenario: Yearly burndown highlights current month
- **WHEN** user views yearly burndown
- **THEN** chart highlights the current month's data point with a larger marker

### Requirement: Charts must maintain existing interaction behavior
The system SHALL preserve all existing click, tooltip, and zoom interactions from the ECharts implementation.

#### Scenario: Chart tooltip shows on hover/tap
- **WHEN** user hovers over (desktop) or taps (mobile) a data point
- **THEN** tooltip displays formatted value with label

#### Scenario: Chart updates when switching budget type
- **WHEN** user switches between expense/income/savings tabs
- **THEN** all charts update their data and labels within 300ms