Compact multi-band time series visualization. Good for many parallel series.
A free, animated horizon chart you can read here or embed on any website, from Scrollchart.
Horizon Chart
A horizon chart stacks many time-series rows in a compact vertical space by replacing the height of a line chart with color intensity. Each row is divided into bands: a light shade represents low positive values, a medium shade medium values, and a dark shade high values. The bands are then folded (overlaid) so they all occupy the same fixed row height rather than extending upward. Negative values are mirrored downward, typically in a contrasting color, and then also folded into the same row.
The practical result is that a dozen or more time series can be compared side by side in the screen space that a conventional chart would use for two or three. Horizon charts originated in financial trading terminals and were later formalized in visualization research as one of the most space-efficient formats for dense multi-series time data.
Read each horizontal row as a separate series. Within a row, darker shading means a higher positive value; lighter shading or white means a value near zero. A contrasting shaded region (typically below the row baseline) indicates a negative value.
A common misreading is to interpret adjacent rows as stacked, implying a total. They are not: each row is independent, and its vertical position has no numerical meaning. Compare rows to each other for relative intensity at any time point, or scan along a single row to see how that series evolves over time. Because the bands are folded, the absolute scale is not directly readable from position alone; look for the legend or axis annotations that show what shade corresponds to what numerical range.
Editorial pages where a quick visual replaces a wall of text
Content-marketing posts that need a clean, branded illustration
Source & accuracy
This horizon chart is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.
Compressing many time series into dense space
A horizon chart stacks multiple time series vertically, with each series occupying a narrow band and colored regions showing values above and below a baseline. Instead of using height to encode magnitude (which wastes space), horizon charts fold values into color intensity. A dark blue band means a large positive value; light blue means small positive; a mirror gradient below the baseline shows negative values. This compression allows dozens of parallel series to fit in one chart.
Trading detail for breadth of coverage
The payoff for this density is reduced fine-grained readability. It's harder to extract exact values from a horizon chart than from a traditional multi-line chart. Horizon charts are better for spotting patterns across many series: 'Which series peaked in quarter 3?' 'Did series A and B move together?' 'When did volatility spike?' Precise point readings require hover interactions or a data table alongside.
Color gradient as the key visual encoding
The color gradient carries all the magnitude information. Consistent color scales across all series enable comparison: if the green in series 1 matches the green in series 10, they have the same magnitude. However, human perception of color intensity is nonlinear, so small differences in the middle of the spectrum may be hard to distinguish. Interactive tooltips become essential for precision.
Embed this diagram
Add this animated horizon chart to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.
Reference
What this is
A free, embeddable, animated horizon chart for any website.
Who uses it
Data journalists, Researchers & academics, Content marketers, News organizations.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.
Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback -
see the WordPress plugin page for details. Any format keeps
the same Core Web Vitals profile and the same explainer text.
By embedding, you acknowledge the diagram and explainer text are served from scrollchart.com and may be updated from time to time to reflect new research or to link to relevant sources within the explainer.
Frequently asked questions
Where can I get a free animated "Horizon Chart" for my website?
Scrollchart provides "Horizon Chart" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a horizon chart in a blog post or article?
Paste the one-line HTML snippet from the Scrollchart diagram page into your post editor. It works in WordPress, Webflow, Ghost, and plain HTML with no plugin required. The animated diagram and its explainer text load from scrollchart.com and render directly in your page DOM.