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 },
  ]}
  tone="info"
  xKey="week"
  yKey="seats"
/>

#Import

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

#Patterns

#Accessibility

Use ariaLabel or aria-label to name the chart. Do not rely on the filled shape as the only way to communicate a precise value.

#API

• data: records for the trend.
• xKey: category or time field.
• yKey: numeric field.
• height: SVG height.
• ariaLabel: accessible chart label.
• showGrid: toggles the baseline grid.
• tone: default, success, info, warning, or error.
• className: style hook for layout.
• Legacy labelKey and valueKey remain supported.

#Styling

AreaChart uses .eui-area-chart, .eui-area-chart__grid, .eui-area-chart__area, and .eui-area-chart__line. Prefer className for layout and keep fills subtle through token-based tone values.