Area Chart

Dashboards 9

About

A gradient-filled area chart for visualizing trends over time or categories, built on Recharts with a retro-styled grid, axes, and tooltip.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Area Chart to your project and fits it to your theme.

Code

How Area Chart is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { AreaChart } from "@/components/ui/area-chart";

const data = [
  { name: "Jan", orders: 12 },
  { name: "Feb", orders: 32 },
  { name: "Mar", orders: 19 },
  { name: "Apr", orders: 35 },
  { name: "May", orders: 40 },
  { name: "Jun", orders: 25 },
];

export default function ChartStyleDefault() {
  return <AreaChart data={data} index="name" categories={["orders"]} />;
}