xlibs-components
Version:
Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications
50 lines (49 loc) • 2.17 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer, Tooltip } from "recharts";
const data = [
{
subject: "Bitcoin",
A: 120,
B: 110,
fullMark: 150,
},
{
subject: "Ethereum",
A: 98,
B: 130,
fullMark: 150,
},
{
subject: "BNB",
A: 86,
B: 130,
fullMark: 150,
},
{
subject: "Cardano",
A: 99,
B: 100,
fullMark: 150,
},
{
subject: "Solana",
A: 85,
B: 90,
fullMark: 150,
},
{
subject: "Polkadot",
A: 65,
B: 85,
fullMark: 150,
},
];
export function ChartRadarLabelCustom() {
return (_jsx(ResponsiveContainer, { width: "100%", height: 350, children: _jsxs(RadarChart, { cx: "50%", cy: "50%", outerRadius: "80%", data: data, children: [_jsx(PolarGrid, {}), _jsx(PolarAngleAxis, { dataKey: "subject" }), _jsx(PolarRadiusAxis, { angle: 30, domain: [0, 150] }), _jsx(Radar, { name: "Market Cap", dataKey: "A", stroke: "hsl(var(--primary))", fill: "hsl(var(--primary))", fillOpacity: 0.6 }), _jsx(Radar, { name: "Volume", dataKey: "B", stroke: "hsl(var(--secondary))", fill: "hsl(var(--secondary))", fillOpacity: 0.6 }), _jsx(Tooltip, { content: ({ active, payload }) => {
if (active && payload && payload.length) {
return (_jsx("div", { className: "rounded-lg border bg-background p-2 shadow-sm", children: _jsx("div", { className: "grid grid-cols-2 gap-2", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-[0.70rem] uppercase text-muted-foreground", children: payload[0].payload.subject }), _jsxs("span", { className: "font-bold text-muted-foreground", children: ["Market Cap: ", payload[0].value] }), _jsxs("span", { className: "font-bold text-muted-foreground", children: ["Volume: ", payload[1]?.value] })] }) }) }));
}
return null;
} })] }) }));
}