PlSparkline

A chart with everything taken away except the shape. No axes, no grid, no legend, no tooltip, a word-sized picture that goes inside a sentence and says which way something has been going.

React

import { PlSparkline } from 'plass-ui';

<PlSparkline data={signups} endDot />;

import 'package:plass_ui/plass_ui.dart';

PlSparkline(data: signups, endDot: true);

A sparkline is a different thing from a chart shrunk down. Every number it could label is one the surrounding text already has, which is why it labels none of them. Put it beside a PlStat, in a table cell, or in a line of prose.

Props

Prop	Type	Default	Description
data *	readonly PlassChartDatum[]	—	The values. A null is a gap here too
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 the line gets from one point to the next
color	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | (string & {})	'--plass-chart-1'	The mark's colour, taken directly: one series and no legend, so there is nothing for a palette to hand out
endDot	boolean	false	Puts a dot on the last point that is a point — the one direct label a strip this small has room for
baseline	number	—	A rule across the strip: a target or a budget, the one piece of context a sparkline can carry
min	number	—	The bottom of the scale. Left out, the strip fills itself with its own range
max	number	—	And the top of it. Give a row of strips the same pair and they become small multiples
width	number | string	'100%'	How wide
label	string	—	A name for the strip. Without one it is taken off the accessibility tree entirely
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	How tall the strip is, sized against the line of text it sits beside rather than the page

Prop	Type	Default	Description
data *	List<PlassChartDatum>	—	The values. A null is a gap here too
shape	PlSparklineShape	PlSparklineShape.line	Which mark. A line for a trend, an area for a quantity, bars for a count of discrete things
curve	PlChartCurve	PlChartCurve.linear	How the line gets from one point to the next
color	PlassColor?	'--plass-chart-1'	The mark's colour family. An exact colour goes to tint instead
tint	Color?	—	An exact colour, the other half of React's PlassColor | (string & {}) — Dart has no union
endDot	bool	false	Puts a dot on the last point that is a point — the one direct label a strip this small has room for
baseline	double?	—	A rule across the strip: a target or a budget, the one piece of context a sparkline can carry
min	double?	—	The bottom of the scale. Left out, the strip fills itself with its own range
max	double?	—	And the top of it. Give a row of strips the same pair and they become small multiples
width	double?	'100%'	How wide
semanticLabel	String?	—	A name for the strip. Without one it is taken off the accessibility tree entirely
sizeshared	PlassSize	PlassSize.md	How tall the strip is, sized against the line of text it sits beside rather than the page

Unlike the full charts this one takes its colour directly. A sparkline has exactly one series and no legend, so there is nothing for a palette to hand out.

There is no tooltip and no legend, and adding either would make it a chart. A null is a gap here as everywhere, and the line breaks at it.

Examples

shape

React

import { PlSparkline } from 'plass-ui';

const readings = [12, 19, 15, 22, 18, 26, 24, 31];

