LineChart

A multi-series line chart with sub-cell-resolution braille rendering. Axes (optional) display labels at the min, midpoint, and max of each dimension’s visible range.

See also: AreaChart for a filled look · Sparkline for a compact inline trend.

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

Usage

LineChart(
  series: <LineSeries>[
    LineSeries(points, label: 'load', color: theme.colorScheme.primary),
  ],
  showAxes: true,
  showLegend: true,
  yRange: const (0, 100),
)

Details

When interactive is true, the chart becomes focusable: arrow chords move a vertical crosshair through the data points and a small tooltip box shows the y value of each series at the cursor’s x.

Screen readers and agents get one chart node: semanticLabel plus the series and point counts and the x and y ranges, not a node per point. An interactive chart also reports the cursor’s x value.

Constructors

LineChart()

Parameter	Type	Default	Description
series:	List<LineSeries>	required	One or more series to plot.
xRange:	(num min, num max)?	—	Visible x range. null autoscales to the data.
yRange:	(num min, num max)?	—	Visible y range. null autoscales to the data.
padding:	double	0.0	Extra space around the data along each axis, as a fraction of the range — 0.05 adds 5% of breathing room on every side. Only applied to autoscaled axes; ignored when xRange/yRange is set explicitly. Default 0.0 (the data’s own extents). Try 0.05 for dashboards where you don’t want data touching the plot edges.
showAxes:	bool	true	Draw min/mid/max labels for both axes.
showGrid:	bool	false	Draw faint dotted gridlines at the minimum, middle, and maximum of both axes.
showLegend:	bool	false	Draw a one-row legend at the top-right with a colored bullet and the label for each labeled series.
yTickCount:	int	3	Number of evenly-spaced y-axis tick labels, including both ends. Defaults to 3 (min / mid / max). Raise it for finer vertical reading (e.g. 5 gives quarter ticks); values below 2 are treated as 2. Only the two endpoints are drawn when the plot is shorter than 3 rows.
palette:	List<Color>?	—	Colors to cycle through for series that don’t set LineSeries.color explicitly. Defaults to a palette derived from the theme’s color scheme (primary, info, warning, success, error).
marker:	CanvasMarker	CanvasMarker.braille	Sub-cell rendering tier for the plotted line/scatter (not the gradient area fill, which always uses solid block columns). Defaults to CanvasMarker.braille — highest resolution and universal font support, but stippled. For a solid, gap-free line prefer CanvasMarker.octant (crispest, needs a Unicode-16 font or a kitty/Ghostty terminal), CanvasMarker.sextant (widely supported solid), or CanvasMarker.quadrant/CanvasMarker.halfBlock (universal, coarser).
strokeWidth:	int?	—	Line thickness in sub-cell pixels (default 1 — a crisp hairline). A higher value (2, …) draws the line thicker, which makes a stippled CanvasMarker.braille line read as a solid band in sparse mono fonts (dense fonts and the solid markers don’t need it). Does not affect scatter points.
xTickFormat:	TickFormatter?	—	Formatter for x-axis tick labels and the crosshair tooltip x value. Defaults to TickFormat.number.
yTickFormat:	TickFormatter?	—	Formatter for y-axis tick labels and the crosshair tooltip y values. Defaults to TickFormat.number.
references:	List<ReferenceLine>	const []	Reference lines — useful for target / SLA / threshold markers. They draw under the series lines but over gradient-filled areas.
interactive:	bool	false	When true, the chart is focusable. Arrow chords move a vertical crosshair through the union of data x values; Home/End jump to the ends. A floating tooltip shows the x value and each series’ y at the cursor.
autofocus:	bool	false	Auto-focus on first mount when interactive is true.
focusNode:	FocusNode?	—	Optional caller-provided node for interactive mode.
semanticLabel:	String	'Line chart'	Label exposed through the semantic app graph.

Source

LineChart is defined in packages/fleury/lib/src/catalog/line_chart.dart.

Category: Charts & meters · All widgets

Live demo

linechart_example.dart

Restart Run Expand

Example · editable Revert Format

class _LineChartExampleState extends State<_LineChartExample> {
  final _random = Random(5);
  late final Timer _timer;
  late List<num> _load;
  var _tick = 0;

  // Simulated CPU load: a slow swing around 50%, plus some noise.
  num _read() => 50 + 30 * sin(_tick++ / 6) + _random.nextInt(11) - 5;

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

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

  @override
  Widget build(BuildContext context) => LineChart(
    series: [
      LineSeries(
        [for (final (i, load) in _load.indexed) (i, load)],
        label: 'load',
        color: Theme.of(context).colorScheme.primary,
      ),
    ],
    showAxes: true,
    showLegend: true,
    yRange: const (0, 100),
  );
}

Live preview

Live

ⓘ how this demo runs ⛶ Expand