import { Sparkline } from '@wick-charts/react';
 
<Sparkline data={data} />

A self-contained miniature chart for tables, KPIs, and dashboards. Renders without any of the chrome (<YAxis>, <TimeAxis>, etc.) and includes a lightweight value badge.

A self-contained miniature chart for tables, KPIs, and dashboards. Renders without any of the chrome (<YAxis>, <TimeAxis>, etc.) and includes a lightweight value badge.

Props

dataTimePointInput[]

Data points plotted by the sparkline. A flat TimePointInput[] (time may be ms or a Date) — the sparkline only ever shows one tiny line/bar.

timenumber | Date

Unix milliseconds, or a Date (converted via getTime() internally).

valuenumber

Y-axis value at this point. Drives the line height / bar height.

flow?
{
  capacity: number;
  align?: 'left' | 'right' | 'offscreen'
}

Streaming-window mode: viewport is fixed at capacity bars wide. Pass at least two seed points in data so the initial window can infer the tick interval.

align controls where the seed sits at mount:

  • 'right' *(default)* — seed flush with the right edge; each tick

shifts the viewport left by one interval and the new tick lands at the right edge.

  • 'left' — seed flush with the left edge; the viewport is held in

place until empty bars on the right are consumed, then normal tail-scroll resumes.

  • 'offscreen' — seed starts one interval past the right edge so the

first tick's tail-scroll animates it onto canvas (a brief "drive-in" effect).

themeChartTheme

Visual theme. Drives series colour, background gradient, and the change-direction colours used in the value block.

variant?SparklineVariant

'line' (default) or 'bar'

valuePosition?SparklineValuePosition

Where to show the value label

format?ValueFormatter

Custom format for the value. Same shape as ValueFormatter used elsewhere in the API.

label?string

Label text above the value

sublabel?string

Sublabel text below the value (defaults to the change %)

color?string

Line/bar color override (defaults to theme)

negativeColor?string

Secondary color for negative bars

area?{ visible: boolean; }

Show area fill under line

areaFill?Deprecatedboolean
yRange?{ min?: AxisBound; max?: AxisBound }

Fixed Y-axis bounds. Omit a side (or pass 'auto') to keep that edge auto-scaled. Useful to pin a baseline ({ min: 0 }) or hold a stable window so streaming ticks don't rescale the line.

Each bound is an AxisBound: a number, 'auto', a percentage offset string ('+10%'), or a (values) => number reducer.

width?number

Chart width (default: 140)

height?number

Overall height (default: 48)

strokeWidth?number

Stroke width in CSS pixels (default: 1.5)

gradient?boolean

Show chart background gradient (default: true)

style?CSSProperties

Container style override