animated-charts
Version:
Animated chart web components for all frameworks (React, Angular, Vue, HTML)
9 lines (8 loc) • 821 B
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { motion } from "framer-motion";
const BarChart = ({ data, labels, colors, height = 240 }) => {
const max = Math.max(...data, 1);
return (_jsx("div", { className: "w-full flex items-end h-full", style: { height }, children: data.map((value, i) => (_jsxs("div", { className: "flex-1 flex flex-col items-center mx-1", children: [_jsx(motion.div, { initial: { height: 0 }, animate: { height: `${(value / max) * 100}%` }, transition: { type: 'spring', stiffness: 120, damping: 20 }, className: "w-6 rounded-t-md", style: { background: colors?.[i] || '#3b82f6', minHeight: 4 } }), _jsx("span", { className: "mt-2 text-xs text-gray-600", children: labels[i] })] }, labels[i]))) }));
};
export default BarChart;
//# sourceMappingURL=BarChart.js.map