AreaChart

A filled area chart: each series is shaded from the bottom of the plot up to its line, in a flat color or a vertical gradient, using block characters so the fill reads as one continuous surface.

See also: LineChart for lines or scatter points.

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

Usage

AreaChart(
  series: <AreaSeries>[
    AreaSeries(
      points,
      label: 'load',
      gradient: [cs.success, cs.warning, cs.error],
    ),
  ],
  showAxes: true,
  showLegend: true,
  yRange: const (0, 100),
)

Details

AreaChart shares LineChart’s cartesian engine — axes, legend, ranges, grid, references, and the interactive crosshair all behave identically. Reach for LineChart when you want a line or scatter plot instead of a fill; reach for AreaChart when the shaded region is the point.

Constructors

AreaChart()

Parameter	Type	Default	Description
series:	List<AreaSeries>	required	One or more filled series to plot.
xRange:	(num min, num max)?	—	Visible x range. null autoscales to the data. See LineChart.xRange.
yRange:	(num min, num max)?	—	Visible y range. null autoscales to the data. See LineChart.yRange.
padding:	double	0.0	Extra space around autoscaled data, as a fraction of the range.
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 with a colored bullet and label per series.
yTickCount:	int	3	Number of evenly-spaced y-axis tick labels, including both ends.
palette:	List<Color>?	—	Colors cycled for series that set neither AreaSeries.color nor AreaSeries.gradient.
xTickFormat:	TickFormatter?	—	Formatter for x-axis tick labels and the crosshair tooltip x value.
yTickFormat:	TickFormatter?	—	Formatter for y-axis tick labels and the crosshair tooltip y values.
references:	List<ReferenceLine>	const []	Reference lines for targets or thresholds, drawn over the filled areas.
interactive:	bool	false	When true, the chart is focusable with an arrow-key crosshair.
autofocus:	bool	false	Auto-focus on first mount when interactive is true.
focusNode:	FocusNode?	—	Optional caller-provided focus node for interactive mode.
semanticLabel:	String	'Area chart'	Label exposed through the semantic app graph.

Source

AreaChart is defined in packages/fleury/lib/src/catalog/area_chart.dart.

Category: Charts & meters · All widgets

Live demo

areachart_example.dart

Restart Run Expand

Example · editable Revert Format

class _AreaChartExampleState extends State<_AreaChartExample> {
  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) {
    final colors = Theme.of(context).colorScheme;
    return AreaChart(
      series: [
        AreaSeries(
          [for (final (i, load) in _load.indexed) (i, load)],
          label: 'load',
          // Stops run bottom to top: green at low load, red near the top.
          gradient: [colors.success, colors.warning, colors.error],
        ),
      ],
      showAxes: true,
      showLegend: true,
      yRange: const (0, 100),
    );
  }
}

Live preview

Live

ⓘ how this demo runs ⛶ Expand