Intraday Chart with Breaks (Multiple Days)

Overview

Intraday charts with breaks visualize time-series data spanning multiple days while intelligently handling scheduled gaps such as overnight periods and weekends. This chart type is essential for financial data, displaying stock prices or trading volumes during market hours only (e.g., 09:30-16:00). By compressing non-trading periods into minimal visual breaks, the chart focuses attention on actual trading activity and makes multi-day trends easier to analyze. The x-axis automatically adds date labels at break points to maintain temporal context.

When to use

Multi-day stock market data spanning several trading sessions
Financial instruments tracking across multiple trading days
Business hours metrics over several days (customer service, sales)
Session-based data with defined active periods across days
Intraday patterns that need multi-day comparison
Any time-series with predictable, recurring daily breaks
When you need to compress time to focus on active periods

Not ideal

When gaps and overnight periods are informative and should be prominently visible
With irregular or unpredictable break patterns that vary significantly
When 24/7 continuity is important to the story you're telling
For single-day views where breaks aren't necessary
When exact elapsed time (including breaks) matters more than active session time
With audiences unfamiliar with compressed time representations

Key variations

Single session per day (e.g., 09:30-16:00) vs multiple sessions (pre-market, regular, after-hours)
Area fill vs line only for trend emphasis
Different break gap sizes (1%-5% of chart width)
Interactive data zoom to explore specific time ranges
Highlighting session boundaries with visual markers
Time zone adjustments for global markets
Custom axis label formatting showing dates at breaks
Slider zoom for multi-day navigation

Use cases

Stock prices during trading hours across multiple days (09:30-16:00)
Forex market data with daily session breaks
Commodity futures tracking over a trading week
Cryptocurrency exchange data with maintenance windows
Retail store foot traffic during business hours over a week
Call center volume during operating hours across multiple days
Server monitoring during peak business windows
Energy consumption patterns during business hours
Website traffic during active hours over several days

Data (CSV)

datetime,value
2024-04-09 09:30:00,1669.00
2024-04-09 09:31:00,1668.85
2024-04-09 09:32:00,1669.23
2024-04-09 15:58:00,1640.50
2024-04-09 15:59:00,1639.80
2024-04-09 16:00:00,1640.20
2024-04-10 09:30:00,1595.40
2024-04-10 09:31:00,1597.20
2024-04-10 09:32:00,1596.85
2024-04-10 15:58:00,1700.15
2024-04-10 15:59:00,1699.50
2024-04-10 16:00:00,1700.80
2024-04-11 09:30:00,1740.20
2024-04-11 09:31:00,1741.50
2024-04-11 15:59:00,1760.30
2024-04-11 16:00:00,1760.80
2024-04-12 09:30:00,1775.50
2024-04-12 09:31:00,1778.20
2024-04-12 15:58:00,2095.40
2024-04-12 15:59:00,2098.20
2024-04-12 16:00:00,2100.50

Note: The xAxisBreaks array defines time ranges to compress on the x-axis. Each break specifies:

start: Session close time as Unix timestamp in milliseconds (e.g., 1712678400000 = 2024-04-09 16:00:00 UTC)
end: Next session open time as Unix timestamp (e.g., 1712741400000 = 2024-04-10 09:30:00 UTC)
gap: Visual width as percentage (typically "1%")

In practice, breaks are usually generated programmatically based on your session hours (09:30-16:00 UTC) and date range. The timestamps above represent:

Break 1: April 9, 16:00 to April 10, 09:30
Break 2: April 10, 16:00 to April 11, 09:30
Break 3: April 11, 16:00 to April 12, 09:30
Break 4: April 12, 16:00 to April 13, 09:30

Design tips

Use area fill with moderate opacity to emphasize trend direction and volume
Set break gaps to 1-2% of chart width for minimal visual disruption
Enable both inside and slider data zoom for flexible exploration
Define breaks for each overnight/weekend period between sessions
Use UTC time consistently to avoid timezone confusion in data
Set y-axis minimum to data minimum for better scale utilization
Reserve bottom 30% of space for the slider zoom control
Keep symbol size at 0 (no points) for cleaner high-frequency data display
Use 30-minute intervals (1800000ms) for x-axis ticks in multi-day views
Insert NaN values in your data series at break points to disconnect lines

Performance tips

Generate breaks programmatically based on session rules for multi-day data
Pre-filter data to only include session hours before rendering
For datasets with minute-level data over many days, aggregate to 5-minute intervals
Set minimum zoom span to prevent over-zooming into too few data points
Use NaN values in data series to explicitly break lines at session boundaries
Consider downsampling for initial view, with detail-on-demand when zooming
Limit initial view to 5-7 trading days, provide zoom controls for exploration

FAQ

Should I connect lines across session breaks? Generally no. Session breaks represent real discontinuities where trading has stopped. The chart should visually break the line to make this clear. Connecting across breaks would falsely imply continuous activity and could be misleading for analysis.

How to handle different time zones? Convert all timestamps to a consistent timezone (typically UTC or the market's local time) before plotting. Document the timezone clearly in the chart subtitle or description to avoid confusion.

What about partial sessions (holidays, early closures)? Generate breaks dynamically based on actual session times. For special dates like early closures on holidays, adjust the session end time accordingly in your data preparation.

How to show overnight changes? While the chart compresses overnight periods visually, you can add annotations or tooltips that show the gap between previous close and current open. Consider adding indicators at break points showing the percentage change across the gap.

Should I show weekends? For financial charts, generally compress weekends into breaks just like overnight periods. This keeps the focus on trading activity and makes the timeline more compact and easier to read.

How many days can I show effectively? With minute-level data, 4-7 trading days works well before the chart becomes too dense. For longer periods (weeks or months), aggregate to 5-15 minute intervals. Provide zoom controls to let users explore specific days while maintaining multi-day context.

Can I have multiple sessions per day? Yes, you can define multiple trading sessions per day. For example, some stock markets have a lunch break (12:00-13:00), or you might show pre-market, regular hours, and after-hours as separate sessions with breaks between them.

Example

Guide