Line Chart Card

The line chart from the dashboard - a Recharts line over a soft area gradient, Weekly/Monthly/Yearly switcher, delta chip, and a count-up headline with a pulsing active dot that follows the cursor. Curved by default; one prop switches to sharp, straight-segment corners.

Revenue

$18,240

+9.4%

Installation

Line Chart Card is part of BoardUI Pro.

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

Pro access

Line Chart Card is a Pro component.

Your BoardUI Pro license unlocks this component and all of its source files. Activate your license once, then install it directly into your project with the CLI.

01

Activate your license

Use the key from your Lemon Squeezy purchase email. You only need to do this once per machine.

npx boardui@latest login YOUR_LICENSE_KEY
02

Install the component

The CLI copies the source and resolves every BoardUI and npm dependency for you.

npx boardui@latest add line-chart-card

This component is included in BoardUI Pro

Get BoardUI Pro now and install it right away.

Sharp corners

shape="sharp"joins the points with straight segments - same gradient, dot, and hover behaviour, just a crisper line for data where the in-between values shouldn't read as interpolated.

Revenue

$18,240

+9.4%
{/* Straight segments between points instead of the monotone curve */}<LineChartCard shape="sharp" />