Area Chart

A filled area chart with gradient fills for cumulative trends and stacked totals.

Growth

Cumulative users and revenue

Usage in Gaia

Used for cumulative metrics, volume-over-time visuals, and AI-generated "growth" or "trend" responses where the area under the curve carries meaning.

Features

Gradient Fills - Each series renders with a smooth top-to-bottom gradient
Multi-Series Support - Stack multiple areas on the same axes
Auto Legend - Appears automatically with two or more series
Smooth Curves - Uses type="natural" for soft, organic curves
Theme-Aware - Built on the shadcn chart primitive
Tooltip - Hover tooltip with values per series

Installation

npx shadcn@latest add https://ui.heygaia.io/r/area-chart.json

Usage

import { AreaChart } from "@/components/ui/area-chart";
 
const data = [
  { month: "Jan", users: 1200, revenue: 4200 },
  { month: "Feb", users: 1480, revenue: 5100 },
  { month: "Mar", users: 1620, revenue: 4800 },
];
 
export default function Example() {
  return (
    <AreaChart
      data={data}
      xKey="month"
      yKeys={["users", "revenue"]}
      title="Growth"
    />
  );
}

Props

AreaChart

Prop	Type	Default	Description
data	Array<Record<string, string \| number>>	-	Chart data rows
xKey	string	-	Key on each row used for the X axis
yKeys	string \| string[]	-	One or more numeric keys to plot
title	string	-	Card title
description	string	-	Card description
footer	string	-	Optional footer text
colors	string[]	CHART_COLORS	Custom palette for series

Status - Beta Author Tooltip

On This Page

Meet GAIA

Your open-source, proactive personal AI assistant with 200+ integrations. GAIA combines todos, goals, calendar, and email into one system, turns tasks into automated workflows, and completes work instead of just tracking it. Open-source and self-hostable with support for custom automations and multi-step workflows.