PlAreaChart

A line with the space under it filled, which changes what the chart is about. A line says where a value went; an area says how much of something there was, and stacked it says how that amount was made up.

React

import { PlAreaChart } from 'plass-ui';

<PlAreaChart series={traffic} categories={months} stacked />;

import 'package:plass_ui/plass_ui.dart';

PlAreaChart(
  series: traffic,
  categories: months,
  stacking: PlAreaStacking.total,
);

That is the whole test for using this instead of a line chart: if the quantity does not add up to anything (a temperature, a rate, a score) the fill under it is decoration, and a chart with two of them is two washes fighting.

Props

Prop	Type	Default	Description
series *	readonly PlassChartSeries[]	—	The data
categories	readonly PlassChartCategory[]	—	What the category axis says
curve	'linear' | 'smooth' | 'step'	'linear'	How the edge of the band gets from one point to the next. The same three shapes PlLineChart offers
stacked	boolean | 'full'	false	Stacks the bands. 'full' normalises every category to 100%, so the chart is about share and stops being about size
markers	'none' | 'auto' | 'all'	'none'	Dots on the points. none by default: a filled band already has a visible edge
valueLabels	'none' | 'last' | 'extremes' | 'all'	'none'	Which values are written on the bands
connectNulls	boolean	false	Draws the band through a gap. It matters more than on a line: a fill that closes across a gap paints a made-up number over a larger part of the chart
xAxis	PlassChartAxis	—	The category axis
yAxis	PlassChartAxis	—	The value axis
legend	PlassChartLegend	—	The legend
tooltip	PlassChartTooltip	—	The tooltip
height	number | string	—	How tall the plot is
format	Intl.NumberFormatOptions	—	How a value is written
label	string	'Chart'	What the whole drawing is called
empty	ReactNode	—	What is drawn when there is nothing to draw
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Type scale, plot height and line weight

Prop	Type	Default	Description
series *	List<PlassChartSeries>	—	The data
categories	List<PlassChartCategory>?	—	What the category axis says
curve	PlChartCurve	PlChartCurve.linear	How the edge of the band gets from one point to the next. The same three shapes PlLineChart offers
stacking	PlAreaStacking	PlAreaStacking.none	How the bands are stacked. A single enum rather than React's boolean | 'full', because Dart has no union type — and three named states read better than a boolean with an exception bolted on
markers	PlChartMarkers	PlChartMarkers.none	Dots on the points. none by default: a filled band already has a visible edge
valueLabels	PlassChartValueLabels	PlassChartValueLabels.none	Which values are written on the bands
connectNulls	bool	false	Draws the band through a gap. It matters more than on a line: a fill that closes across a gap paints a made-up number over a larger part of the chart
xAxis	PlChartAxis	PlChartAxis()	The category axis
yAxis	PlChartAxis	PlChartAxis()	The value axis
legend	PlChartLegend	PlChartLegend()	The legend
tooltip	PlChartTooltip	PlChartTooltip()	The tooltip
height	double?	—	How tall the plot is
format	String Function(double)?	—	How a value is written
semanticLabel	String?	'Chart'	What the whole drawing is called
empty	Widget?	—	What is drawn when there is nothing to draw
sizeshared	PlassSize	PlassSize.md	Type scale, plot height and line weight

The data is the same PlassChartSeries every chart takes, and a null is a gap here too, more visibly so, because a fill that closes across a missing month paints a made-up number over a larger part of the chart than a bridged line does.

What the shared axes mean across the library is in prop conventions.

Examples

stacked

Each band rides on the total of those below it, and the top edge is the sum, which is the thing a stacked area is usually drawn to show.

A stacked band is not also given a line along its top. The band above would then be separated from it by a coloured stroke, and a stroke between two marks is ink that is not data. What separates them is the gap below.

Share rather than size

'full' normalises every category to 100%, so the chart stops being about size and starts being about share. The value axis is relabelled as a percentage.

React

import { PlAreaChart } from 'plass-ui';

