AreaChart

AreaChart emphasizes volume below a line for usage, capacity, growth, and cumulative product signals.

#Default usage

<AreaChart
  ariaLabel="Active seats over time"
  data={[
    { week: "W1", seats: 42 },
    { week: "W2", seats: 58 },
    { week: "W3", seats: 54 },
    { week: "W4", seats: 72 },
  ]}
  curve="smooth"
  xKey="week"
  yKey="seats"
/>

#Import

import { AreaChart } from "@froggdesign/enter-ui-react";

#Patterns

#Accessibility

Pass ariaLabel or aria-label to name the interactive chart group. Each point has an accessible label containing its category and value. Tab to a point to reveal its tooltip, use Left/Right to move between points, and Escape to dismiss. Hover and tap also reveal the value. The tooltip uses the exact formatted value; axis labels are compact by default. Point markers remain circular at all widths.

Rounded bounds stay close to the data: a maximum of 47 uses 50 with the zero domain. Negative and mixed values remain inside the plot, and domain="auto" keeps its focused range for near-constant data.

#API

• data: records for the trend.
• xKey: category or time field.
• yKey: numeric field.
• height: plot height in pixels; defaults to 200.
• curve: linear (default) or smooth. Smooth interpolation stays within each pair of values.
• domain: zero (default) includes zero; auto focuses on the observed range with rounded bounds. Use zero for volume comparisons.
• valueFormatter: (value: number) => string, used by numeric ticks and tooltips, for example (value) => `$${value}K` .
• ariaLabel: accessible chart label.
• showGrid: toggles five quiet dashed grid lines.
• showAxis: toggles numeric ticks; category labels appear when xKey or labelKey is provided.
• tone: default, success, info, warning, or error.
• Legacy labelKey and valueKey remain supported.

#Styling

AreaChart uses the shared blue chart token and a restrained translucent fill by default. Explicit semantic tone values remain available when the metric carries that meaning.

#Formatted revenue

<AreaChart data={revenue} xKey="day" yKey="revenue"
  ariaLabel="Daily recurring revenue" curve="smooth" domain="zero"
  height={200} valueFormatter={(value) => `$${value}K`} />

Use Grid, VStack, and ChartCard for layout. Examples should not add className, inline style, or CSS overrides to change chart presentation.

In Next.js App Router, define valueFormatter inside a "use client" component; functions cannot cross from a Server Component into the chart.

#Repeated axis labels

Repeated labels, such as the same hour on consecutive days, retain one axis entry per sample without React key warnings. Label text is presentation, not sample identity. The chart keeps its existing keyboard controls and tooltips.

Automatic domains pad the observed span by 40%, with a small relative floor for constant data. They support both high-valued prices with small changes and fractional values; use the default zero domain when comparing magnitudes.

Dense category axes show at most six labels while retaining every sample and keyboard tooltip. Below 600px, intermediate labels are reduced further and the first and final labels stay visible.