Home / Trends Over Time / Area Chart
Area Chart in HTML, CSS and JavaScript
An area chart is a line chart with the space under the line filled in. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows solar power made each day by a family home.
What is a area chart?
An area chart is a line chart with the space under the line filled in. The filled shape shows volume, so it works well for amounts that pile up, like energy made, water used or money earned.
The fill makes the chart easier to read at a glance and gives a stronger sense of how much, not only which way. A soft gradient keeps the shape light so the line on top stays sharp.
At a glance
- Best for
- One amount over time where volume matters
- Data you need
- A date and a number for each point in time
- Skip it when
- Several overlapping series. The fills hide each other.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a area chart
- Energy made or used each day
- Website visits or revenue over time
- Water, fuel or data usage
- Any total that builds up over a period
When to pick another chart
- Line Chart: you only care about the trend, not the volume
- Stacked Area Chart: your total is made of several parts
What you get in this template
- A gradient fill made with an SVG linearGradient
- A dashed daily average line with its value written on it
- A crosshair that says how far each day is above or below average
- Cloudy days are flagged in the tooltip
- The area reveals from left to right on load
- Arrow key support and a data table
How the code works
Here is a short version of the idea behind this area chart. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const values = [24.1, 26.3, 25.8, 18.2, 12.4, 21.7, 27.9];
const x = i => 40 + i * 90, y = v => 280 - v / 35 * 260;
const edge = values.map((v, i) => x(i) + ',' + y(v));
make('path', {
d: 'M' + edge.join('L') + 'L' + x(values.length - 1) + ',280L' + x(0) + ',280Z',
fill: '#e8a300', 'fill-opacity': 0.3
});
make('path', { d: 'M' + edge.join('L'), fill: 'none', stroke: '#e8a300', 'stroke-width': 3 });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 area-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
What is the difference between a line chart and an area chart?
They show the same data. An area chart fills the space under the line, which puts more weight on the amount. Use a line for the trend and an area when the size of the total matters.
Does an area chart need to start at zero?
Yes. The filled area stands for the amount, so if the axis starts above zero, the area lies about the size. Line charts can zoom in, area charts should not.
How do I add a gradient to an SVG area chart?
Add a linearGradient inside defs with two stops, a stronger color at the top and a faint one at the bottom, then set the area fill to url(#yourId). The template shows the exact code.
Can I show more than one series in an area chart?
You can, but overlapping fills get muddy. Stack the series in a stacked area chart, or use a multi line chart instead.
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
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
019. Slope Chart
Example: guest ratings for eight hotels in 2025 and 2026