/ux
Components/Charts/AreaChart

AreaChart

Charts

Filled area chart built on Recharts with brand colours.

Multi-series area chart. Pass data, dataKey (X axis field), and series (Y axis fields with optional colors). Supports stacked mode and respects prefers-reduced-motion.

Usage

import { AreaChart } from "nosible-ux"

const data = [
  { date: "Jan", signals: 120, alerts: 34 },
  { date: "Feb", signals: 180, alerts: 52 },
  { date: "Mar", signals: 240, alerts: 71 },
]

export default function Example() {
  return (
    <AreaChart
      data={data}
      dataKey="date"
      series={[{ name: "signals" }, { name: "alerts" }]}
      withLegend
      withTooltip
    />
  )
}

Examples

Stacked with gradient

Props

Name TypeDefaultDescription
aria-label
string | undefined—Accessible label forwarded to the `role="img"` wrapper.
curveType
"step" | "linear" | "monotone" | undefined—Line interpolation style. Default: `"monotone"`.
data
Record<string, unknown>[]—Array of data objects keyed by `dataKey` + series names.
dataKey
string—Key used for the X-axis categories.
h
number | undefined—Container height in px. Default: `300`.
series
AreaChartSeries[]—Series definitions — one area rendered per entry.
stacked
boolean | undefined—Stack all areas on a shared baseline. Default: `false`.
withDots
boolean | undefined—Show dot markers at every data point. Default: `false`.
withGradient
boolean | undefined—Gradient fill under each area. Default: `true`.
withLegend
boolean | undefined—Legend below the chart. Default: `true`.
withTooltip
boolean | undefined—Branded tooltip on hover. Default: `true`.
withXAxis
boolean | undefined—Render the X-axis. Default: `true`.
withYAxis
boolean | undefined—Render the Y-axis. Default: `true`.
← All ComponentsGetting Started →