Multi-Line Chart — HTML CSS JS Multi-Series Lines

When you need to compare how several things trend over the same period — desktop vs. mobile vs. tablet traffic, revenue across regions, temperatures across cities — you want them on one chart, sharing one scale, so the comparison is direct. This snippet builds a multi-series line chart in plain HTML, CSS, SVG, and vanilla JavaScript: multiple lines drawn as SVG polylines, a legend that toggles each series, point tooltips, and a y-scale that adapts to whichever series are visible — no charting library.

Polylines on a shared, adaptive scale

Each series is drawn as an SVG polyline whose points come from mapping the data through px(i) (evenly spacing points across the width by index) and py(v, max) (scaling values up the height, inverted for SVG's downward y). All visible series share one max, computed from the highest value across only the visible series and rounded up to a clean hundred — so the lines are directly comparable, and the scale tightens automatically when you hide a tall series, giving the remaining lines more vertical room.

A legend that toggles series

The legend lists every series with its colour. Clicking one hides or shows that line and re-renders, which recomputes the shared max and redraws the remaining lines on the new scale — exactly how Chart.js and dashboard charts behave. A guard prevents hiding the last visible series, and hidden entries stay in the legend, dimmed, so they're easy to bring back. This toggling is what makes a busy multi-line chart usable: readers can isolate the series they care about.

Points for precise reading

On top of each line sit small circles at every data point — white-filled with a coloured stroke so they read as markers against any line colour. Each carries its series name, label, and value as data attributes, so hovering shows a tooltip with the exact figure at that point. A single delegated mousemove listener handles every point across every series via closest('.mlc-pt'), and the tooltip follows the cursor using getBoundingClientRect.

Gridlines and aligned x-labels

Horizontal gridlines give the eye reference levels, and the x-axis labels render as a flex row beneath the SVG, justified to match the evenly-spaced points. Keeping the labels in HTML rather than SVG text means they inherit normal font rendering and wrap or truncate with CSS if needed.

Data-driven and drop-in

The chart renders from a LABELS array and a SERIES array of { name, color, data }. Add a series, change the labels, or swap the numbers and everything — lines, legend, scale, tooltips, x-labels — follows. Because it's dependency-free SVG, it's crisp at any size and a clear reference for multi-series scaling and the polyline-from-data pattern that underpins every line chart.