Sparkline

A compact, single-row history graph of recent numeric values, rendered with the eight vertical block elements (▁▂▃▄▅▆▇█).

See also: LineChart for axes, legends, and several series.

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

Basic

Sparkline(data: const <num>[3, 5, 4, 8, 6, 9, 7])

With value

Sparkline(
  data: const <num>[3, 5, 4, 8, 6, 9, 7],
  showValue: true,
)

Details

Right-aligned (newest value on the right); values older than the available width are dropped from the left. Sized by the parent — a row that fills its width by default, or wrap in SizedBox for an explicit width.

Screen readers and agents get one chart node: semanticLabel with the latest value, plus the point count, min, and max (or, when max is null, the largest value in data).

Constructors

Sparkline()

Parameter	Type	Default	Description
data:	List<num>	required	The series of values to plot. The newest value goes on the right.
max:	num?	—	Top of the visible range. null autoscales to the data window.
min:	num	0	Baseline value. Defaults to 0.
color:	Color?	—	Foreground color override; defaults to the theme’s primary.
style:	CellStyle?	—	Full style override; takes precedence over color.
showValue:	bool	false	When true, append the latest value as muted text to the right of the sparkline — a shape alone doesn’t convey magnitude.
semanticLabel:	String	'Sparkline'	Label exposed through the semantic app graph.

Source

Sparkline is defined in packages/fleury/lib/src/catalog/sparkline.dart.

Category: Charts & meters · All widgets

Live demo

sparkline_example.dart

Restart Run Expand

Example · editable Revert Format

class _SparklineExampleState extends State<_SparklineExample> {
  final _random = Random(5);
  late final Timer _timer;
  late List<num> _requests;
  var _tick = 0;

  // Simulated requests per second: a slow swing around 10, plus some noise.
  num _read() => (10 + 6 * sin(_tick++ / 4)).round() + _random.nextInt(5) - 2;

  @override
  void initState() {
    super.initState();
    _requests = [for (var i = 0; i < 28; i++) _read()];
    // Every 160 ms, drop the oldest reading and add a new one.
    _timer = Timer.periodic(const Duration(milliseconds: 160), (_) {
      setState(() => _requests = [..._requests.skip(1), _read()]);
    });
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Sparkline(
    data: _requests,
    color: Theme.of(context).colorScheme.success,
    showValue: true,
  );
}

Live preview

Live

ⓘ how this demo runs ⛶ Expand