AreaChart

Filled line chart for emphasising the magnitude of numeric series over an ordered axis.

AreaChart is a line chart with the region below each line filled, emphasising volume and cumulative magnitude over an ordered x axis. Reach for it when the size of a trend matters as much as its direction. Pass data as row objects, set xKey to the x-axis field, and list each series in series (mapping a dataKey to a name). It renders client-side via ECharts, so give it a height (defaults to 280).

Example

Preview

import { AreaChart } from '@officina/ui';

const data = [
  { month: 'Jan', revenue: 4200, costs: 2200 },
  { month: 'Feb', revenue: 5300, costs: 2600 },
  { month: 'Mar', revenue: 6100, costs: 2800 },
];

<AreaChart
  data={data}
  xKey="month"
  series={[
    { dataKey: 'revenue', name: 'Revenue' },
    { dataKey: 'costs', name: 'Costs' },
  ]}
  height={280}
/>;

API

Prop	Type	Default	Description
data*	Datum[]	—	Row data; each object holds the x value and every series value.
series*	ChartSeries[]	—	Series to plot, each mapping a data key to a label/colour.
xKey*	string	—	Key in each datum used for the x axis.
className	string	—
height	number	280	Chart height in pixels.
showLegend	boolean	true	Show the series legend.

Example

API

On this page