## MODIFIED Requirements

### Requirement: Daily trend chart must display expense/income over time
The system SHALL render a line chart showing daily transaction totals for the selected time period (week/month/year).

#### Scenario: Week view shows 7 days
- **WHEN** user selects "Week" time period
- **THEN** chart displays 7 data points (Mon-Sun) with expense and income lines

#### Scenario: Month view shows daily trend
- **WHEN** user selects "Month" time period
- **THEN** chart displays 28-31 data points (one per day) with expense and income lines

#### Scenario: Year view shows monthly trend
- **WHEN** user selects "Year" time period
- **THEN** chart displays 12 data points (one per month) with expense and income lines

#### Scenario: Chart highlights max expense day
- **WHEN** user views daily trend
- **THEN** the day with highest expense has a highlighted marker

#### Scenario: Chart supports zooming
- **WHEN** user pinches on mobile or scrolls on desktop
- **THEN** chart zooms in/out to show more/less detail

### Requirement: Expense category pie chart must show spending breakdown
The system SHALL render a pie chart displaying expense amounts grouped by category for the selected time period.

#### Scenario: Pie chart shows all expense categories
- **WHEN** user has expenses in multiple categories
- **THEN** chart displays one slice per category with percentage labels

#### Scenario: Pie chart uses category colors
- **WHEN** categories have custom colors defined
- **THEN** chart slices use the corresponding category colors

#### Scenario: Pie chart shows "Others" for small categories
- **WHEN** more than 8 categories exist
- **THEN** categories below 3% are grouped into "Others" slice

#### Scenario: Tapping slice shows category detail
- **WHEN** user taps a pie slice
- **THEN** app navigates to category detail view with transaction list

### Requirement: Monthly expense bar chart must compare months
The system SHALL render a vertical bar chart comparing expense totals across recent months.

#### Scenario: Bar chart shows 6 recent months
- **WHEN** user views monthly expense card
- **THEN** chart displays 6 bars representing the last 6 months

#### Scenario: Current month bar is highlighted
- **WHEN** user views monthly expense card
- **THEN** current month's bar uses primary color, previous months use gray

#### Scenario: Bar height reflects expense amount
- **WHEN** a month has higher expenses
- **THEN** its bar is proportionally taller

#### Scenario: Bar shows tooltip with formatted amount
- **WHEN** user hovers/taps a bar
- **THEN** tooltip displays month name and expense amount formatted as "¥X,XXX.XX"

### Requirement: Charts must maintain existing responsive behavior
The system SHALL ensure all statistics charts adapt to different screen sizes and orientations.

#### Scenario: Chart scales on narrow screens
- **WHEN** screen width is less than 375px
- **THEN** chart font sizes scale down proportionally while maintaining readability

#### Scenario: Chart reflows on orientation change
- **WHEN** device orientation changes from portrait to landscape
- **THEN** chart re-renders to fill available width within 300ms

#### Scenario: Chart labels truncate on small screens
- **WHEN** category names are longer than 12 characters
- **THEN** labels show ellipsis (e.g., "Entertainment..." ) and full text in tooltip