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.
Update the import paths to match your project setup.
Related blocks
- API Keys
A user connected to a blinking server rack by packet-traveling rails while a live API key scrambles into place in an issued chip.
- Bot Radar
A rotating radar sweep with rings and crosshairs where user blips glow emerald and bot blips flash red with a blocked label.
- Mockup: CLI
A terminal window typing a CLI command char-by-char with staggered output lines and a blinking cursor, looping forever.
- Mockup: Contribution Heatmap
A GitHub-style contribution heatmap with staggered cell reveal, count-up total, hover tooltips, and four color themes.
