A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).
<nve-sparkline id="default"></nve-sparkline>
<script type="module">
const sparkline = document.querySelector("nve-sparkline#default");
sparkline.data = [18, 22, 20, 24, 19, 28, 25, 30];
</script>
Installation
<script type="module">
import '@nvidia-elements/core/sparkline/define.js';
</script>
<nve-sparkline id="default"></nve-sparkline>
<script type="module">
const sparkline = document.querySelector("nve-sparkline#default");
sparkline.data = [18, 22, 20, 24, 19, 28, 25, 30];
</script>
nve api.get nve-sparkline
Mark
Controls the visual representation of data points.
Mark Description line Renders data as a connected line to emphasize macro trend. area Renders data as a filled area beneath a line to emphasize magnitude over time. gradient Renders a line with gradient color treatment to communicate value intensity across the series. column Renders data as vertical columns for easy comparison of discrete values. winloss Renders outcomes as binary or ternary bars to highlight wins, losses, and optional ties.
Mark variants include line, area, gradient, column, and winloss to support trend and outcome signals.
<div nve-layout="row gap:md">
<nve-sparkline data="[14, 18, 17, 20, 19, 24, 21]"></nve-sparkline>
<nve-sparkline mark="area" data="[14, 18, 17, 20, 19, 24, 21]"></nve-sparkline>
<nve-sparkline mark="gradient" data="[14, 18, 17, 20, 19, 24, 21]"></nve-sparkline>
<nve-sparkline mark="column" data="[6, 10, 8, 16, 13, 18, 15]"></nve-sparkline>
<nve-sparkline mark="winloss" data="[5, -3, 2, -1, 4, 0, 3]"></nve-sparkline>
</div>
Status
Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.
Status Description accent Highlights important actions or draws attention to primary interactive elements. warning Indicates cautionary actions that require careful consideration before proceeding. success Represents positive outcomes, confirmations, or constructive actions. danger Signals destructive or irreversible actions that need extra attention and confirmation. scheduled Task has a scheduled future execution at a specific time. queued Task is waiting in line to begin after other tasks complete. pending Task is awaiting approval, user input, or external conditions before proceeding. starting Task is initializing and preparing to begin active execution. running Task is actively executing and making progress. restarting Task restarts after an interruption or reset. stopping Task is gracefully shutting down and completing cleanup operations. finished Task has completed successfully with the expected outcome. failed Task encountered an error and did not complete as intended. unknown Task status remains unknown or unavailable. ignored Task was intentionally skipped or excluded from execution.
Semantic statuses apply task, support, and trend color mappings.
<div nve-layout="row gap:md">
<nve-sparkline status="accent" mark="area" data="[3, 2, 10, 8, 4, 6, 9]"></nve-sparkline>
<nve-sparkline status="danger" mark="area" data="[15, 14, 12, 9, 8, 7, 5]"></nve-sparkline>
<nve-sparkline status="warning" mark="area" data="[8, 9, 7, 10, 9, 8, 9]"></nve-sparkline>
<nve-sparkline status="success" mark="area" data="[5, 7, 8, 9, 12, 14, 15]"></nve-sparkline>
</div>
Inline with Text
Sparklines inherit font size and flow inline with surrounding text and metrics.
<div nve-layout="column gap:lg">
<p nve-text="body loose">
This week's lane keeping safety score trend
<nve-sparkline
mark="area"
status="success"
data="[86, 87, 86, 88, 89, 90, 92, 93]"
aria-label="lane keeping safety score trend"
></nve-sparkline>
shows a steady rise after an early dip, with decreasing interventions per shift:
<nve-sparkline
mark="column"
status="accent"
data="[16, 14, 15, 13, 12, 11, 10]"
aria-label="lane keeping interventions per shift"
></nve-sparkline
>, and predominantly successful route outcomes:
<nve-sparkline
mark="winloss"
status="success"
data="[1, 1, -1, 1, 0, 1, 1]"
aria-label="lane keeping route outcomes"
></nve-sparkline
>.
</p>
</div>
This week's lane keeping safety score trend
shows a steady rise after an early dip, with decreasing interventions per shift:
, and predominantly successful route outcomes:
.
Data Grid
Embed sparklines in grid cells to add compact trend context to tabular data.
<nve-grid>
<nve-grid-header>
<nve-grid-column>Autonomy Service</nve-grid-column>
<nve-grid-column>Safety Score</nve-grid-column>
<nve-grid-column>Interventions / Shift</nve-grid-column>
<nve-grid-column>Route Outcome</nve-grid-column>
</nve-grid-header>
<nve-grid-row>
<nve-grid-cell>Lane Keeping</nve-grid-cell>
<nve-grid-cell>
<nve-sparkline
aria-label="Lane Keeping 30 day safety score trend"
mark="area"
status="success"
min="0"
max="100"
data="[86, 87, 86, 88, 89, 90, 92, 93]"
size="md"
></nve-sparkline>
</nve-grid-cell>
<nve-grid-cell>
<nve-sparkline
aria-label="Lane Keeping interventions per shift"
mark="column"
status="success"
min="0"
max="50"
data="[12, 11, 12, 10, 9, 8, 7, 6]"
size="md"
></nve-sparkline>
</nve-grid-cell>
<nve-grid-cell>
<nve-sparkline
aria-label="Lane Keeping route outcomes"
mark="winloss"
data="[1, 1, 1, 0, 1, 0, 1, 1]"
size="md"
></nve-sparkline>
</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>Object Detection</nve-grid-cell>
<nve-grid-cell>
<nve-sparkline
aria-label="Object Detection 30 day safety score trend"
mark="area"
status="warning"
min="0"
max="100"
data="[76, 88, 72, 79, 85, 70, 83, 74]"
size="md"
></nve-sparkline>
</nve-grid-cell>
<nve-grid-cell>
<nve-sparkline
aria-label="Object Detection interventions per shift"
mark="column"
status="warning"
min="0"
max="50"
data="[18, 20, 17, 19, 20, 21, 19, 22]"
size="md"
></nve-sparkline>
</nve-grid-cell>
<nve-grid-cell>
<nve-sparkline
aria-label="Object Detection route outcomes"
mark="winloss"
data="[1, 0, -1, 1, 0, -1, 0, 1]"
size="md"
></nve-sparkline>
</nve-grid-cell>
</nve-grid-row>
<nve-grid-row>
<nve-grid-cell>Path Planning</nve-grid-cell>
<nve-grid-cell>
<nve-sparkline
aria-label="Path Planning 30 day safety score trend"
mark="area"
status="danger"
min="0"
max="100"
data="[58, 54, 49, 45, 40, 36, 31, 27]"
size="md"
></nve-sparkline>
</nve-grid-cell>
<nve-grid-cell>
<nve-sparkline
aria-label="Path Planning interventions per shift"
mark="column"
status="danger"
min="0"
max="50"
data="[24, 26, 29, 31, 34, 36, 39, 42]"
size="md"
></nve-sparkline>
</nve-grid-cell>
<nve-grid-cell>
<nve-sparkline
aria-label="Path Planning route outcomes"
mark="winloss"
data="[1, -1, 0, -1, -1, -1, 0, -1]"
size="md"
></nve-sparkline>
</nve-grid-cell>
</nve-grid-row>
</nve-grid>
Autonomy Service
Safety Score
Interventions / Shift
Route Outcome
Lane Keeping
Object Detection
Path Planning
Size
Controls the visual scale of an element to match its importance and available space.
Size Description xs Extra small size for minimal elements or highly dense layouts. sm Compact size for dense layouts or secondary elements with less visual prominence. md Standard size that works well in most contexts and provides balanced visibility. lg Larger size for emphasizing important elements or improving touch targets in spacious layouts. xl Extra large size for emphasizing elements or sparse layouts.
Explicit size tokens set fixed sparkline height independent of text context.
<div id="sparkline-sizes" nve-layout="row gap:md">
<nve-sparkline size="xs"></nve-sparkline>
<nve-sparkline size="sm"></nve-sparkline>
<nve-sparkline size="md"></nve-sparkline>
<nve-sparkline size="lg"></nve-sparkline>
<nve-sparkline size="xl"></nve-sparkline>
</div>
<script type="module">
const sparklines = document.querySelectorAll("#sparkline-sizes > nve-sparkline");
for (const sparkline of sparklines) {
sparkline.data = [9, 12, 11, 13, 15, 14, 16];
}
</script>
Without a size attribute, height scales with the parent text size for typographic alignment.
<div id="inline-sparkline-sizes" nve-layout="column gap:md">
<div nve-layout="row gap:sm" nve-text="heading">
<span>heading</span>
<nve-sparkline></nve-sparkline>
</div>
<div nve-layout="row gap:sm" nve-text="body">
<span>body</span>
<nve-sparkline></nve-sparkline>
</div>
<div nve-layout="row gap:sm" nve-text="label sm">
<span>label sm</span>
<nve-sparkline></nve-sparkline>
</div>
</div>
<script type="module">
const sparklines = document.querySelectorAll("#inline-sparkline-sizes > div[nve-text] > nve-sparkline");
for (const sparkline of sparklines) {
sparkline.data = [9, 12, 11, 13, 15, 14, 16];
}
</script>
Interpolation
Controls how the chart connects intermediate values between points in a data series. Defaults to linear.
Interpolation Description linear Connects points with straight line segments. smooth Connects points with smooth bezier curves. step Connects points with horizontal and vertical step segments.
Interpolation controls linear, smooth, or step transitions between points.
<div id="sparkline-interpolations" nve-layout="row gap:md">
<nve-sparkline mark="area" interpolation="linear"></nve-sparkline>
<nve-sparkline mark="area" interpolation="smooth"></nve-sparkline>
<nve-sparkline mark="area" interpolation="step"></nve-sparkline>
</div>
<script type="module">
const sparklines = document.querySelectorAll("#sparkline-interpolations > nve-sparkline");
for (const sparkline of sparklines) {
sparkline.data = [6, 10, 8, 16, 13, 18, 15];
}
</script>
Symbols
Symbols denote specific data points in line, area, and gradient marks.
<div id="sparkline-symbols" nve-layout="row gap:md">
<nve-sparkline denote-last></nve-sparkline>
<nve-sparkline denote-first denote-last></nve-sparkline>
<nve-sparkline denote-min denote-max></nve-sparkline>
</div>
<script type="module">
const sparklines = document.querySelectorAll("#sparkline-symbols > nve-sparkline");
for (const sparkline of sparklines) {
sparkline.data = [12, 8, 15, 10, 18, 14, 11];
}
</script>
Data Domain
Fixed min and max values define a shared vertical domain to ensure comparability across adjacent sparklines.
<div nve-layout="column gap:md align:left" nve-text="body lg">
<nve-sparkline min="0" max="100" mark="area" status="accent" data="[80, 85, 90, 95, 100]"></nve-sparkline>
<nve-sparkline min="0" max="100" mark="area" status="accent" data="[40, 45, 50, 55, 60]"></nve-sparkline>
<nve-sparkline min="0" max="100" mark="area" status="accent" data="[0, 5, 10, 15, 20]"></nve-sparkline>
</div>
Zero Line
The chart renders a zero baseline when the data includes both positive and negative values.
<div nve-layout="row gap:md">
<nve-sparkline aria-label="mixed values" mark="area" data="[-3, 2, 5, -1, 3, -2, 4]"></nve-sparkline>
<nve-sparkline aria-label="mostly negative values" mark="gradient" data="[-8, -5, -2, 1, -3, -6, -4]"></nve-sparkline>
<nve-sparkline aria-label="mixed values column" mark="column" data="[-3, 2, 5, -1, 3, -2, 4]"></nve-sparkline>
</div>
Interval Length
Controls spacing between points in a line, in em (1 = chart height). Defaults to 0.6.
IntervalLength Description number
Interval length adjusts spacing between points for line marks, from compact to spacious.
<div id="sparkline-intervals" nve-layout="row gap:md">
<nve-sparkline interval-length="0.3"></nve-sparkline>
<nve-sparkline interval-length="0.6"></nve-sparkline>
<nve-sparkline interval-length="2.0"></nve-sparkline>
</div>
<script type="module">
const sparklines = document.querySelectorAll("#sparkline-intervals > nve-sparkline");
for (const sparkline of sparklines) {
sparkline.data = [10, 20, 15, 25, 18];
}
</script>
Custom Styling
CSS custom properties are available to adjust dimensions and visual styling.
<nve-sparkline
aria-label="custom sparkline"
mark="gradient"
interpolation="smooth"
data="[8, 14, 9, 17, 13, 21, 16]"
denote-last
style="
--height: 120px;
--accent-color: var(--nve-sys-layer-canvas-background);
--accent-radius: 5px;
--accent-border-width: 3px;
--line-width: 2.5px;
--line-color: var(--nve-ref-color-blue-cobalt-1100);
--gradient-max-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100) 45%, transparent);
--gradient-min-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100), transparent 90%);
"
></nve-sparkline>
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release
Docs Preview
API Documentation
Fully Themeable
beta
Robust unit test coverages
Passed API Review
Passed Designer VQA Review
Included in library package
stable
No known outstanding AA WCAG issues
No known outstanding performance issues
Adapts to different screen/container sizes
No breaking API changes for at least 90 days