animated-charts
Version:
Animated chart web components for all frameworks (React, Angular, Vue, HTML)
11 lines (10 loc) • 1.08 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { motion } from "framer-motion";
const AreaChart = ({ 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(' ');
const areaPoints = `0,100 ${points} 100,100`;
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.polygon, { fill: color + '33', points: areaPoints, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 1 } }), _jsx(motion.polyline, { fill: "none", stroke: color, strokeWidth: "2", points: points, initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 1 } })] }), _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 AreaChart;
//# sourceMappingURL=AreaChart.js.map