AreaChart

A filled area chart for emphasising volume and cumulative values over time.

Installation

npx @obi/ui add area-chart

Requires: recharts

Preview

Usage

import { AreaChart } from '@/src/components/Charts/Charts';

const data = [
  { month: 'Jan', users: 800, sessions: 1200 },
  { month: 'Feb', users: 1200, sessions: 1800 },
  { month: 'Mar', users: 1000, sessions: 1500 },
  { month: 'Apr', users: 1400, sessions: 2100 },
  { month: 'May', users: 1800, sessions: 2700 },
  { month: 'Jun', users: 2200, sessions: 3300 },
];

export default function Example() {
  return (
    <AreaChart
      data={data}
      xKey="month"
      series={[
        { key: 'users', label: 'Users' },
        { key: 'sessions', label: 'Sessions' },
      ]}
    />
  );
}

Props

Name	Type	Default	Description
data	ChartDataPoint[]	—	Array of data objects.
xKey	string	—	Key to use as the x-axis label.
series	ChartSeries[]	—	Areas to render.
stacked	boolean	false	Stack areas on top of each other.
height	number	240	Chart height in px.
showLegend	boolean	true	Whether to show the legend.
showGrid	boolean	true	Whether to show the background grid.
className	string	""	Extra classes applied to the container.