Chart Background

Component 1

About

An SVG pattern background for Recharts charts with dots, grid, cross-hatch, diagonal lines and other decorative variants, plus a soft edge fade.

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

Code

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

Usage.tsx

"use client";

import * as Recharts from "recharts";
import { ChartBackground } from "@/components/ui/background";

const data = [
  { month: "Jan", desktop: 186, mobile: 120 },
  { month: "Feb", desktop: 305, mobile: 200 },
  { month: "Mar", desktop: 237, mobile: 150 },
  { month: "Apr", desktop: 273, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "Jun", desktop: 314, mobile: 210 },
  { month: "Jul", desktop: 244, mobile: 160 },
  { month: "Aug", desktop: 331, mobile: 220 },
  { month: "Sep", desktop: 262, mobile: 175 },
  { month: "Oct", desktop: 298, mobile: 205 },
  { month: "Nov", desktop: 225, mobile: 145 },
  { month: "Dec", desktop: 287, mobile: 195 },
];

export default function Default() {
  return (
    <div className="mx-auto flex h-[320px] w-full max-w-2xl flex-col rounded-xl border bg-background p-4 text-foreground">
      <Recharts.ResponsiveContainer width="100%" height="100%">
        <Recharts.LineChart
          data={data}
          margin={{ top: 16, right: 12, left: 12, bottom: 0 }}
        >
          <ChartBackground variant="dots" />
          <Recharts.XAxis
            dataKey="month"
            tickLine={false}
            axisLine={false}
            tickMargin={8}
            className="text-xs text-muted-foreground"
          />
          <Recharts.Line
            type="monotone"
            dataKey="desktop"
            stroke="#14b8a6"
            strokeWidth={2}
            dot={{ r: 3, fill: "#14b8a6", strokeWidth: 0 }}
            activeDot={{ r: 4 }}
            isAnimationActive={false}
          />
          <Recharts.Line
            type="monotone"
            dataKey="mobile"
            stroke="#ec4899"
            strokeWidth={2}
            dot={{ r: 3, fill: "#ec4899", strokeWidth: 0 }}
            activeDot={{ r: 4 }}
            isAnimationActive={false}
          />
        </Recharts.LineChart>
      </Recharts.ResponsiveContainer>
    </div>
  );
}