Components
Loading preview...
Here is Line Chart component
npx shadcn@latest add https://21st.dev/r/LegionWebDev/line-chart"use client";
import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import {
ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from "@/components/ui/line-chart";
import { Badge } from "@/components/ui/badge";
import { TrendingDown } from "lucide-react";
const chartData = [
{ month: "January", desktop: 186 },
{ month: "February", desktop: 305 },
{ month: "March", desktop: 237 },
{ month: "April", desktop: 73 },
{ month: "May", desktop: 209 },
{ month: "June", desktop: 214 },
];
const chartConfig = {
desktop: {
label: "Desktop",
color: "var(--chart-2)",
},
} satisfies ChartConfig;
export default function RainbowGlowGradientLineChart() {
return (
<Card>
<CardHeader>
<CardTitle>
Rainbow Line Chart
<Badge
variant="outline"
className="text-red-500 bg-red-500/10 border-none ml-2"
>
<TrendingDown className="h-4 w-4" />
<span>-5.2%</span>
</Badge>
</CardTitle>
<CardDescription>January - June 2024</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={chartConfig}>
<LineChart
accessibilityLayer
data={chartData}
margin={{
left: 12,
right: 12,
}}
>
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
axisLine={false}
tickMargin={8}
tickFormatter={(value) => value.slice(0, 3)}
/>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent hideLabel />}
/>
<Line
dataKey="desktop"
type="bump"
stroke="url(#colorUv)"
dot={false}
strokeWidth={2}
filter="url(#rainbow-line-glow)"
/>
<defs>
<linearGradient id="colorUv" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stopColor="#0B84CE" stopOpacity={0.8} />
<stop offset="20%" stopColor="#224CD1" stopOpacity={0.8} />
<stop offset="40%" stopColor="#3A11C7" stopOpacity={0.8} />
<stop offset="60%" stopColor="#7107C6" stopOpacity={0.8} />
<stop offset="80%" stopColor="#C900BD" stopOpacity={0.8} />
<stop offset="100%" stopColor="#D80155" stopOpacity={0.8} />
</linearGradient>
<filter
id="rainbow-line-glow"
x="-20%"
y="-20%"
width="140%"
height="140%"
>
<feGaussianBlur stdDeviation="10" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
</LineChart>
</ChartContainer>
</CardContent>
</Card>
);
}