Area Chart

Component 357

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

import {
  AreaChart,
  Area,
  Grid,
  XAxis,
  YAxis,
  ChartTooltip,
} from "@/components/ui/area-chart";

const data = Array.from({ length: 30 }, (_, i) => {
  const date = new Date(2024, 0, i + 1);
  const base = 400 + Math.sin(i / 3) * 180 + i * 8;
  return {
    date,
    revenue: Math.round(base + Math.random() * 60),
  };
});

const settings = {
  fillOpacity: 0.4,
  strokeWidth: 2,
  gradientToOpacity: 0,
  fadeEdges: false,
  animationDuration: 1100,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };

  return (
    <div className="h-screen w-screen flex items-center justify-center p-6">
      <div className="w-full">
        <AreaChart
          data={data}
          aspectRatio="16 / 9"
          animationDuration={s.animationDuration}
        >
          <Grid />
          <XAxis />
          <YAxis />
          <Area
            dataKey="revenue"
            fill="var(--chart-line-primary)"
            fillOpacity={s.fillOpacity}
            strokeWidth={s.strokeWidth}
            gradientToOpacity={s.gradientToOpacity}
            fadeEdges={s.fadeEdges}
          />
          <ChartTooltip />
        </AreaChart>
      </div>
    </div>
  );
}