SparkCard
Small dashboard card with an inline sparkline chart.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <SparkCard />
When to Use
- Display a metric with a compact inline trend chart in a dashboard strip.
- Use alongside
KpiCardwhen you want the sparkline as the main visual focus rather than a delta badge. - Grid 2–4 SparkCards together for a metrics overview row.
Revenue
$24,800
Sessions
8,412
Bounce Rate
34.2%
Page Views
94,210
Errors
12
Uptime
99.98%
SLA
100%
Incidents
0
Switch variant to compare Default, Bordered, and Filled styling.
Revenue
$24,800
Sessions
8,412
Bounce Rate
34.2%
Switch size to see how the card scales.
Revenue
$24,800
Sessions
8,412
API Reference
SparkCard
| Property | Type | Default | Description |
|---|---|---|---|
| Label | string? | null | Metric label rendered above the value. |
| Value | string? | null | The primary metric value rendered in large text. |
| Data | IEnumerable<double>? | null | Numeric series rendered as an inline SVG polyline sparkline. Requires at least 2 points. |
| ChildContent | RenderFragment? | null | Custom chart slot. When provided, replaces the built-in SVG sparkline. Useful for rendering a Sparkline component with custom colors. |
| Size | SparkCardSize | Medium | Overall card size. Values: Small, Medium, Large. |
| Variant | SparkCardVariant | Default | Visual style. Default = standard card border, Bordered = thicker 2px border, Filled = muted background. Values: Default, Bordered, Filled. |
| Class | string? | null | Additional CSS classes merged onto the card root. |