Area Chart

Component 105

About

Here is Area Chart component

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,
  Area,
  Grid,
  XAxis,
  ChartTooltip,
} from "@/components/ui/area-chart";

const chartData = Array.from({ length: 30 }, (_, i) => ({
  date: new Date(2024, 0, i + 1),
  revenue: Math.floor(8000 + Math.sin(i / 5) * 4000 + ((i * 11) % 2000)),
  costs: Math.floor(5000 + Math.cos(i / 4) * 2000 + ((i * 7) % 1500)),
}));

export default function AreaChartDemo2() {
  return (
    <div className="w-full">
      <AreaChart data={chartData} aspectRatio="4 / 1">
        <Grid horizontal />
        <Area
          dataKey="revenue"
          fill="var(--chart-line-primary)"
          fillOpacity={0.3}
          strokeWidth={2}
        />
        <Area
          dataKey="costs"
          fill="var(--chart-line-secondary)"
          fillOpacity={0.2}
          strokeWidth={1.5}
        />
        <XAxis />
        <ChartTooltip />
      </AreaChart>
    </div>
  );
}