xlibs-components
Version:
Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications
64 lines (63 loc) • 2.47 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Area, AreaChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
import { ChartContainer, ChartTooltip, ChartTooltipContent, } from '../../components/ui/chart.js';
const data = [
{
name: "Jan",
total: Math.floor(Math.random() * 5000) + 1000,
},
{
name: "Feb",
total: Math.floor(Math.random() * 5000) + 1000,
},
{
name: "Mar",
total: Math.floor(Math.random() * 5000) + 1000,
},
{
name: "Apr",
total: Math.floor(Math.random() * 5000) + 1000,
},
{
name: "May",
total: Math.floor(Math.random() * 5000) + 1000,
},
{
name: "Jun",
total: Math.floor(Math.random() * 5000) + 1000,
},
{
name: "Jul",
total: Math.floor(Math.random() * 5000) + 1000,
},
{
name: "Aug",
total: Math.floor(Math.random() * 5000) + 1000,
},
{
name: "Sep",
total: Math.floor(Math.random() * 5000) + 1000,
},
{
name: "Oct",
total: Math.floor(Math.random() * 5000) + 1000,
},
{
name: "Nov",
total: Math.floor(Math.random() * 5000) + 1000,
},
{
name: "Dec",
total: Math.floor(Math.random() * 5000) + 1000,
},
];
const chartConfig = {
total: {
label: "Total Revenue",
color: "hsl(var(--chart-1))",
},
};
export function ChartAreaInteractive() {
return (_jsx(ChartContainer, { config: chartConfig, children: _jsx(ResponsiveContainer, { width: "100%", height: 350, children: _jsxs(AreaChart, { data: data, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "gradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: chartConfig.total.color, stopOpacity: 0.4 }), _jsx("stop", { offset: "100%", stopColor: chartConfig.total.color, stopOpacity: 0 })] }) }), _jsx(XAxis, { dataKey: "name", stroke: "hsl(var(--muted-foreground))", fontSize: 12, tickLine: false, axisLine: false }), _jsx(YAxis, { stroke: "hsl(var(--muted-foreground))", fontSize: 12, tickLine: false, axisLine: false, tickFormatter: (value) => `$${value}` }), _jsx(ChartTooltip, { config: chartConfig, content: _jsx(ChartTooltipContent, { config: chartConfig }) }), _jsx(Area, { dataKey: "total", stroke: chartConfig.total.color, strokeWidth: 2, fill: "url(#gradient)" })] }) }) }));
}