xlibs-components/dist/components/charts/chart-bar-label-custom.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { TrendingUp } from "lucide-react";
import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '../../components/ui/card.js';
import { ChartContainer, ChartTooltip, ChartTooltipContent, } from '../../components/ui/chart.js';
export const description = "A bar chart with a custom label";
// ✅ FIXED: Default demo data for preview
const defaultChartData = [
    { month: "January", desktop: 186, mobile: 80 },
    { month: "February", desktop: 305, mobile: 200 },
    { month: "March", desktop: 237, mobile: 120 },
    { month: "April", desktop: 73, mobile: 190 },
    { month: "May", desktop: 209, mobile: 130 },
    { month: "June", desktop: 214, mobile: 140 },
];
export function ChartBarLabelCustom({ data = defaultChartData, title = "Bar Chart - Custom Label", description = "January - June 2024", className = "", desktopColor = "#249e5e", mobileColor = "#2a3289", height = 350 }) {
    const chartConfig = {
        desktop: {
            label: "Desktop",
            color: desktopColor,
        },
        mobile: {
            label: "Mobile",
            color: mobileColor,
        },
    };
    return (_jsxs(Card, { className: className, children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: title }), _jsx(CardDescription, { children: description })] }), _jsx(CardContent, { children: _jsx(ChartContainer, { config: chartConfig, children: _jsxs(BarChart, { accessibilityLayer: true, data: data, layout: "vertical", margin: {
                            right: 16,
                        }, height: height, children: [_jsx(CartesianGrid, { horizontal: false }), _jsx(YAxis, { dataKey: "month", type: "category", tickLine: false, tickMargin: 10, axisLine: false, tickFormatter: (value) => value.slice(0, 3), hide: true }), _jsx(XAxis, { dataKey: "desktop", type: "number", hide: true }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { indicator: "line" }) }), _jsxs(Bar, { dataKey: "desktop", fill: "var(--color-desktop)", radius: 4, children: [_jsx(LabelList, { dataKey: "month", position: "insideLeft", offset: 8, className: "fill-(--color-label)", fontSize: 12 }), _jsx(LabelList, { dataKey: "desktop", position: "right", offset: 8, className: "fill-foreground", fontSize: 12 })] })] }) }) }), _jsxs(CardFooter, { className: "flex-col items-start gap-2 text-sm", children: [_jsxs("div", { className: "flex gap-2 leading-none font-medium", children: ["Trending up by 5.2% this month ", _jsx(TrendingUp, { className: "h-4 w-4" })] }), _jsx("div", { className: "text-muted-foreground leading-none", children: "Showing total visitors for the last 6 months" })] })] }));
}