Home / Trends Over Time / Line Chart
Line Chart in HTML, CSS and JavaScript
A line chart is a chart that shows how a number changes over time by joining data points with a line. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows new members each month for a yoga studio app.
What is a line chart?
A line chart is a chart that shows how a number changes over time by joining data points with a line. Time runs from left to right, and the height of the line shows the value at each moment.
Line charts are the best way to show a trend. The eye follows the line and sees at once whether things are going up, going down or repeating, like a rush of new members every January.
At a glance
- Best for
- One number tracked over days, months or years
- Data you need
- A date and a number for each point in time
- Skip it when
- Comparing separate items with no order. Use a bar chart.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a line chart
- Sign ups, sales or visitors per month
- Prices or rates over time
- Temperatures, weights or any reading taken regularly
- Showing seasonal patterns, like a yearly peak
When to pick another chart
- Multi Line Chart: you want to compare two to five things over the same time
- Area Chart: you want to show volume, like total energy made
- Step Line Chart: the value changes in jumps and stays flat between them
What you get in this template
- A smooth SVG line with a point for every month
- A crosshair that follows the mouse and shows the value and the change from the month before
- Arrow keys move the crosshair for keyboard users
- A switch between two years and the last 12 months
- Notes on the chart that explain the January peaks
- The line draws itself from left to right on load
How the code works
Here is a short version of the idea behind this line chart. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const values = [320, 340, 310, 420, 460, 510, 480, 530];
const w = 600, h = 300;
const max = Math.max(...values);
const points = values.map((v, i) => [40 + i * (w - 60) / (values.length - 1), h - 30 - v / max * (h - 60)]);
make('path', {
d: points.map((p, i) => (i ? 'L' : 'M') + p[0] + ',' + p[1]).join(''),
fill: 'none', stroke: '#0f7b8a', 'stroke-width': 3
});
points.forEach(p => drawCircle(p[0], p[1], 4, '#0f7b8a'));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 line-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 I make a line chart in HTML without a library?
Turn each value into an x and y position, then join the positions into one SVG path using M for the first point and L for the rest. This template does that in plain JavaScript and adds axes, a crosshair and labels.
Does a line chart have to start at zero?
No, not always. A line chart shows change, so you can zoom in on the range of your data. For counts like members or sales, starting at zero is still the most honest choice, and this template does that.
Should I use a smooth or a straight line?
Straight lines are the most exact. A gentle curve is easier on the eye for monthly data. Avoid strong smoothing, because it can draw peaks that are not in the data.
When should I use a bar chart instead of a line chart?
Use bars when the items have no order, like products or cities. Use a line when the items follow each other in time and you care about the trend.
More trends over time
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
019. Slope Chart
Example: guest ratings for eight hotels in 2025 and 2026