Stacked Bar Chart

Part of SVG Report Renderer. Visualizes time by day with tag breakdown.

Structure

Each day is a vertical stacked bar:

  • Height proportional to total hours
  • Segments colored by tag
  • Untagged segments use gray (#888888)

Segment Ordering

Segments sorted by hours descending (largest at bottom):

  • Provides visual stability
  • Larger segments anchor the bar

Labels

  • Inside segments: Duration text (e.g., “2h 30m”)
  • Text color: Black or white based on background luminance contrast
  • Above bar: Total duration for the day

X-Axis

Dates adapt format based on data density:

  • Few days: Full date format
  • Many days: Abbreviated

No Y-Axis

Values are shown inside/above bars instead of a scale:

  • Cleaner appearance
  • Direct reading without reference

Data Source

Uses ReportDayItem from ReportData:

struct ReportDayItem {
    let date: Date
    let totalHours: Double
    let tagSegments: [ReportDayTagSegment]
}

Related