Home / Trends Over Time / Horizon Chart
Horizon Chart in HTML, CSS and JavaScript
A horizon chart packs a long time series into a thin strip by folding the values into colored bands. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows daily temperature above or below normal for six cities over a year.
What is a horizon chart?
A horizon chart packs a long time series into a thin strip by folding the values into colored bands. Small differences are light, bigger ones are darker, warm values are red and cool values are blue.
Because each row is so short, you can stack many series and compare them day by day, like six cities over a whole year. It takes a minute to learn, then it becomes one of the most useful charts for dense data.
At a glance
- Best for
- Many long series compared in little space
- Data you need
- A value above or below a baseline for each day
- Skip it when
- Readers who need a chart they understand instantly.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a horizon chart
- Temperature against normal for many cities
- Server load or response times for many machines
- Stock returns for many companies
- Any daily reading for many sensors or places
When to pick another chart
- Area Chart: you only have one series
- Sparkline: you want a quick trend, not a close comparison
What you get in this template
- 365 days for six cities drawn as solid SVG paths, not thousands of shapes
- Three shades each for warmer and cooler, in steps of 4 degrees
- A crosshair that reads every city for the chosen day
- Month lines so you can find a date fast
- On phones the city names move above each row
- A summary table with warm days, cool days and extremes
How the code works
Here is a short version of the idea behind this horizon chart. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const values = [1, 3, 6, 9, 5, 2, -1, -4, -7, -3, 0, 2]; // above or below normal
const band = 4, rowH = 40, base = 50, w = 30;
const warm = ['#f4b9a7', '#e0664a', '#a8231a'], cool = ['#b3cde8', '#5b92cc', '#1f4f8c'];
values.forEach((v, i) => {
const shades = v >= 0 ? warm : cool;
for (let k = 0; k < 3; k++) {
const part = Math.max(0, Math.min(band, Math.abs(v) - k * band)) / band * rowH;
if (part > 0) drawRect(20 + i * w, base - part, w, part, shades[k]);
}
});The example uses four tiny helpers that create SVG shapes. Put them above the code and it runs as is.
const svg = document.querySelector('svg');
function make(tag, attrs) {
const n = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (const k in attrs) n.setAttribute(k, attrs[k]);
svg.appendChild(n);
return n;
}
function drawRect(x, y, width, height, fill) { return make('rect', { x, y, width, height, fill }); }
function drawCircle(cx, cy, r, fill) { return make('circle', { cx, cy, r, fill }); }
function drawLine(x1, y1, x2, y2, stroke, width, dash) {
return make('line', { x1, y1, x2, y2, stroke, 'stroke-width': width || 1, 'stroke-dasharray': dash || 'none' });
}
function drawText(x, y, str, anchor) {
const t = make('text', { x, y, 'text-anchor': anchor || 'start' });
t.textContent = str;
return t;
}How to add it to your website
- Download the file. Click Download HTML file above. You get one file called horizon-chart.html with everything inside.
- Change the data. Open the file in any code editor and find the DATA list near the bottom. Replace the names and numbers with your own.
- Change the colors and text. Colors are at the top of the style tag. The title, subtitle and main point are plain HTML near the top of the body.
- Put it online. Upload the file to any host, such as GitHub Pages, Netlify or your own server, or paste it into your site. There is no build step.
Questions people ask
How do you read a horizon chart?
Color tells you the direction, red for above normal and blue for below. Shade tells you the size, with darker meaning bigger. Taller color within a row means a larger value inside that band.
Why use a horizon chart instead of a line chart?
A horizon chart shows the same detail in about a quarter of the height. That lets you stack many series and compare them, which would be a mess with many lines.
How many bands should a horizon chart use?
Two to four bands work best. Three, like this template, is a good balance between detail and how easy it is to read.
What data works in a horizon chart?
Any series with a clear baseline, like normal temperature, a target or zero change. Values above the baseline use one color and values below use another.
More trends over time
011. Line Chart
Example: new members each month for a yoga studio app
012. Multi Line Chart
Example: average home prices in three neighborhoods over ten years
013. Area Chart
Example: solar power made each day by a family home
014. Stacked Area Chart
Example: hours watched each month on a streaming app, by device
015. Streamgraph
Example: weekly listening hours by genre on a radio app
016. Step Line Chart
Example: the interest rate on a savings account from 2021 to 2026
017. Sparkline
Example: daily sales for six products in a shop dashboard
018. Candlestick Chart
Example: daily share prices and volume for a made up robotics company