animated-charts
Version:
Animated chart web components for all frameworks (React, Angular, Vue, HTML)
10 lines (9 loc) • 1.11 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { motion } from "framer-motion";
const LineChart = ({ data, labels, color = '#3b82f6', height = 240 }) => {
const max = Math.max(...data, 1);
const points = data.map((v, i) => `${(i / (data.length - 1)) * 100},${100 - (v / max) * 100}`).join(' ');
return (_jsxs("div", { className: "w-full h-full", style: { height }, children: [_jsxs("svg", { viewBox: "0 0 100 100", className: "w-full h-full", children: [_jsx(motion.polyline, { fill: "none", stroke: color, strokeWidth: "2", points: points, initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 1 } }), data.map((v, i) => (_jsx(motion.circle, { cx: (i / (data.length - 1)) * 100, cy: 100 - (v / max) * 100, r: 2.5, fill: color, initial: { scale: 0 }, animate: { scale: 1 }, transition: { delay: 0.2 + i * 0.05 } }, i)))] }), _jsx("div", { className: "flex justify-between mt-2 text-xs text-gray-600", children: labels.map((l, i) => (_jsx("span", { children: l }, i))) })] }));
};
export default LineChart;
//# sourceMappingURL=LineChart.js.map