Area Chart

Overview

AreaChart is a recharts chart wired to Gremorie's design tokens through the shadcn chart primitive (ChartContainer) for filled-area over an ordered category. Pass tabular data, a serializable config that maps each value field to a label plus a color, and the xKey that names the category field. ChartContainer injects each series color as var(--color-<key>), and recharts renders the cartesian grid, axis ticks, and per-series filled paths. Pass stacked to layer the series or type to choose the interpolation curve.

Reach for AreaChart when the magnitude of a series matters as much as its trend - traffic by month, revenue by week, error count by day. For pure shape comparison without magnitude emphasis, prefer LineChart; for discrete category-vs-category comparisons, prefer BarChart.

The React edition (@gremorie/rx-data) renders with recharts inside the shadcn chart primitive; the Angular edition (@gremorie/ng-data) renders headless d3 geometry inside a styled SVG. The rendering engine differs; the public surface is identical input-for-input.

Anatomy

<area-chart>
└─ figure (role="img")                  card surface, aspect-video
   ├─ svg (chart frame)
   │  ├─ cartesian grid
   │  ├─ x axis (category from xKey)
   │  ├─ y axis (numeric, optional via yAxis)
   │  └─ filled areas, one per config key  (stacked or overlaid)
   ├─ tooltip overlay (optional via tooltip)
   ├─ legend (when config has >1 series)
   └─ sr-only data table

The React edition composes this surface through the shadcn chart primitive:

ChartContainer                  responsive frame + injects --color-<key> from config
└─ AreaChart                    recharts area chart (accessibilityLayer)
   ├─ CartesianGrid             horizontal rules
   ├─ XAxis                     category axis
   ├─ YAxis                     numeric axis (when yAxis)
   ├─ ChartTooltip              hover card
   │  └─ ChartTooltipContent    tooltip body
   └─ Area                      one per series; 40% fill, full stroke

Preview

'use client';import {  AreaChart,  type ChartConfig,  type ChartDatum,} from '@gremorie/rx-data';const monthlyData: ChartDatum[] = [  { month: 'Jan', desktop: 186, mobile: 80 },  { month: 'Feb', desktop: 305, mobile: 200 },  { month: 'Mar', desktop: 237, mobile: 120 },  { month: 'Apr', desktop: 173, mobile: 190 },  { month: 'May', desktop: 209, mobile: 130 },  { month: 'Jun', desktop: 214, mobile: 140 },];const monthlyConfig: ChartConfig = {  desktop: { label: 'Desktop', color: 'var(--chart-1)' },  mobile: { label: 'Mobile', color: 'var(--chart-2)' },};export function AreaChartPreview() {  return (    <AreaChart data={monthlyData} config={monthlyConfig} xKey="month" stacked />  );}

Installation

Usage

import { AreaChart } from "@gremorie/rx-data";
import type { ChartConfig, ChartDatum } from "@gremorie/rx-data";

const data: ChartDatum[] = [
{ month: "Jan", desktop: 186, mobile: 80 },
{ month: "Feb", desktop: 305, mobile: 200 },
{ month: "Mar", desktop: 237, mobile: 120 },
{ month: "Apr", desktop: 73, mobile: 190 },
{ month: "May", desktop: 209, mobile: 130 },
{ month: "Jun", desktop: 214, mobile: 140 },
];

const config: ChartConfig = {
desktop: { label: "Desktop", color: "var(--chart-1)" },
mobile: { label: "Mobile", color: "var(--chart-2)" },
};

export function MonthlyVisitors() {
  return <AreaChart data={data} config={config} xKey="month" />;
}

import { Component } from '@angular/core';
import { AreaChart } from '@gremorie/ng-data';
import type { ChartConfig, ChartDatum } from '@gremorie/ng-data';

@Component({
selector: 'app-monthly-visitors',
imports: [AreaChart],
template: `<area-chart [data]="data" [config]="config" xKey="month" />`,
})
export class MonthlyVisitorsComponent {
readonly data: ChartDatum[] = [
{ month: 'Jan', desktop: 186, mobile: 80 },
{ month: 'Feb', desktop: 305, mobile: 200 },
{ month: 'Mar', desktop: 237, mobile: 120 },
{ month: 'Apr', desktop: 73, mobile: 190 },
{ month: 'May', desktop: 209, mobile: 130 },
{ month: 'Jun', desktop: 214, mobile: 140 },
];

readonly config: ChartConfig = {
desktop: { label: 'Desktop', color: 'var(--chart-1)' },
mobile: { label: 'Mobile', color: 'var(--chart-2)' },
};
}

API

<AreaChart>

The styled wrapper. Renders a ChartContainer div wrapping a recharts <AreaChart> (with accessibilityLayer enabled): a cartesian grid, X axis, and one filled <Area> per series in config, each filled and stroked with var(--color-<key>).

Chart primitive exports

