xlibs-components/dist/components/charts/chart-bar-basic.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 { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '../../components/ui/card.js';
import { ChartContainer, ChartTooltip, ChartTooltipContent, } from '../../components/ui/chart.js';
export const description = "A basic bar chart with customizable data";
// ✅ FIXED: Default demo data for preview
const defaultChartData = [
    { name: "Jan", total: 2400 },
    { name: "Feb", total: 1398 },
    { name: "Mar", total: 9800 },
    { name: "Apr", total: 3908 },
    { name: "May", total: 4800 },
    { name: "Jun", total: 3800 },
    { name: "Jul", total: 4300 },
    { name: "Aug", total: 2400 },
    { name: "Sep", total: 1398 },
    { name: "Oct", total: 9800 },
    { name: "Nov", total: 3908 },
    { name: "Dec", total: 4800 },
];
export function ChartBarBasic({ data = defaultChartData, title = "Revenue", description = "Monthly revenue for the current year", className = "", dataKey = "total", color = "#249e5e" // ✅ THEMED: Use project's primary green color
 }) {
    // ✅ FIXED: Dynamic chart config based on props
    const chartConfig = {
        [dataKey]: {
            label: title,
            color: color,
        },
    };
    return (_jsxs(Card, { className: className, children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: title }), _jsx(CardDescription, { children: description })] }), _jsx(CardContent, { children: _jsx(ChartContainer, { config: chartConfig, className: "aspect-[4/3]", children: _jsxs(BarChart, { data: data, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "name", tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(YAxis, { tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => `$${value}` }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, {}) }), _jsx(Bar, { dataKey: dataKey, fill: color, radius: [4, 4, 0, 0] })] }) }) })] }));
}