Overlay Charts
Overlay charts combine multiple properties on a single visualization, making it easy to spot correlations and patterns.
Creating an Overlay
- Click Create overlay in the view controls
- Select 2 or more properties from the list
- Choose a name for the overlay (e.g., “Sleep vs Mood”)
- Select a chart type (Line, Bar, or Area)
- Click Create
The overlay appears as a new card in your grid.
Supported Chart Types
Only cartesian charts support overlays:
- Line Chart: Best for comparing trends
- Bar Chart: Best for comparing values
- Area Chart: Best for comparing volume
- Range Chart: Best for start-to-end spans (see Range Charts)
Editing an Overlay
Right-click the overlay card and select Edit overlay to:
- Change the display name
- Switch chart type
- Add or remove properties
- Configure reference lines per property
- Toggle individual visualization hiding
Hide Individual Visualizations
When you combine properties into an overlay, you may want to hide their separate cards to reduce visual clutter.
In the overlay edit modal:
- Enable Hide individual visualizations
- The separate cards for each property in the overlay will be hidden
- Only the combined overlay chart is shown
Note: If a property is in multiple overlays, it’s hidden if ANY overlay has this option enabled.
Reference Lines in Overlays
Each property in an overlay can have its own reference line:
- Edit the overlay
- In the Reference lines section, toggle each property
- Enter target values for enabled properties
- Lines are color-coded to match each property’s dataset
Range Charts
A range chart draws one floating bar per period, spanning from a start property’s value to an end property’s value — built for activity times:
- Sleep:
To Bed→Wake Up - Work hours:
Work Start→Work End - Numeric spreads:
Min Weight→Max Weight
Create one like any overlay (“Add overlay” → chart type Range chart), with exactly 2 properties: the first selected property is the start, the second the end.
Value handling:
- Values can be times of day (
23:30), datetimes (the time part is used), or plain numbers. - If any value is a time, the whole chart runs in time mode: the y-axis and tooltips read as clock times (
HH:mm). - Spans that end “before” they start cross midnight and are drawn into the next day: a 23:30 → 07:15 night renders as one continuous bar. Late-evening and small-hours start times cluster on one band instead of jumping between the axis ends.
- A period missing either property shows no bar.
Per-period aggregation, reference lines, targets, and the legend do not apply to range charts; clicking a bar opens the period’s notes, and CSV export writes the formatted times.
Legend
Overlay charts always show a legend to identify each property’s line/bar/area. The legend uses the property display names.
Positioning an Overlay
By default, overlay cards appear at the end of the grid, after all individual property cards. To move an overlay before or between property cards, drag the grip handle (⋮⋮) in the overlay’s top-left corner to a new position. See Reorder Cards for details.
Data Requirements
- All properties must have compatible numeric data
- Data is aligned by time period based on the view’s granularity
- Missing data points show gaps in the visualization
Use Cases
Health Correlations
Combine sleep, mood, and energy to see how they relate:
- Properties: sleep_hours, mood, energy_level
- Chart type: Line
- Insight: See if poor sleep affects next-day mood
Exercise Impact
Track exercise against recovery metrics:
- Properties: exercise_duration, soreness, recovery_score
- Chart type: Area
- Insight: Find optimal exercise frequency
Habit Stacking
Monitor related habits together:
- Properties: meditation_minutes, journal_completed, water_intake
- Chart type: Bar
- Insight: See which habits you’re consistent with
Work-Life Balance
Compare work and personal metrics:
- Properties: work_hours, personal_time, stress_level
- Chart type: Line
- Insight: Identify when work impacts personal life
Tips
- Start with 2-3 properties: Too many lines become hard to read
- Use similar scales: Properties with vastly different ranges may need separate overlays
- Consider color schemes: Choose schemes where colors are easy to distinguish
- Name overlays descriptively: Makes it easy to understand at a glance
- Hide individuals when focused: Use the hide option when you only care about correlations