Lumeo

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 KpiCard when 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
Bars
8,412
Area
$24,800
Last Point
34.2%
Revenue
$24,800
Errors
12

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

  • KpiCard — Richer KPI tile with delta badge and icon slot.
  • Sparkline — Standalone inline SVG trend chart primitive.
  • Statistic — Big-number statistic display with label and unit.