const plans = [
  { name: 'Free', data: [62, 58, 54, 49, 44, 40] },
  { name: 'Pro', data: [30, 33, 35, 38, 41, 43] },
  { name: 'Team', data: [8, 9, 11, 13, 15, 17] }
];

const quarters = ['Q1 24', 'Q2 24', 'Q3 24', 'Q4 24', 'Q1 25', 'Q2 25'];

export default function AreaChartShare() {
  return <PlAreaChart className="w-full" series={plans} categories={quarters} stacked="full" />;
}

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

List<PlassChartDatum> _readings(List<double> values) => values.map(PlassChartDatum.new).toList();

final List<PlassChartSeries> _plans = <PlassChartSeries>[
  PlassChartSeries(name: 'Free', data: _readings(<double>[62, 58, 54, 49, 44, 40])),
  PlassChartSeries(name: 'Pro', data: _readings(<double>[30, 33, 35, 38, 41, 43])),
  PlassChartSeries(name: 'Team', data: _readings(<double>[8, 9, 11, 13, 15, 17])),
];

const List<PlassChartCategory> _quarters = <PlassChartCategory>[
  PlassChartCategory.text('Q1 24'),
  PlassChartCategory.text('Q2 24'),
  PlassChartCategory.text('Q3 24'),
  PlassChartCategory.text('Q4 24'),
  PlassChartCategory.text('Q1 25'),
  PlassChartCategory.text('Q2 25'),
];

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

  @override
  Widget build(BuildContext context) {
    return PlAreaChart(series: _plans, categories: _quarters, stacking: PlAreaStacking.full);
  }
}

The normalising is a change to the data, not to the drawing, which is what lets the axis, the tooltip and the table all agree that the number is a share. The tooltip still carries the number you passed: a chart that can only tell you percentages has thrown the data away.

stacking is one enum with three states rather than React's boolean | 'full'. Dart has no union type, and three named states read better than a boolean with an exception bolted onto it.

Unstacked bands overlap

Left unstacked, each band starts from the baseline and they lie over each other. The fill is a wash that fades downward rather than a slab: two of them overlapping stay readable, and the line along the top is what carries the value.

React

import { PlAreaChart } from 'plass-ui';

const load = [
  { name: 'Capacity', data: [100, 100, 100, 100, 100, 100, 100] },
  { name: 'Peak load', data: [42, 61, 88, 71, 94, 56, 38] }
];

const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

export default function AreaChartOverlap() {
  return (
    <PlAreaChart
      className="w-full"
      series={load}
      categories={days}
      curve="smooth"
      format={{ style: 'unit', unit: 'percent' }}
    />
  );
}

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

List<PlassChartDatum> _readings(List<double> values) => values.map(PlassChartDatum.new).toList();

final List<PlassChartSeries> _load = <PlassChartSeries>[
  PlassChartSeries(name: 'Capacity', data: _readings(<double>[100, 100, 100, 100, 100, 100, 100])),
  PlassChartSeries(name: 'Peak load', data: _readings(<double>[42, 61, 88, 71, 94, 56, 38])),
];

const List<PlassChartCategory> _days = <PlassChartCategory>[
  PlassChartCategory.text('Mon'),
  PlassChartCategory.text('Tue'),
  PlassChartCategory.text('Wed'),
  PlassChartCategory.text('Thu'),
  PlassChartCategory.text('Fri'),
  PlassChartCategory.text('Sat'),
  PlassChartCategory.text('Sun'),
];

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

  @override
  Widget build(BuildContext context) {
    return PlAreaChart(
      series: _load,
      categories: _days,
      curve: PlChartCurve.smooth,
      format: (double value) => '${value.toInt()}%',
    );
  }
}

Stacked bands take a flatter, opaquer tint instead, because there the fill is the mark, a band that faded out would have no bottom edge.

The baseline is always zero

Unlike a line, an area's fill is its magnitude, so the baseline has to be zero or the band's thickness stops meaning anything. That is the one axis rule this chart does not share with PlLineChart, whose scale is free to crop.

Accessibility

Everything PlLineChart says applies here: the name and the per-series summary, the legend as real controls, and (on React) the hidden table that carries every number.