# Sparkline

Source: https://lumeo.nativ.sh/components/sparkline

# Sparkline

Compact inline SVG trend chart — drop anywhere: table cells, KPI strips, notification badges.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Sparkline />

## When to Use

-   Show a trend inline next to a number, label, or status
-   Add tiny charts to DataGrid/Table cells without reaching for the full Chart component
-   Compose Tremor-style KPI strips where space is limited
-   Prefer [SparkCard](/components/spark-card) when you need a framed tile, or [Chart](/components/chart) for axes, tooltips, and legends

Preview Code

Basic line

$12,450

+4.2%

Preview Code

Area variant

Preview Code

Bars variant

Preview Code

With last-point dot

Preview Code

In a table cell

Ticker

Price

Change

Trend

AAPL

$189.42

+1.8%

MSFT

$412.90

+0.6%

TSLA

$243.11

\-2.3%

NVDA

$916.55

+3.4%

Preview Code

Type (interactive)

Switch chart type to compare Line, Area, and Bars.

Line Area Bars

Preview Code

Color variants

Revenue

$48,290

Errors

1,204

Sessions

8,492

## API Reference

Property

Type

Default

Description

Values

IEnumerable<double>?

null

Series to plot. If null/empty, a muted baseline is rendered.

Height

int

32

Rendered pixel height (also the viewBox Y).

Color

string?

var(--color-primary)

CSS color for stroke/fill. Accepts any CSS color or var().

Type

SparkType

Line

Line, Area, or Bars.

ShowArea

bool

false

Shortcut — fill under the line when Type=Line.

ShowLast

bool

false

Render a small dot at the last value.

StrokeWidth

double

1.5

Line stroke width (unscaled via vector-effect).

AriaLabel

string?

"Trend"

Accessible label for the SVG role=img.

Class

string?

null

Extra classes appended to the root SVG.

## Related Components

-   [SparkCard](/components/spark-card) — Framed tile wrapping a sparkline with label/value
-   [KpiCard](/components/kpi-card) — KPI tile with a SparkContent slot
-   [Chart](/components/chart) — Full-featured charting for when a sparkline is not enough