Sparkline

A word-sized picture of a trend, with no axes, no grid and no legend. It goes beside a number, inside a sentence or in a table cell, and says which way something has been going.

import { Sparkline } from 'neba';

<Sparkline data={[18, 22, 19, 27, 24, 31, 29, 36]} label="Signups, last eight weeks" endDot />;

It is not a small chart. Every number it could label is one the surrounding text already has, which is why it labels none of them, and why it takes data directly instead of a series array.

data is an array of NebaChartDatum, the same shape every chart takes: a number, a null for a gap, or a point. See LineChart for the full definition.

Props

Prop	Type	Default	Description
data *	NebaChartDatum[]	—	The values. null is a gap, exactly as it is on every other chart
shape	'line' | 'area' | 'bar'	'line'	Which mark. A line for a trend, an area for a quantity, bars for a count of discrete things
curve	'linear' | 'smooth' | 'step'	'linear'	How it gets from one point to the next
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The height of the strip, on a ladder measured against the line of text beside it rather than against the page
color	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | string	첫 번째 chart slot / the first chart slot	The mark's colour, taken directly unlike the full charts: a sparkline has one series and no legend for a palette to hand out
endDot	boolean	false	Puts a dot on the last point: the one direct label a strip this small has room for
baseline	number	—	Draws a rule across the strip at this value: a target, a budget, last year's average
min	number	—	The bottom of the scale. Left out, the strip fills itself with its own range: two side by side are only comparable if both are given the same one
max	number	—	The top of the scale
width	number | string	'100%'	How wide. Fills its container by default
label	string	—	A name for the strip. With one, the values are exposed to assistive technology; without one it is hidden entirely

Every native <div> attribute passes through. See prop conventions for the shared axes.

Examples

shape · curve · endDot · baseline

shape picks the mark: a line for a trend, an area for a quantity, bars for a count of discrete things. endDot puts a dot on the last point: the one direct label a strip this small has room for. baseline draws a rule across it at a target or a budget.

import { Box, Grid, GridContainer, Sparkline, Typography } from 'neba';

const DATA = [32, 28, 41, 39, 52, 47, 61, 58, 72, 68, 81, 94];

const SHAPES = ['line', 'area', 'bar'] as const;

export default function SparklineVariants() {
  return (
    <GridContainer spacing={3} padded={false}>
      {SHAPES.map((shape) => (
        <Grid key={shape} span={{ xs: 12, sm: 4 }}>
          <Box className="flex h-full flex-col gap-2">
            <Typography level="overline">shape=&quot;{shape}&quot;</Typography>
            <Sparkline data={DATA} shape={shape} size="lg" label={`Example, ${shape}`} />
          </Box>
        </Grid>
      ))}

      <Grid span={{ xs: 12, sm: 6 }}>
        <Box className="flex h-full flex-col gap-2">
          <Typography level="overline">curve=&quot;smooth&quot; · endDot</Typography>
          <Sparkline data={DATA} curve="smooth" size="lg" endDot label="Example, smoothed" />
        </Box>
      </Grid>
      <Grid span={{ xs: 12, sm: 6 }}>
        <Box className="flex h-full flex-col gap-2">
          <Typography level="overline">
            baseline={'{'}60{'}'}
          </Typography>
          <Sparkline
            data={DATA}
            shape="area"
            size="lg"
            baseline={60}
            color="success"
            label="Example against a target of 60"
          />
        </Box>
      </Grid>
    </GridContainer>
  );
}

min · max

A sparkline fills itself with its own range, which is what makes it legible at twenty pixels tall, and it is also the trap. Two sparklines side by side are drawn on two different scales unless they are given the same min and max; pass those and a column of them becomes a small-multiples chart.

import { Card, Sparkline, Table } from 'neba';

const ROWS = [
  { region: 'Americas', mrr: '$412K', trend: [31, 34, 33, 38, 41, 39, 44, 48] },
  { region: 'EMEA', mrr: '$298K', trend: [28, 27, 30, 29, 31, 30, 33, 34] },
  { region: 'APAC', mrr: '$186K', trend: [11, 14, 13, 18, 17, 22, 26, 29] },
  { region: 'LATAM', mrr: '$74K', trend: [12, 11, 10, 11, 9, 8, 9, 7] }
];

/**
 * The shape a sparkline is usually reached for: one strip per row, in a column
 * of its own. All four are drawn on the same `min` and `max`, without which the
 * bottom row's decline would fill its cell exactly as fully as the top row's
 * climb fills that one.
 */
export default function SparklineShapes() {
  return (
    <Card title="MRR by region" className="w-full">
      <Table
        variant="text"
        headers={[
          { key: 'region', label: 'Region' },
          { key: 'mrr', label: 'MRR', align: 'end' },
          {
            key: 'trend',
            label: 'Eight weeks',
            width: 140,
            render: (row: (typeof ROWS)[number]) => (
              <Sparkline
                data={row.trend}
                shape="area"
                size="sm"
                min={0}
                max={60}
                label={`${row.region} trend`}
              />
            )
          }
        ]}
        items={ROWS}
      />
    </Card>
  );
}

size · color · width

size sets the height, on a ladder measured against the line of text beside it rather than against the page. width defaults to filling the container; a number pins it.

color takes a NebaColor family or any CSS colour: unlike the full charts, this one takes it directly, since a sparkline has one series and no legend for a palette to hand out.

<Sparkline data={data} size="xs" color="success" width={72} />

Accessibility

• A Sparkline with a label renders its values as visually hidden text and is exposed as an image with that name. Without a label it is hidden from assistive technology entirely: which is correct when the strip sits beside a Statistic that already says the number, and wrong anywhere else.
• Nothing in it is interactive and nothing in it is reachable only by pointer.