@gremorie/rx-data re-exports the shadcn chart primitive so you can compose custom charts. Wrap raw recharts (Area, Bar, Line, CartesianGrid, XAxis, YAxis) inside ChartContainer:

Types

Composition

1. Pick xKey first - the category that runs along the bottom (months, weeks, version numbers).
2. Author config mapping each value field to a label and a token-driven color. The --chart-1 through --chart-5 tokens already encode legible contrast across light and dark themes.
3. Pass data as an array of records.
4. For custom layouts (different grid density, a custom legend, mixed series), compose raw recharts inside <ChartContainer> (see Composing with the chart primitive).

The chart auto-sizes to its parent via recharts' ResponsiveContainer, so the wrapping surface controls the width. The default class on the ChartContainer pins the chart to aspect-video for a stable card shape.

Variations

Single series

'use client';import {  AreaChart,  type ChartConfig,  type ChartDatum,} from '@gremorie/rx-data';const monthlyData: ChartDatum[] = [  { month: 'Jan', desktop: 186, mobile: 80 },  { month: 'Feb', desktop: 305, mobile: 200 },  { month: 'Mar', desktop: 237, mobile: 120 },  { month: 'Apr', desktop: 173, mobile: 190 },  { month: 'May', desktop: 209, mobile: 130 },  { month: 'Jun', desktop: 214, mobile: 140 },];const singleConfig: ChartConfig = {  desktop: { label: 'Desktop', color: 'var(--chart-1)' },};export function AreaChartSinglePreview() {  return <AreaChart data={monthlyData} config={singleConfig} xKey="month" />;}

<AreaChart
  data={data}
  config={{ visits: { label: 'Visits', color: 'var(--chart-1)' } }}
  xKey="month"
/>

<area-chart [data]="data" [config]="config" xKey="month" />

The default shape. Reach for a single area when one metric is the headline.

Multi-series

const config: ChartConfig = {
  desktop: { label: 'Desktop', color: 'var(--chart-1)' },
  mobile: { label: 'Mobile', color: 'var(--chart-2)' },
};

<AreaChart data={data} config={config} xKey="month" />;

<area-chart [data]="data" [config]="config" xKey="month" />

For side-by-side comparison. Areas overlap with fillOpacity at 0.4 so the lower series stays visible behind the higher one. Limit to three series before reaching for LineChart instead.

Stacked

Set stacked to layer the series so each area sits on top of the one below and the silhouette reads as a cumulative total.

<AreaChart data={data} config={config} xKey="month" stacked />

<area-chart [data]="data" [config]="config" xKey="month" [stacked]="true" />

Curve type

Set type to pick the interpolation curve - "natural" (default), "monotone", "linear" (straight segments), or "step" (stepped edges). Use "linear" to read exact inflection points; use "step" for discrete state changes.

<AreaChart data={data} config={config} xKey="month" type="linear" />
<AreaChart data={data} config={config} xKey="month" type="step" />

<area-chart [data]="data" [config]="config" xKey="month" type="linear" />
<area-chart [data]="data" [config]="config" xKey="month" type="step" />

No axis

Set yAxis to false to drop the numeric axis for a minimal, sparkline-style area that leans on the tooltip for exact values.

<AreaChart data={data} config={config} xKey="month" yAxis={false} />

<area-chart [data]="data" [config]="config" xKey="month" [yAxis]="false" />

Composing with the chart primitive

When you need full control, skip AreaChart and compose raw recharts inside ChartContainer. The container still injects your token colors and tooltip styling.

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from '@gremorie/rx-data';
import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts';

<ChartContainer config={config}>
  <AreaChart accessibilityLayer data={data} margin={{ left: 12, right: 12 }}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
    <ChartTooltip
      cursor={false}
      content={<ChartTooltipContent indicator="dot" />}
    />
    <Area
      dataKey="desktop"
      type="natural"
      fill="var(--color-desktop)"
      fillOpacity={0.4}
      stroke="var(--color-desktop)"
    />
  </AreaChart>
</ChartContainer>;

Compose raw recharts when the surface needs a different aspect, a reference line, or a custom legend. ChartContainer owns the responsive frame and the token color vars.

Accessibility

• Accessibility layer: recharts' accessibilityLayer is enabled, providing keyboard navigation and screen-reader announcements for the data points.
• Token contrast: the --chart-1 through --chart-5 tokens are tuned for WCAG AA contrast against the card background in both light and dark themes.
• Container element: the wrapper renders a ChartContainer div with the series colors applied as CSS variables.
• No streaming UI: charts do not implement a streaming append affordance. For live data, render the chart inside a useDeferredValue boundary or throttle parent updates to a sustainable frame budget.

Related

• LineChart - same axes, no fill, when shape matters more than magnitude.
• BarChart - discrete categories instead of an ordered domain.
• ScatterChart - independent X plus Y when the X axis is itself numeric.