Sparkline ChartPro
Pro
Compact bar and line charts used for quick trend visualization.
Sparkline Bar Playground
Sparkline Bar Playground
Preview
Code
Controls
Size:
Large
Medium
Small
Trend:
Positive
Negative
Highlight Last:
Sparkline Line Playground
Sparkline Line Playground
Preview
Code
Controls
Size:
Large
Medium
Small
Trend:
Positive
Negative
Variant:
Curvy
Zigzag
Area Fill:
Installation
You can add the sparkline chart component to your project manually:
1
Copy and paste the following code into your project.
Loading...
2
Update the import paths to match your project setup.
Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.
Basic Usage
Sparkline Bar
import { SparklineBar } from '@versaui/ui/components/Charts';
const data = [
{ value: 20 }, { value: 32 }, { value: 56 },
{ value: 64 }, { value: 48 }, { value: 72 },
{ value: 88 }, { value: 96 }, { value: 104 },
];
<SparklineBar data={data} />Sparkline Line
import { SparklineLine } from '@versaui/ui/components/Charts';
const data = [
{ value: 20 }, { value: 32 }, { value: 56 },
{ value: 64 }, { value: 48 }, { value: 72 },
{ value: 88 }, { value: 96 }, { value: 104 },
];
<SparklineLine data={data} variant="curvy" />Sizes
Three size variants matching Figma specifications:
{/* Large (default) — 104px height */}
<SparklineBar data={data} size="large" />
{/* Medium — 88px height */}
<SparklineBar data={data} size="medium" />
{/* Small — 56px height */}
<SparklineBar data={data} size="small" />Trend Direction
Semantic trend coloring using success/error tokens:
{/* Positive trend (default) — uses success tokens */}
<SparklineBar data={risingData} trend="positive" />
{/* Negative trend — uses error tokens */}
<SparklineBar data={fallingData} trend="negative" />Line Variants
Two curve interpolation styles for sparkline lines:
{/* Smooth curves (default) */}
<SparklineLine data={data} variant="curvy" />
{/* Angular/linear segments */}
<SparklineLine data={data} variant="zigzag" />Area Fill
Optional gradient fill beneath the sparkline line:
<SparklineLine data={data} showArea />Highlighted Last Bar
Visually emphasize the latest data point:
{/* Highlighted (default) */}
<SparklineBar data={data} highlightLast />
{/* Uniform bars */}
<SparklineBar data={data} highlightLast={false} />In a Metric Card
Sparklines are designed to sit inside compact card layouts:
<div className="flex items-center gap-4 p-4">
<div>
<div className="text-h7">Revenue</div>
<div className="text-h5">$12,450</div>
</div>
<SparklineBar data={revenueData} size="small" />
</div>Edge Cases
{/* Empty dataset — renders empty container */}
<SparklineBar data={[]} />
{/* Single data point */}
<SparklineLine data={[{ value: 50 }]} />
{/* Null values — treated as zero (bar) or gaps (line) */}
<SparklineBar data={[{ value: 10 }, { value: null }, { value: 30 }]} />Accessibility
- Screen readers: Charts use
role="img"with descriptivearia-label - Reduced motion: All animations disabled when
prefers-reduced-motion: reduceis set - Theme adaptive: Automatically adapts colors across all Versa UI themes using semantic tokens
SparklineBar Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | SparklineDataPoint[] | — | Required. Array of data points with numeric values. |
trend | 'positive' | 'negative' | 'positive' | Semantic trend direction — maps to success/error color tokens. |
size | 'large' | 'medium' | 'small' | 'large' | Chart size variant controlling container height. |
highlightLast | boolean | true | Visually emphasize the last bar with a stronger color. |
className | string | '' | Additional CSS classes for the root element. |
SparklineLine Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | SparklineDataPoint[] | — | Required. Array of data points with numeric values. |
trend | 'positive' | 'negative' | 'positive' | Semantic trend direction — maps to success/error color tokens. |
size | 'large' | 'medium' | 'small' | 'large' | Chart size variant controlling container height. |
variant | 'curvy' | 'zigzag' | 'curvy' | Curve interpolation style — smooth spline or linear segments. |
showArea | boolean | false | Show a gradient area fill beneath the line. |
className | string | '' | Additional CSS classes for the root element. |
SparklineDataPoint
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | undefined | — | Numeric value for this data point. Null/undefined values are treated as zero (bar) or gaps (line). |