animated-charts
Version:
Animated chart web components for all frameworks (React, Angular, Vue, HTML)
17 lines (16 loc) • 1.33 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import "./candlestick-chart.css";
export const CandlestickChart = ({ data, width = 400, height = 300, colors = ["#28a745", "#dc3545"], animationDuration = 800, }) => {
const min = Math.min(...data.map(d => d.low));
const max = Math.max(...data.map(d => d.high));
const barWidth = width / data.length * 0.6;
const scaleY = (value) => height - 20 - ((value - min) / (max - min || 1)) * (height - 40);
return (_jsx("svg", { width: width, height: height, className: "candlestick-chart", role: "img", "aria-label": "Candlestick Chart", children: data.map((d, i) => {
const x = i * (width / data.length) + (width / data.length - barWidth) / 2;
const up = d.close >= d.open;
return (_jsxs("g", { children: [_jsx("line", { x1: x + barWidth / 2, x2: x + barWidth / 2, y1: scaleY(d.high), y2: scaleY(d.low), stroke: "#333", strokeWidth: 2 }), _jsx("rect", { x: x, y: scaleY(Math.max(d.open, d.close)), width: barWidth, height: Math.abs(scaleY(d.open) - scaleY(d.close)) || 2, fill: up ? colors[0] : colors[1], style: {
transition: `all ${animationDuration}ms cubic-bezier(0.4,0,0.2,1)`
} })] }, i));
}) }));
};
//# sourceMappingURL=candlestick-chart.js.map