Horizon Chart
A space-efficient time-series visualization that folds area bands into layered colour strips — compressing the y-axis while preserving patterns and enabling dense comparison.
// 01 — The chart
What it looks like
A horizon chart showing 24 hours of CPU usage across four server nodes. Darker bands indicate higher utilization; the compact rows enable quick comparison.
// 02 — Definition
What is a horizon chart?
A horizon chart (also called a horizon graph) is a compact time-series visualization that divides the y-axis range into equal bands, then folds those bands back onto each other, using progressively darker colour fills to encode the band level. The result is a chart that takes up a fraction of the vertical space of a standard area chart while preserving the ability to detect patterns.
The technique works by “mirroring” any values that exceed the first band’s range back down to the baseline and filling them with a darker shade. A two-band horizon chart uses half the vertical space; a three-band chart uses a third, and so on. Negative values are typically shown with a different hue (often blue vs. red) and mirrored upward from the baseline.
Horizon charts are especially powerful when used as small multiples — stacking dozens of thin horizon rows to compare many time series simultaneously, such as server metrics, stock prices, or sensor readings.
Key insight: Horizon charts exploit the fact that humans are very good at distinguishing colour intensity. By mapping magnitude to darkness rather than height, they achieve extreme vertical compression with surprisingly little loss of pattern recognition.
// 03 — Anatomy
Parts of a horizon chart
// 04 — Usage
When to use it — and when not to
- You need to compare many time series in limited vertical space (10+ series)
- Monitoring dashboards — server metrics, sensor readings, or financial instruments
- Detecting anomalies across dozens of parallel streams simultaneously
- The audience is technically literate and familiar with the encoding
- You want to see both overall patterns and peak intensity at a glance
- Your audience is unfamiliar with the technique — the learning curve is steep
- Precise value reading is required — colour bands only convey approximate magnitude
- You have just one or two series — a standard area or line chart is simpler
- The data has no clear baseline or zero point — the folding becomes confusing
- Accessibility is a primary concern — colour intensity is hard for vision-impaired users
// 05 — Reading guide
How to read a horizon chart
Horizon charts require a brief learning period. Follow these steps to decode the colour-layered bands.
Understand the colour scale
Light shading represents low values (first band). Each progressively darker shade means the value has crossed into the next band — like contour lines on a topographic map.
Identify each row
Each thin horizontal strip is a separate time series. Check the label on the left to know what you're looking at.
Scan for dark patches
The darkest areas indicate peak values — these are the moments when the metric was highest. Scan all rows to quickly find which series spiked and when.
Compare rows vertically
Align your eye across rows at the same time point to see which series were high or low simultaneously. Correlated patterns will appear as vertical columns of similar shading.
Watch for negative values
If the chart uses a diverging palette (e.g. red for positive, blue for negative), bands below the baseline are mirrored upward in the secondary colour. Dark blue means a strong negative value.
// 06 — Data format
What data you need
A horizon chart requires a time column and one numeric column per series. Each row represents one time point. Optionally, you specify the number of bands (typically 2–4) and whether negative values should use a diverging colour scheme.
// 07 — Construction
How to build one
Step 1: Start with a standard area chart for each series. The y-axis should begin at zero.
Step 2: Divide the y-axis range into n equal bands (typically 2–4). Assign each band a progressively darker shade of the same colour.
Step 3: For each band beyond the first, clip the area chart at the band boundary, subtract the band threshold, and “fold” it back down to the baseline. Fill it with the corresponding darker shade.
Step 4: Stack all folded bands within the same row. The row height is now 1/n th of the original chart height, but the colour layering preserves the value information.
Step 5: For negative values, mirror the process below the baseline using a secondary colour hue (e.g. blue). Fold negative bands upward from the baseline.
// 08 — Common mistakes
Mistakes to avoid
Too many bands
More than 4 bands make it nearly impossible to distinguish shading levels. Stick to 2 or 3 bands for most use cases.
No legend or colour key
Without explaining what light, medium, and dark shading mean, the chart is unreadable. Always include a band-level legend.
Using it for general audiences
Horizon charts require training to read. If your audience hasn't seen one before, provide a brief explanation or choose a simpler chart type.
Inconsistent scales across rows
If comparing multiple series, ensure all rows use the same y-axis scale. Different scales make comparisons meaningless.
Poor colour contrast between bands
Adjacent bands must have clearly distinguishable opacity/darkness levels. Test with colourblind simulations.
// 09 — Real-world examples
Where you’ll see them
Server & infrastructure monitoring
Grafana, Datadog, and custom dashboards use horizon charts to display CPU, memory, network, and disk I/O across dozens of machines in a single view.
Financial market dashboards
Trading desks use horizon charts to track price movements across hundreds of instruments simultaneously, with colour intensity highlighting volatility spikes.
Climate & environmental data
Researchers plot temperature anomalies, river flow levels, or air quality readings across multiple sensors using horizon charts for temporal pattern detection.
// 10 — Quick reference
Key facts
// 11 — Accessibility
Making it accessible
Horizon charts are among the most challenging chart types for accessibility. Provide an aria-label describing the overall pattern for each row. Always offer an alternative data table. Choose a colour palette where band levels remain distinguishable for colourblind users — vary both lightness and saturation, not just hue. Interactive tooltips showing exact values on hover are essential to compensate for the lack of a readable y-axis.
// 12 — Variations
Common variations
Two-band horizon
The simplest form — values split into two bands, halving the required height with just light and dark fills.
Diverging horizon chart
Uses two colour hues (e.g. red/blue) to show positive and negative values, each folded independently.
Interactive horizon chart
Hovering over a row expands it to full area-chart height, revealing precise shape. Clicking locks the expanded view.
Sorted / clustered horizon
Rows reordered by similarity (e.g. correlation clustering) so that related series appear adjacent, revealing groups.
// 13 — FAQs
Frequently asked questions
What is a horizon chart?+
A horizon chart (also called a horizon graph) is a compact time-series visualization that divides the y-axis range into equal bands, then folds those bands back onto each other, using progressively darker colour fills to encode the band level. The result is a chart that takes up a fraction of the vertical space of a standard area chart while preserving the ability to detect patterns.
When should you use a horizon chart?+
Use a horizon chart when you need to compare many time series in limited vertical space (10+ series). It also works well when monitoring dashboards — server metrics, sensor readings, or financial instruments, and when detecting anomalies across dozens of parallel streams simultaneously.
When should you avoid a horizon chart?+
Avoid a horizon chart when your audience is unfamiliar with the technique — the learning curve is steep. It is also a poor fit when precise value reading is required — colour bands only convey approximate magnitude, or when you have just one or two series — a standard area or line chart is simpler.
What data do you need to make a horizon chart?+
A horizon chart requires a time column and one numeric column per series. Each row represents one time point. Optionally, you specify the number of bands (typically 2–4) and whether negative values should use a diverging colour scheme.
How is a horizon chart different from an area chart?+
Both a horizon chart and an area chart can look similar at first glance, but they answer different questions. Reach for a horizon chart when the comparisons and patterns it was designed to reveal match what you need to communicate, and choose an area chart when its particular strengths better fit your data and audience.
What is another name for a horizon chart?+
Horizon Chart is also known as Horizon graph, two-tone pseudo-colouring. The name varies between fields, but the visualisation technique is the same.
What size of dataset works best for a horizon chart?+
Horizon Chart works best for 10+ parallel time series, monitoring dashboards, anomaly detection. Outside that range the chart either looks empty or becomes too cluttered to read clearly.
Are horizon charts accessible to screen readers?+
Horizon charts are among the most challenging chart types for accessibility. Provide an aria-label describing the overall pattern for each row. Always offer an alternative data table. Choose a colour palette where band levels remain distinguishable for colourblind users — vary both lightness and saturation, not just hue. Interactive tooltips showing exact values on hover are essential to compensate for the lack of a readable y-axis.