Line Chart

A pure CSS/SVG dual-series line chart with horizontal grid, axis labels, crosshair hover, and a tooltip with series values and total.

Organic
Paid Ads
05k10k20kJanFebMarAprMayJunJulAugSepOct

Line Chart is a dual series chart built with pure CSS and SVG, no charting library involved. It renders a horizontal grid, axis labels, a crosshair that follows the cursor, and a tooltip showing per series values plus the total. Data points are props. Built with React and Tailwind CSS. A lightweight analytics visual for dashboards and marketing pages where a full chart library is overkill.

Installation

Copy and paste the following code into your project.

Unlock the full library

Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.

Get All Access

Update the import paths to match your project setup.