export default function SparklineShape() {
  return (
    <div className="w-full max-w-xs flex flex-col gap-6">
      {(['line', 'area', 'bar'] as const).map((shape) => (
        <div key={shape} className="flex items-center gap-4">
          <span className="w-12 shrink-0 text-sm text-(--plass-muted-fg)">{shape}</span>
          <PlSparkline data={readings} shape={shape} />
        </div>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

final List<PlassChartDatum> _readings = <double>[
  12,
  19,
  15,
  22,
  18,
  26,
  24,
  31,
].map(PlassChartDatum.new).toList();

class SparklineShape extends StatelessWidget {
  const SparklineShape({super.key});

  @override
  Widget build(BuildContext context) {
    final tokens = PlassTheme.of(context);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisSize: MainAxisSize.min,
      spacing: 16,
      children: <Widget>[
        for (final PlSparklineShape shape in PlSparklineShape.values)
          Row(
            children: <Widget>[
              SizedBox(
                width: 56,
                child: Text(shape.name, style: TextStyle(fontSize: 14, color: tokens.mutedFg)),
              ),
              Expanded(
                child: PlSparkline(data: _readings, shape: shape),
              ),
            ],
          ),
      ],
    );
  }
}

The same three sentences the full charts say, at a size where nothing else is being said at all. A line for a trend, an area for a quantity, bars for a count of discrete things.

min and max

React

import { PlSparkline } from 'plass-ui';

const rows = [
  { name: 'Europe', data: [82, 88, 91, 87, 94, 99] },
  { name: 'Asia', data: [11, 14, 12, 17, 15, 21] }
];

export default function SparklineScale() {
  return (
    <div className="grid w-full max-w-lg gap-8 sm:grid-cols-2">
      {[undefined, 0].map((min, at) => (
        <div key={at} className="flex flex-col gap-2">
          <span className="text-xs text-(--plass-muted-fg)">
            {min === undefined ? 'Each to its own range' : 'Both from 0 to 100'}
          </span>
          {rows.map((row) => (
            <div key={row.name} className="flex items-center gap-3">
              <span className="w-14 shrink-0 text-sm text-(--plass-muted-fg)">{row.name}</span>
              <PlSparkline data={row.data} min={min} max={min === undefined ? undefined : 100} />
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

final Map<String, List<PlassChartDatum>> _rows = <String, List<PlassChartDatum>>{
  'Europe': <double>[82, 88, 91, 87, 94, 99].map(PlassChartDatum.new).toList(),
  'Asia': <double>[11, 14, 12, 17, 15, 21].map(PlassChartDatum.new).toList(),
};

class SparklineScale extends StatelessWidget {
  const SparklineScale({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisSize: MainAxisSize.min,
      spacing: 24,
      children: <Widget>[const _Group(shared: false), const _Group(shared: true)],
    );
  }
}

class _Group extends StatelessWidget {
  const _Group({required this.shared});

  final bool shared;

  @override
  Widget build(BuildContext context) {
    final tokens = PlassTheme.of(context);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisSize: MainAxisSize.min,
      spacing: 8,
      children: <Widget>[
        Text(
          shared ? 'Both from 0 to 100' : 'Each to its own range',
          style: TextStyle(fontSize: 12, color: tokens.mutedFg),
        ),
        for (final MapEntry<String, List<PlassChartDatum>> row in _rows.entries)
          Row(
            children: <Widget>[
              SizedBox(
                width: 64,
                child: Text(row.key, style: TextStyle(fontSize: 14, color: tokens.mutedFg)),
              ),
              Expanded(
                child: PlSparkline(
                  data: row.value,
                  min: shared ? 0 : null,
                  max: shared ? 100 : null,
                ),
              ),
            ],
          ),
      ],
    );
  }
}

A sparkline scales itself to its own range, so the strip is always full. That is what makes it readable at twenty pixels tall, and it is also the trap: two of them side by side are drawn on two different scales, so a strip that climbs steeply may be the smaller number. Give a row of them the same min and max and they become a small-multiples chart instead.

baseline

React

import { PlSparkline } from 'plass-ui';

const latency = [180, 210, 240, 195, 320, 280, 260, 340, 300, 250];

export default function SparklineBaseline() {
  return (
    <div className="flex w-full max-w-sm items-center gap-4">
      <span className="w-16 shrink-0 text-sm text-(--plass-muted-fg)">p95 ms</span>
      <PlSparkline data={latency} shape="area" baseline={250} endDot label="p95 latency" />
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

final List<PlassChartDatum> _latency = <double>[
  180,
  210,
  240,
  195,
  320,
  280,
  260,
  340,
  300,
  250,
].map(PlassChartDatum.new).toList();

class SparklineBaseline extends StatelessWidget {
  const SparklineBaseline({super.key});

  @override
  Widget build(BuildContext context) {
    final tokens = PlassTheme.of(context);

    return Row(
      children: <Widget>[
        SizedBox(
          width: 64,
          child: Text('p95 ms', style: TextStyle(fontSize: 14, color: tokens.mutedFg)),
        ),
        Expanded(
          child: PlSparkline(
            data: _latency,
            shape: PlSparklineShape.area,
            baseline: 250,
            endDot: true,
            semanticLabel: 'p95 latency',
          ),
        ),
      ],
    );
  }
}

A target, a budget, last year's average. The one piece of context a strip this small can carry. It is pulled into the range if it sits outside the data, so the rule is always visible.

endDot

Puts a dot on the last point that is actually a point, not on the last slot. It is the one direct label a strip this small has room for, and it says where the series ended up. Bars do not take it: a bar already ends where it ends.

Accessibility

• Without a label the strip is taken off the accessibility tree entirely. A sparkline is decoration beside text that already carries the numbers, and an unlabelled image announced as an image is noise.
• With a label it becomes a named role="img", and the values are written out beside it, clipped from view, never hidden from the tree. What a sparkline has to give a screen reader is the numbers, not a description of the shape they make.
• Colour is never the only channel here either: a sparkline sits beside the name and the number it belongs to.