SparkLine

stable

Inline SVG micro-chart for trend visualization in table cells

import { SparkLine } from "@nodus/design-system/finance"

Uptrend

Downtrend

Flat

Loading demo…

Props

Prop	Type	Default	Description
`data`req	`number[]`	—	Array of numeric values to plot
`width`	`number`	80	Width of the SVG in pixels
`height`	`number`	24	Height of the SVG in pixels
`strokeWidth`	`number`	1.5	Stroke width in pixels
`severityColored`	`boolean`	—	Color the line by overall change severity
`breakpoints`	`ThresholdBreakpoints`	—	Custom severity breakpoints when severityColored is true
`label`	`string`	—	Accessible label for the chart

datarequired

Type number[]Default —

Array of numeric values to plot

width

Type numberDefault 80

Width of the SVG in pixels

height

Type numberDefault 24

Height of the SVG in pixels

strokeWidth

Type numberDefault 1.5

Stroke width in pixels

severityColored

Type booleanDefault —

Color the line by overall change severity

breakpoints

Type ThresholdBreakpointsDefault —

Custom severity breakpoints when severityColored is true

label

Type stringDefault —

Accessible label for the chart

MobileWorks As-Is

Spark line scales with container. Works at any viewport.

Design Rationale

This component was designed to express:

Change/delta display with severity-based coloring for P&L and returns

Inline proportional bar for ratio visualization in table cells

Was this helpful?