Sparkline

Sparkline sits beside a KPI, inside a table cell or in a line of text to show whether a measure is rising or falling. It has no tooltip or axes and draws in the surrounding text colour.

Install

bashnpx shadcn@4.18.0 add @siteplane/sparkline

Import it from @/siteplane/components/sparkline. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Line Chart: Pick Line Chart when readers need exact values, dates or a shared axis.
• vs Area Chart: Pick Area Chart for a full-size filled trend with a tooltip.

Rules

• Pass data as an array of numbers, or an array of arrays for several series on one scale.
• Write a label that says what is shown and over which period, and print the actual figure beside it.
• Set the colour from the parent text colour (for example a success or destructive class) or with color.
• Give it a width class such as w-24 and a pixel height in tight spots.
• Set includeZero={false} when small changes on a large value would otherwise look flat.

Reference

• Sparkline docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Charts. Read the installed source under src/siteplane before relying on an API.