Sparkline | Surflane

AvailableSemantic HTML / product composition

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons

Small, 24px

Default, 32px

Large, 48px

With a missing week

Filled under the line

Usage

Show the shape of a series inside a card or a table cell, next to the figure it explains. It has no axes, legend or tooltip: label states what the line shows and how it moved. Set baseline to a reference value, such as the previous close. Set fill where the shape carries the message, such as a trend card: the wash takes the same color as the line, so it adds weight without a second color.

Don't use Sparkline when people need to read values. Use LineChart, which has axes, a readout and a table.
Don't leave out label. The line is an image, and the label is all a screen reader hears.
Don't fill a line that sits under a colored figure it would compete with. fill adds weight to a shape; it is not a status cue.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

svg(role=img, aria-label) → gradient + fade under the line + baseline + line + end marker

Keyboard and accessibility

Sparkline is an image with an accessible name. It takes no focus and has no interaction.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Sparkline } from '@surflane/ui'

<Sparkline
  data={closes}
  baseline={previousClose}
  label='KOSPI, last 30 days, up 2.3%'
/>

Key API

Sparkline — common wrapper props
Prop	Contract	Default
`data`	(number \| null)[]; a missing value leaves a gap	required
`label`	accessible name of the line	required
`size`	small \| default \| large: 24, 32 or 48px tall	default
`baseline`	number \| 'first' \| 'none'	'none'
`marker`	dot on the last value	true
`fill`	washes the area under the line in its own color, thinning to nothing at the bottom; --surf-sparkline-fill-opacity sets the strength	false
`trend`	auto \| up \| down \| flat \| neutral	auto: last value against the baseline or first value
`lowerIsBetter`	swaps the up and down colors	false

The table lists the common wrapper's main props. See the package type declarations for the full types.