AreaChart

Usage

import { InteractiveAreaChart } from "@vesture/react";

const data = [
  { x: "Jan", revenue: 120, cost: 90 },
  { x: "Feb", revenue: 180, cost: 110 },
  { x: "Mar", revenue: 150, cost: 130 },
];

<div style={{ height: 320 }}>
  <InteractiveAreaChart
    data={data}
    series={[
      { key: "revenue", label: "Revenue" },
      { key: "cost", label: "Cost" },
    ]}
    stacked
  />
</div>

Behavior

• stacked={false} (default) overlaps each series' fill at partial opacity so every series stays visible where they intersect; stacked renders cumulative filled regions instead, like a stacked bar chart smoothed into areas.
• Data/series shape, x-scale inference, margin defaults, and series color cycling are identical to LineChart's — AreaChartDataPoint and AreaChartSeries are literally the same types.
• InteractiveAreaChart uses the same continuous nearest-point hover technique as InteractiveLineChart (not BarChart's discrete per-bar hover) — an area chart behaves like a line chart for hover purposes.