AreaChart

A line with the space under it filled. Use it for a quantity that adds up to something, and stacked, for what that total is made of.

import { AreaChart } from 'neba';

<AreaChart
  label="Storage used by tier"
  categories={['Jan', 'Feb', 'Mar']}
  stacked
  series={[
    { name: 'Hot', data: [120, 138, 149] },
    { name: 'Archive', data: [610, 648, 690] }
  ]}
/>;

The data model is the one every chart shares: series, categories, and a null that means a gap rather than a zero. It is written out on the LineChart page.

The choice between the two is about what the quantity is: if it does not add up to anything (a temperature, a rate, a score), the fill under the line is decoration, and two of them overlapping is two washes fighting.

Props

Prop	Type	Default	Description
series *	NebaChartSeries[]	—	The series. A colour is decided by a series' place in this array, so hiding one from the legend never repaints the survivors
categories	(string | number | Date)[]	—	The category axis' labels. Points may carry their own x instead
xAxis	NebaChartAxis	—	The category axis
yAxis	NebaChartAxis	—	The value axis
stacked	boolean | 'full'	false	true stacks the bands so the top edge is the total; full normalises every category to 100%, which makes the chart about the mix rather than the size
curve	'linear' | 'smooth' | 'step'	'linear'	How the edge of the band gets from one point to the next
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 band
connectNulls	boolean	false	Draws through a null instead of breaking at it. It matters more here than on a line: a fill paints a made-up number over a larger area
variantshared	'solid' | 'outline' | 'text'	'text'	Weight of the surface. A chart is a drawing rather than a sheet, so this defaults to text and a chart inside a Card draws no second edge. Use outline for one that stands alone
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Axis type, line weight, marker size, and the height, when none is given
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	The sheet's colour family. A series' colour does not come from here: the palette or series.color decides that
densityshared	'default' | 'compact'	'default'	Padding only: never the height, never the type scale
elevationshared	0 | 1 | 2 | 3	0	Drop shadow depth. 0 means no shadow at all
height	number | string	size	How tall the drawing is. The axis labels are drawn inside it, so a card sized to the chart is a card the chart fits in
label	string	locale's word	The chart's accessible name. Read out in place of the drawing, and the caption of the hidden data table under it. Without it the locale's generic word stands in, but what the chart is *of* can only be said here
format	Intl.NumberFormatOptions	—	How numbers are written everywhere they appear: the axis, the tooltip, the value labels, the table. Without it, past ten thousand they are compacted (12.4K)
locale	string	—	The language of the chart's own words and dates
legend	boolean | NebaChartLegend	series ≥ 2	Shown automatically from two series up and left off below that: a legend with one swatch restates the title
tooltip	boolean | NebaChartTooltip	true	What the pointer uncovers. It never carries a value that is not also in the hidden table
empty	ReactNode	—	What to draw when there is nothing to draw

Every native <div> attribute passes through, along with every Box prop. xAxis, yAxis, legend and tooltip take the same shapes they take on LineChart. See prop conventions for the shared axes.

Examples

stacked

false overlays the bands, which answers "how big is each". true stacks them, so the top edge is the total. 'full' normalises every category to 100%, which makes the chart about the mix and stops it being about the size: the value axis becomes a percentage and says so, and the tooltip keeps the original number.

import { AreaChart, Card, Grid, GridContainer } from 'neba';

const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
const SERIES = [
  { name: 'Organic', data: [4200, 4610, 4880, 5240, 5390, 5720] },
  { name: 'Paid', data: [2100, 2480, 2310, 2760, 3020, 2880] },
  { name: 'Referral', data: [980, 1040, 1190, 1120, 1310, 1440] }
];

/**
 * The same three sources, three ways. Overlaid answers "how big is each";
 * stacked answers "how big is the total"; `'full'` answers "what is the mix",
 * and stops answering the first two.
 */
export default function AreaChartStacked() {
  return (
    <GridContainer spacing={3} padded={false}>
      <Grid span={{ xs: 12, md: 4 }}>
        <Card title="stacked={false}" size="sm" className="h-full">
          <AreaChart
            label="Sessions by source, overlaid"
            size="sm"
            height={160}
            categories={MONTHS}
            series={SERIES}
            legend={false}
          />
        </Card>
      </Grid>
      <Grid span={{ xs: 12, md: 4 }}>
        <Card title="stacked" size="sm" className="h-full">
          <AreaChart
            label="Sessions by source, stacked"
            size="sm"
            height={160}
            categories={MONTHS}
            series={SERIES}
            stacked
            legend={false}
          />
        </Card>
      </Grid>
      <Grid span={{ xs: 12, md: 4 }}>
        <Card title='stacked="full"' size="sm" className="h-full">
          <AreaChart
            label="Sessions by source, as a share"
            size="sm"
            height={160}
            categories={MONTHS}
            series={SERIES}
            stacked="full"
            legend={false}
          />
        </Card>
      </Grid>
    </GridContainer>
  );
}

One series

With a single series there is no legend: the card's title already says what is plotted, and a box with one swatch in it would only restate it.

import { AreaChart, Card } from 'neba';

const DAYS = Array.from({ length: 30 }, (_, index) => `${index + 1}`);
const SPEND = [
  180, 210, 195, 240, 265, 230, 205, 260, 288, 301, 275, 254, 310, 342, 366, 338, 315, 359, 388,
  402, 377, 351, 396, 421, 448, 430, 405, 452, 481, 512
];

/**
 * One series, so there is no legend — the card's title already says what is
 * plotted, and a box with one swatch in it would only restate it.
 */
export default function AreaChartSingle() {
  return (
    <Card title="Daily spend" subtitle="This month, cumulative by day" className="w-full">
      <AreaChart
        label="Daily spend this month"
        categories={DAYS}
        curve="smooth"
        format={{ style: 'currency', currency: 'USD', maximumFractionDigits: 0 }}
        series={[{ name: 'Spend', data: SPEND, color: 'success' }]}
        xAxis={{ label: 'Day of month' }}
      />
    </Card>
  );
}

curve · markers · connectNulls

The same three props LineChart has, meaning the same things. markers defaults to none here rather than auto: a filled band already has a visible edge.

connectNulls matters more on an area than on a line: a fill that closes across a missing month paints a made-up number over a larger part of the chart.

<AreaChart curve="step" markers="all" connectNulls … />

Value axis

Unlike a line chart, an area chart keeps zero on its value axis. The fill's thickness is the magnitude, so a cropped baseline would leave the band's height meaning nothing. yAxis's own min and max still override it where the caller has a reason.

Accessibility

• The data is also rendered as a visually hidden table, captioned with label.
• The plot is focusable; ← / → step the crosshair, Home / End jump to the ends, Escape clears it.
• With stacked="full", the tooltip and the table report the value the caller passed, not the percentage: the chart shows the share, and the number is still reachable.