Sparkline

ImportCopy Anchor Link

import { Sparkline } from '@nizivo/charts/sparkline';

Static or interactiveCopy Anchor Link

Server. Sparkline has no 'use client' and imports no client module (island-graph.test.ts in packages/charts/test/unit); it has no interaction. The previews on this page import it from @nizivo/charts/sparkline, and the docs smoke check fails any page outside the AreaChart, BarChart and DonutChart pages that loads the charts island. Prefer the subpath to the barrel: under webpack without optimizePackageImports the barrel has not been measured. How to choose.

ExamplesCopy Anchor Link

BasicCopy Anchor Link

import type { JSX } from 'react';
import { Sparkline } from '@nizivo/charts/sparkline';

const UP = [12, 14, 13, 17, 16, 19, 18, 22, 21, 24, 23, 27];

export function SparklineExample(): JSX.Element {
  return <Sparkline data={UP} />;
}

DownCopy Anchor Link

import type { JSX } from 'react';
import { Sparkline } from '@nizivo/charts/sparkline';

const DOWN = [27, 25, 26, 22, 23, 20, 21, 18, 19, 16, 17, 15];

export function SparklineDownExample(): JSX.Element {
  return <Sparkline data={DOWN} />;
}

LabelledCopy Anchor Link

import type { JSX } from 'react';
import { Sparkline } from '@nizivo/charts/sparkline';

const UP = [12, 14, 13, 17, 16, 19, 18, 22, 21, 24, 23, 27];

export function SparklineLabelledExample(): JSX.Element {
  return <Sparkline data={UP} label="Sales trend, up 125% over 12 weeks" />;
}

GapCopy Anchor Link

import type { JSX } from 'react';
import { Sparkline } from '@nizivo/charts/sparkline';

const UP = [12, 14, 13, 17, 16, 19, 18, 22, 21, 24, 23, 27];

export function SparklineGapExample(): JSX.Element {
  return <Sparkline data={[...UP.slice(0, 5), null, ...UP.slice(6)]} area={false} dot={false} />;
}

PropsCopy Anchor Link

Server component. Props: SparklineProps<T>. Source: src/sparkline/sparkline.tsx.

• Also takes every <span> attribute except children.

data holds the values themselves (data={[12, 14, 13]}), or any data that y reads. y is an Accessor, as AreaChart's: a key of the datum (y="sales") or a (datum, index) => value function, so one series can feed an AreaChart and a Sparkline. It is optional when the data are numbers (SparklineValue, exported: a number, null or undefined), and TypeScript requires it otherwise: SparklineProps<T> is a conditional type, which the table above lists as one optional y. A value that is not a finite number leaves a gap.

There is no trend prop: the trend is the last defined value against the first.

Other exportsCopy Anchor Link

SparklineBaseProps type

import type { SparklineBaseProps } from '@nizivo/charts/sparkline'

Name	Type	Default	Description
area	boolean	true	The 10% wash under the line.
curve	CurveFactory	curveMonotoneX	Any d3-shape curve factory.
datarequired	readonly T[]	–	The data in order, evenly spaced along x: the values themselves, or data that y reads.
dot	boolean	true	The last value's dot.
label	string	–	An accessible name ("Sales, up 28% over 30 days"): the sparkline becomes one image. aria-label or aria-labelledby do the same; without a name it is decorative (aria-hidden).

SparklineProps type

import type { SparklineProps } from '@nizivo/charts/sparkline'

Sparkline's props. y reads each datum's value as AreaChart's does (a key or a (datum, index) function, _core/api.ts), so one series feeds both; data that holds the values needs none.

type SparklineProps<T = SparklineValue> = SparklineBaseProps<T> & ([T] extends [SparklineValue] ? { /** The value of a datum. @default the datum itself */ y?: Accessor<T, SparklineValue>; } : unknown extends T ? { /** The value of a datum. @default the datum itself */ y?: Accessor<T, SparklineValue>; } : { /** The value of a datum. */ y: Accessor<T, SparklineValue>; })

The props of Sparkline, listed above.

SparklineValue type

import type { SparklineValue } from '@nizivo/charts/sparkline'

A value of the line: a number that is not finite leaves a gap.

type SparklineValue = number | null | undefined

Data attributes and slotsCopy Anchor Link

up and flat draw in chart/primary; down draws in chart/neutral.

CSS hooksCopy Anchor Link

Layers: nz.components. Classes: .nz-chart-area, .nz-chart-line, .nz-chart-svg, .nz-sparkline, .nz-sparkline-dot, .nz-sparkline-halo. Runtime variables: --nz-surface.

--nz-sparkline-width and --nz-sparkline-height are Figma 03's 112 × 36 px; Figma 04's KPI tile uses 88 × 28 px. --nz-sparkline-halo is the ring around the end dot: the surface behind the sparkline. When the hook is unset, the ring takes the shared --nz-surface that @nizivo/react's Card declares for its children (KpiTile and TrendCard are Cards, so a tinted tile's halo is its own surface), else --nz-bg-surface. Charts read --nz-surface only if it is there: without @nizivo/react on the page it is unset and the halo is --nz-bg-surface, and @nizivo/charts does not depend on @nizivo/react (M42).

AccessibilityCopy Anchor Link

• Without label, the whole sparkline is aria-hidden: it is meant for a labelled context, such as a KPI tile whose Delta says the change. With label, it is one image with that name, and the name must say what the shape shows.
• Down is grey, not red (Figma 03's "down is not bad" rule); the colour is never the only signal.
• The line reveals by clip-path over --nz-duration-chart-draw, 0 ms under Reduced motion.
• The plot does not mirror in a right-to-left page: time runs left to right.

FigmaCopy Anchor Link

Sparkline, 7275:13323: Trend=Up 7275:13324 and Trend=Down 7275:13328, both 112 × 36. "Inline trend, 112×36. Line draws in duration/chart-draw on reveal." The KPI tile (Figma 04, 7275:13780) nests a duplicate set, 747:288. Notes: docs/figma/03-data-viz.md §4.3.