BarChart

A vertical bar chart with optional category labels (below) and value labels (above). Bar heights are rendered with the eight vertical block elements (▁▂▃▄▅▆▇█), so partial cells render proportionally.

See also: Histogram to bin raw samples into a distribution.

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

Usage

Basic

BarChart(
  bars: <Bar>[Bar('q1', 12), Bar('q2', 19), Bar('q3', 9), Bar('q4', 22)],
  showYAxis: true,
)

Stacked

// Segments paint bottom to top; segmentLabels feeds the legend.
BarChart(
  bars: const <Bar>[
    Bar.stacked('host-a', [40, 30, 10]),
    Bar.stacked('host-b', [55, 25, 5]),
  ],
  segmentLabels: const ['cpu', 'mem', 'disk'],
)

Details

Supports both single-value bars (Bar.new) and stacked bars (Bar.stacked) — stacked segments cycle through the chart palette for distinct colors.

The widget sizes itself to its bars by default (barWidth × N + gaps wide, plus a row of labels and/or values). Bound the height with a parent and it fills the available rows; bound the width and it clips the visible bars.

Screen readers and agents get one chart node: semanticLabel plus the bar count and the value range (from the smallest bar total up to the largest total or max, whichever is larger), not a node per bar.

Constructors

BarChart()

Parameter	Type	Default	Description
bars:	List<Bar>	required	The bars, left to right.
max:	num?	—	Top of the visible range. null autoscales to the data.
barWidth:	int	2	Cells per bar (must be ≥ 1).
gap:	int	1	Cells between bars.
palette:	List<Color>?	—	Colors cycled through for stacked-bar segments. Single-value bars that don’t set Bar.color all use its first color. Defaults to a palette derived from the theme’s color scheme (primary, info, warning, success, error). More
segmentLabels:	List<String>?	—	Labels for stacked-bar segments, parallel to each Bar.stacked’s segments list. showLegend draws a legend only when these are set, and without one, stacked segments are hard to tell apart.
showLabels:	bool	true	Whether to draw a row of category labels under the chart.
showValues:	bool	false	Whether to draw a row of value labels above each bar.
showLegend:	bool	false	Draw a one-row legend at the top-right mapping the palette colors to segmentLabels. Quietly skipped if segmentLabels is null/ empty or the chart is too narrow to fit it.
showYAxis:	bool	false	Reserve a left gutter and draw a value axis (max at the top, 0 at the baseline, the midpoint between). Off by default — many compact bar charts rely on per-bar value labels (showValues) instead — but a shared axis is easier to read across many bars. Quietly degrades to no gutter when the chart is too narrow.
semanticLabel:	String	'Bar chart'	Label exposed through the semantic app graph.

• palette: For stacked bars whose segments are just categories, with no meaning of their own, Palettes.categorical orders its colors for telling them apart. It still includes yellow and red, so a segment can still read as a warning or an error; pass colors of your own to rule that out.

Source

BarChart is defined in packages/fleury/lib/src/catalog/bar_chart.dart.

Category: Charts & meters · All widgets

Live demo

barchart_example.dart

Restart Run Expand

Example · editable Revert Format

class _BarChartExampleState extends State<_BarChartExample> {
  final _random = Random(5);
  late final Timer _timer;
  // Jobs waiting in each queue.
  List<num> _waiting = [12, 19, 9, 22];

  @override
  void initState() {
    super.initState();
    // Every 160 ms, each queue gains or loses up to 2 jobs.
    _timer = Timer.periodic(const Duration(milliseconds: 160), (_) {
      setState(() {
        _waiting = [
          for (final jobs in _waiting)
            (jobs + _random.nextInt(5) - 2).clamp(0, 30),
        ];
      });
    });
  }

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

  @override
  Widget build(BuildContext context) => BarChart(
    bars: [for (final (i, jobs) in _waiting.indexed) Bar('q${i + 1}', jobs)],
    showYAxis: true,
  );
}

Live preview

Live

ⓘ how this demo runs ⛶ Expand