viainti-chart 1.0.5 → 1.1.0

package/dist/index.cjs

@@ -3,55 +3,635 @@
 var React = require('react');
 var framerMotion = require('framer-motion');
 
-const Chart = ({ data, width = 800, height = 400 }) => {
-    const canvasRef = React.useRef(null);
+const MIN_BAR_SPACING$1 = 6;
+const MAX_BAR_SPACING$1 = 18;
+const RIGHT_PADDING_PX$1 = 60;
+const MIN_VISIBLE_BARS = 12;
+const MAX_VISIBLE_BARS = 720;
+const clamp$1 = (value, min, max) => Math.max(min, Math.min(max, value));
+const alignStroke$1 = (value) => Math.round(value) + 0.5;
+const getCandleTime = (candle, fallbackIndex) => {
+    if (!candle)
+        return fallbackIndex;
+    if (typeof candle.time === 'number')
+        return candle.time;
+    if (typeof candle.timestamp === 'number')
+        return candle.timestamp;
+    return fallbackIndex;
+};
+const buildTimeTicks = (minTime, maxTime, desiredTicks) => {
+    if (!Number.isFinite(minTime) || !Number.isFinite(maxTime))
+        return [];
+    if (minTime === maxTime)
+        return [minTime];
+    const safeDesired = Math.max(2, desiredTicks);
+    const span = maxTime - minTime;
+    const step = span / (safeDesired - 1);
+    const ticks = [];
+    for (let i = 0; i < safeDesired; i++) {
+        const rawValue = minTime + step * i;
+        const clampedValue = clamp$1(rawValue, minTime, maxTime);
+        if (ticks.length && Math.abs(clampedValue - ticks[ticks.length - 1]) < 1e-3)
+            continue;
+        ticks.push(clampedValue);
+    }
+    ticks[ticks.length - 1] = maxTime;
+    return ticks;
+};
+const formatTickLabel = (value) => {
+    const date = new Date(value);
+    if (!Number.isNaN(date.getTime())) {
+        return date.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
+    }
+    return `${value}`;
+};
+const getPanBounds = (visibleBars, dataLength) => {
+    const maxPan = 0;
+    const minPan = Math.min(0, visibleBars - dataLength);
+    return { min: minPan, max: maxPan };
+};
+const computeViewport = (data, state) => {
+    if (!data.length) {
+        return { startIndex: 0, endIndex: 0 };
+    }
+    const rawEnd = (data.length - 1) + Math.round(state.panOffsetBars);
+    const minEnd = Math.max(state.visibleBars - 1, 0);
+    const maxEnd = Math.max(data.length - 1, 0);
+    const endIndex = clamp$1(rawEnd, minEnd, maxEnd);
+    const startIndex = Math.max(0, endIndex - state.visibleBars + 1);
+    return { startIndex, endIndex };
+};
+const computeXMapping = (plotArea, viewport) => {
+    const { plotX0, plotX1, leftPaddingPx, rightPaddingPx } = plotArea;
+    const visibleCount = Math.max(1, viewport.endIndex - viewport.startIndex + 1);
+    const availableWidth = Math.max(1, (plotX1 - rightPaddingPx) - (plotX0 + leftPaddingPx));
+    const normalizedWidth = availableWidth * (visibleCount / Math.max(1, visibleCount - 1));
+    const barSpacing = clamp$1(normalizedWidth / visibleCount, MIN_BAR_SPACING$1, MAX_BAR_SPACING$1);
+    const targetLastX = plotX1 - rightPaddingPx;
+    const offsetX = targetLastX - ((viewport.endIndex - viewport.startIndex) * barSpacing);
+    const x = (index) => plotX0 + offsetX + (index - viewport.startIndex) * barSpacing;
+    const gapLeft = x(viewport.startIndex) - (plotX0 + leftPaddingPx);
+    const gapRight = (plotX1 - rightPaddingPx) - x(viewport.endIndex);
+    if (Math.abs(gapLeft) > 2 || Math.abs(gapRight) > 2) {
+        console.error('[ChartViewport::Alignment]', { startIndex: viewport.startIndex, endIndex: viewport.endIndex, gapLeft, gapRight, barSpacing, offsetX });
+    }
+    else {
+        console.log('[ChartViewport::Alignment]', { startIndex: viewport.startIndex, endIndex: viewport.endIndex, gapLeft, gapRight, barSpacing, offsetX });
+    }
+    return { barSpacing, offsetX, x };
+};
+const Chart = ({ data, width = 900, height = 480, visibleBars: visibleBarsProp = 60 }) => {
+    const priceCanvasRef = React.useRef(null);
+    const overlayCanvasRef = React.useRef(null);
+    const chartAreaRef = React.useRef(null);
+    const isDraggingRef = React.useRef(false);
+    const lastPointerXRef = React.useRef(0);
+    const barSpacingRef = React.useRef(12);
+    const rafRef = React.useRef(null);
+    const [showMenu, setShowMenu] = React.useState(false);
+    const initialVisible = React.useMemo(() => {
+        if (!data.length)
+            return Math.max(MIN_VISIBLE_BARS, visibleBarsProp);
+        const maxBars = Math.max(1, data.length);
+        return clamp$1(Math.round(visibleBarsProp), Math.min(MIN_VISIBLE_BARS, maxBars), Math.min(MAX_VISIBLE_BARS, maxBars));
+    }, [data.length, visibleBarsProp]);
+    const [chartState, setChartState] = React.useState(() => ({
+        visibleBars: initialVisible,
+        defaultVisibleBars: initialVisible,
+        panOffsetBars: 0,
+        locked: false,
+        crosshairEnabled: true,
+        crosshairX: null,
+        crosshairY: null,
+        hoveredIndex: null,
+        autoScaleY: true,
+        yMinManual: null,
+        yMaxManual: null,
+        yPaddingPct: 0.08,
+        showCandles: true,
+        showVolume: true,
+        showGrid: true,
+        showGridMinor: true
+    }));
+    React.useEffect(() => {
+        setChartState(prev => {
+            if (!data.length) {
+                return { ...prev, panOffsetBars: 0 };
+            }
+            const maxBars = Math.max(1, data.length);
+            const nextVisible = clamp$1(Math.round(prev.visibleBars), Math.min(MIN_VISIBLE_BARS, maxBars), Math.min(MAX_VISIBLE_BARS, maxBars));
+            const nextDefault = clamp$1(Math.round(prev.defaultVisibleBars), Math.min(MIN_VISIBLE_BARS, maxBars), Math.min(MAX_VISIBLE_BARS, maxBars));
+            const bounds = getPanBounds(nextVisible, data.length);
+            const nextPan = clamp$1(prev.panOffsetBars, bounds.min, bounds.max);
+            if (nextVisible === prev.visibleBars && nextDefault === prev.defaultVisibleBars && nextPan === prev.panOffsetBars) {
+                return prev;
+            }
+            return { ...prev, visibleBars: nextVisible, defaultVisibleBars: nextDefault, panOffsetBars: nextPan };
+        });
+    }, [data.length]);
+    const viewport = React.useMemo(() => computeViewport(data, chartState), [chartState, data]);
     React.useEffect(() => {
-        const canvas = canvasRef.current;
+        console.log('[ChartState::Viewport]', {
+            startIndex: viewport.startIndex,
+            endIndex: viewport.endIndex,
+            visibleBars: chartState.visibleBars,
+            panOffsetBars: chartState.panOffsetBars
+        });
+    }, [chartState.panOffsetBars, chartState.visibleBars, viewport.endIndex, viewport.startIndex]);
+    const safeStart = Math.max(0, viewport.startIndex);
+    const safeEnd = Math.max(safeStart, viewport.endIndex);
+    const visibleData = data.slice(safeStart, safeEnd + 1);
+    const plotArea = React.useMemo(() => ({
+        plotX0: 0,
+        plotX1: width - RIGHT_PADDING_PX$1,
+        leftPaddingPx: 0,
+        rightPaddingPx: RIGHT_PADDING_PX$1
+    }), [width]);
+    const xMapping = React.useMemo(() => computeXMapping(plotArea, viewport), [plotArea, viewport]);
+    React.useEffect(() => {
+        barSpacingRef.current = xMapping.barSpacing;
+    }, [xMapping.barSpacing]);
+    const priceHeight = React.useMemo(() => {
+        if (!chartState.showVolume)
+            return height;
+        return Math.max(160, height - Math.max(48, Math.floor(height * 0.22)));
+    }, [chartState.showVolume, height]);
+    const volumeHeight = Math.max(0, height - priceHeight);
+    const priceWindow = React.useMemo(() => {
+        if (!visibleData.length) {
+            return { min: 0, max: 1 };
+        }
+        if (!chartState.autoScaleY && chartState.yMinManual != null && chartState.yMaxManual != null) {
+            return { min: chartState.yMinManual, max: chartState.yMaxManual };
+        }
+        const values = [];
+        visibleData.forEach(candle => {
+            values.push(candle.low, candle.high);
+        });
+        values.sort((a, b) => a - b);
+        let min = values[0] ?? 0;
+        let max = values[values.length - 1] ?? 1;
+        if (values.length >= 6) {
+            const lowerIdx = Math.max(0, Math.floor(values.length * 0.02));
+            const upperIdx = Math.min(values.length - 1, Math.ceil(values.length * 0.98) - 1);
+            min = values[lowerIdx] ?? min;
+            max = values[upperIdx] ?? max;
+        }
+        if (!Number.isFinite(min) || !Number.isFinite(max)) {
+            return { min: 0, max: 1 };
+        }
+        const clampedPaddingPct = clamp$1(chartState.yPaddingPct, 0.06, 0.1);
+        const rawRange = max - min || Math.abs(max) * 0.01 || 1;
+        const padding = Math.max(rawRange * clampedPaddingPct, 1e-6);
+        return { min: min - padding, max: max + padding };
+    }, [chartState.autoScaleY, chartState.yMaxManual, chartState.yMinManual, chartState.yPaddingPct, visibleData]);
+    const maxVolume = React.useMemo(() => visibleData.reduce((acc, candle) => Math.max(acc, candle.volume ?? 0), 0), [visibleData]);
+    const minTimeVisible = visibleData.length ? getCandleTime(visibleData[0], safeStart) : 0;
+    const maxTimeVisible = visibleData.length ? getCandleTime(visibleData[visibleData.length - 1], safeEnd) : 0;
+    const timeTicks = React.useMemo(() => {
+        if (!visibleData.length)
+            return [];
+        const availableWidth = plotArea.plotX1 - plotArea.plotX0;
+        const maxTicks = Math.max(2, Math.min(10, Math.floor(availableWidth / 120)));
+        const ticks = buildTimeTicks(minTimeVisible, maxTimeVisible, maxTicks);
+        return ticks.map(tick => clamp$1(tick, minTimeVisible, maxTimeVisible));
+    }, [maxTimeVisible, minTimeVisible, plotArea.plotX0, plotArea.plotX1, visibleData]);
+    const resizeCanvas = React.useCallback((canvas) => {
+        if (!canvas)
+            return;
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+    }, [height, width]);
+    React.useEffect(() => {
+        resizeCanvas(priceCanvasRef.current);
+        resizeCanvas(overlayCanvasRef.current);
+    }, [resizeCanvas]);
+    const getXForTimeValue = React.useCallback((tick) => {
+        if (maxTimeVisible === minTimeVisible) {
+            return xMapping.x(safeEnd);
+        }
+        const ratio = (tick - minTimeVisible) / (maxTimeVisible - minTimeVisible);
+        const target = safeStart + ratio * (safeEnd - safeStart);
+        const snapped = clamp$1(Math.round(target), safeStart, safeEnd);
+        return xMapping.x(snapped);
+    }, [maxTimeVisible, minTimeVisible, safeEnd, safeStart, xMapping]);
+    const drawPriceLayer = React.useCallback(() => {
+        const canvas = priceCanvasRef.current;
         if (!canvas)
             return;
         const ctx = canvas.getContext('2d');
         if (!ctx)
             return;
-        // Clear canvas
+        const dpr = window.devicePixelRatio || 1;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         ctx.clearRect(0, 0, width, height);
-        if (data.length === 0)
+        ctx.fillStyle = '#05070d';
+        ctx.fillRect(0, 0, width, height);
+        if (!visibleData.length) {
             return;
-        // Find min and max values
-        const highs = data.map((d) => d.high);
-        const lows = data.map((d) => d.low);
-        const minPrice = Math.min(...lows);
-        const maxPrice = Math.max(...highs);
-        const priceRange = maxPrice - minPrice;
-        const candleWidth = width / data.length;
-        data.forEach((candle, index) => {
-            const x = index * candleWidth;
-            const yHigh = ((maxPrice - candle.high) / priceRange) * height;
-            const yLow = ((maxPrice - candle.low) / priceRange) * height;
-            const yOpen = ((maxPrice - candle.open) / priceRange) * height;
-            const yClose = ((maxPrice - candle.close) / priceRange) * height;
-            // Draw high-low line
-            ctx.strokeStyle = 'black';
-            ctx.beginPath();
-            ctx.moveTo(x + candleWidth / 2, yHigh);
-            ctx.lineTo(x + candleWidth / 2, yLow);
-            ctx.stroke();
-            // Draw open-close body
-            const bodyHeight = Math.abs(yClose - yOpen);
-            const bodyY = Math.min(yOpen, yClose);
-            const isGreen = candle.close > candle.open;
-            ctx.fillStyle = isGreen ? 'green' : 'red';
-            ctx.fillRect(x + candleWidth * 0.1, bodyY, candleWidth * 0.8, bodyHeight);
-            // Draw open/close wicks if body is small
-            if (bodyHeight < 1) {
-                ctx.strokeStyle = isGreen ? 'green' : 'red';
+        }
+        const priceRange = Math.max(priceWindow.max - priceWindow.min, 1e-6);
+        const toY = (value) => ((priceWindow.max - value) / priceRange) * priceHeight;
+        const horizontalDivisions = 4;
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(plotArea.plotX0, 0, plotArea.plotX1 - plotArea.plotX0, priceHeight);
+        ctx.clip();
+        if (chartState.showGrid) {
+            ctx.strokeStyle = '#2b2f3a';
+            ctx.lineWidth = 0.6;
+            ctx.setLineDash([]);
+            for (let i = 0; i <= horizontalDivisions; i++) {
+                const y = alignStroke$1((i / horizontalDivisions) * priceHeight);
                 ctx.beginPath();
-                ctx.moveTo(x + candleWidth / 2, yOpen);
-                ctx.lineTo(x + candleWidth / 2, yClose);
+                ctx.moveTo(plotArea.plotX0, y);
+                ctx.lineTo(plotArea.plotX1, y);
                 ctx.stroke();
             }
+            timeTicks.forEach(tick => {
+                const x = alignStroke$1(getXForTimeValue(tick));
+                ctx.beginPath();
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, priceHeight);
+                ctx.stroke();
+            });
+        }
+        if (chartState.showGridMinor) {
+            ctx.save();
+            ctx.strokeStyle = 'rgba(58,63,83,0.45)';
+            ctx.lineWidth = 0.4;
+            ctx.setLineDash([2, 4]);
+            for (let i = 0; i < horizontalDivisions; i++) {
+                const y = alignStroke$1(((i + 0.5) / horizontalDivisions) * priceHeight);
+                ctx.beginPath();
+                ctx.moveTo(plotArea.plotX0, y);
+                ctx.lineTo(plotArea.plotX1, y);
+                ctx.stroke();
+            }
+            for (let i = 0; i < timeTicks.length - 1; i++) {
+                const mid = (timeTicks[i] + timeTicks[i + 1]) / 2;
+                const x = alignStroke$1(getXForTimeValue(mid));
+                ctx.beginPath();
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, priceHeight);
+                ctx.stroke();
+            }
+            ctx.restore();
+        }
+        if (chartState.hoveredIndex != null && chartState.hoveredIndex >= safeStart && chartState.hoveredIndex <= safeEnd) {
+            const highlightX = xMapping.x(chartState.hoveredIndex);
+            const halfWidth = xMapping.barSpacing * 0.5;
+            ctx.fillStyle = 'rgba(148,163,184,0.08)';
+            ctx.fillRect(highlightX - halfWidth, 0, halfWidth * 2, priceHeight);
+        }
+        if (chartState.showCandles) {
+            visibleData.forEach((candle, offset) => {
+                const index = safeStart + offset;
+                const xCenter = xMapping.x(index);
+                const strokeX = alignStroke$1(xCenter);
+                const yHigh = toY(candle.high);
+                const yLow = toY(candle.low);
+                const yOpen = toY(candle.open);
+                const yClose = toY(candle.close);
+                const isBullish = (candle.close ?? 0) >= (candle.open ?? 0);
+                const bodyHeight = Math.abs(yClose - yOpen);
+                const bodyY = Math.min(yOpen, yClose);
+                ctx.strokeStyle = isBullish ? '#089981' : '#f23645';
+                ctx.lineWidth = Math.max(1, Math.floor(xMapping.barSpacing * 0.2));
+                ctx.beginPath();
+                ctx.moveTo(strokeX, yHigh);
+                ctx.lineTo(strokeX, yLow);
+                ctx.stroke();
+                ctx.fillStyle = isBullish ? '#089981' : '#f23645';
+                if (bodyHeight < 1) {
+                    ctx.beginPath();
+                    ctx.moveTo(xCenter - (xMapping.barSpacing * 0.35), alignStroke$1(yOpen));
+                    ctx.lineTo(xCenter + (xMapping.barSpacing * 0.35), alignStroke$1(yClose));
+                    ctx.stroke();
+                }
+                else {
+                    ctx.fillRect(xCenter - (xMapping.barSpacing * 0.35), bodyY, xMapping.barSpacing * 0.7, bodyHeight);
+                }
+            });
+        }
+        const lastCandle = data[data.length - 1];
+        const prevCandle = data[data.length - 2];
+        if (lastCandle) {
+            const y = toY(lastCandle.close ?? lastCandle.open ?? 0);
+            ctx.save();
+            ctx.strokeStyle = '#facc15';
+            ctx.setLineDash([6, 4]);
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(plotArea.plotX0, y);
+            ctx.lineTo(plotArea.plotX1, y);
+            ctx.stroke();
+            ctx.restore();
+            const prevClose = prevCandle?.close ?? lastCandle.close ?? 0;
+            const delta = (lastCandle.close ?? 0) - prevClose;
+            const deltaPct = prevClose ? (delta / prevClose) * 100 : 0;
+            const badgeY = clamp$1(y, 12, priceHeight - 12);
+            ctx.fillStyle = '#facc15';
+            ctx.fillRect(plotArea.plotX1 + 4, badgeY - 10, RIGHT_PADDING_PX$1 - 8, 20);
+            ctx.fillStyle = '#05070d';
+            ctx.font = '11px Inter, sans-serif';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText((lastCandle.close ?? 0).toFixed(2), plotArea.plotX1 + (RIGHT_PADDING_PX$1 - 8) / 2 + 4, badgeY);
+            ctx.textAlign = 'left';
+            ctx.fillStyle = delta >= 0 ? '#22c55e' : '#ef4444';
+            ctx.fillText(`${delta >= 0 ? '+' : ''}${delta.toFixed(2)} (${deltaPct >= 0 ? '+' : ''}${deltaPct.toFixed(2)}%)`, plotArea.plotX1 + 6, Math.min(priceHeight + 16, height - 8));
+        }
+        ctx.fillStyle = 'rgba(148,163,184,0.12)';
+        ctx.font = '600 32px Inter, sans-serif';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'bottom';
+        ctx.fillText('viainti chart', plotArea.plotX0 + 12, priceHeight - 12);
+        ctx.restore();
+        ctx.fillStyle = '#9da3b4';
+        ctx.font = '11px Inter, sans-serif';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        for (let i = 0; i <= horizontalDivisions; i++) {
+            const price = priceWindow.max - (priceRange * i) / horizontalDivisions;
+            const y = (i / horizontalDivisions) * priceHeight;
+            ctx.fillText(price.toFixed(2), plotArea.plotX0 + 4, y);
+        }
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'bottom';
+        timeTicks.forEach(tick => {
+            const x = clamp$1(getXForTimeValue(tick), plotArea.plotX0 + 4, plotArea.plotX1 - 4);
+            ctx.fillText(formatTickLabel(tick), x, priceHeight - 4);
         });
-    }, [data, width, height]);
-    return React.createElement("canvas", { ref: canvasRef, width: width, height: height });
+        if (chartState.showVolume && volumeHeight > 0) {
+            const baseY = priceHeight + volumeHeight;
+            const usableHeight = volumeHeight - 12;
+            const maxVol = Math.max(maxVolume, 1);
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(plotArea.plotX0, priceHeight, plotArea.plotX1 - plotArea.plotX0, volumeHeight);
+            ctx.clip();
+            visibleData.forEach((candle, offset) => {
+                const index = safeStart + offset;
+                const vol = candle.volume ?? 0;
+                const xCenter = xMapping.x(index);
+                const barWidth = Math.max(2, xMapping.barSpacing * 0.5);
+                const barHeight = (vol / maxVol) * usableHeight;
+                const isBullish = (candle.close ?? 0) >= (candle.open ?? 0);
+                ctx.fillStyle = isBullish ? '#3b82f6' : '#6366f1';
+                ctx.fillRect(xCenter - barWidth / 2, baseY - barHeight, barWidth, barHeight);
+                if (chartState.hoveredIndex === index) {
+                    ctx.fillStyle = 'rgba(148,163,184,0.12)';
+                    ctx.fillRect(xCenter - barWidth / 2, baseY - barHeight, barWidth, barHeight);
+                }
+            });
+            ctx.restore();
+        }
+    }, [chartState.hoveredIndex, chartState.showCandles, chartState.showGrid, chartState.showGridMinor, chartState.showVolume, data, getXForTimeValue, height, maxVolume, plotArea.plotX0, plotArea.plotX1, priceHeight, priceWindow.max, priceWindow.min, safeEnd, safeStart, timeTicks, visibleData, volumeHeight, width, xMapping]);
+    const drawOverlayLayer = React.useCallback(() => {
+        const canvas = overlayCanvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const dpr = window.devicePixelRatio || 1;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, width, height);
+        if (!chartState.crosshairEnabled || chartState.crosshairX == null || chartState.crosshairY == null) {
+            return;
+        }
+        const hoveredIndex = chartState.hoveredIndex;
+        const hoveredCandle = hoveredIndex != null ? data[hoveredIndex] : null;
+        const priceRange = Math.max(priceWindow.max - priceWindow.min, 1e-6);
+        const timeValue = hoveredIndex != null ? getCandleTime(data[hoveredIndex], hoveredIndex) : null;
+        const priceValue = hoveredCandle?.close ?? (priceWindow.max - (chartState.crosshairY / Math.max(priceHeight, 1)) * priceRange);
+        ctx.strokeStyle = '#8186a5';
+        ctx.lineWidth = 1;
+        ctx.setLineDash([4, 4]);
+        ctx.beginPath();
+        ctx.moveTo(chartState.crosshairX, 0);
+        ctx.lineTo(chartState.crosshairX, height);
+        ctx.moveTo(0, chartState.crosshairY);
+        ctx.lineTo(width, chartState.crosshairY);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        if (priceValue != null) {
+            ctx.fillStyle = '#1e293b';
+            ctx.fillRect(plotArea.plotX1 + 2, chartState.crosshairY - 10, RIGHT_PADDING_PX$1 - 4, 20);
+            ctx.fillStyle = '#f8fafc';
+            ctx.font = '11px Inter, sans-serif';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(priceValue.toFixed(2), plotArea.plotX1 + (RIGHT_PADDING_PX$1 / 2), chartState.crosshairY);
+        }
+        if (timeValue != null) {
+            const labelY = Math.min(priceHeight + volumeHeight - 4, height - 4);
+            const labelWidth = 90;
+            const labelX = clamp$1(chartState.crosshairX - labelWidth / 2, plotArea.plotX0 + 4, plotArea.plotX1 - labelWidth - 4);
+            ctx.fillStyle = '#1e293b';
+            ctx.fillRect(labelX, labelY - 18, labelWidth, 18);
+            ctx.fillStyle = '#f8fafc';
+            ctx.font = '10px Inter, sans-serif';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(formatTickLabel(timeValue), labelX + labelWidth / 2, labelY - 9);
+        }
+        if (hoveredCandle) {
+            const tooltipLines = [
+                `O ${hoveredCandle.open?.toFixed(2) ?? '—'}`,
+                `H ${hoveredCandle.high?.toFixed(2) ?? '—'}`,
+                `L ${hoveredCandle.low?.toFixed(2) ?? '—'}`,
+                `C ${hoveredCandle.close?.toFixed(2) ?? '—'}`,
+                `V ${(hoveredCandle.volume ?? 0).toLocaleString('en-US', { maximumFractionDigits: 2 })}`
+            ];
+            const boxWidth = 120;
+            const boxHeight = tooltipLines.length * 16 + 12;
+            const boxX = plotArea.plotX0 + 12;
+            const boxY = 12;
+            ctx.fillStyle = '#0f172aee';
+            ctx.fillRect(boxX, boxY, boxWidth, boxHeight);
+            ctx.strokeStyle = '#22d3ee';
+            ctx.strokeRect(boxX, boxY, boxWidth, boxHeight);
+            ctx.fillStyle = '#f8fafc';
+            ctx.font = '11px Inter, sans-serif';
+            ctx.textAlign = 'left';
+            ctx.textBaseline = 'middle';
+            tooltipLines.forEach((line, idx) => {
+                ctx.fillText(line, boxX + 8, boxY + 12 + idx * 16);
+            });
+        }
+    }, [chartState.crosshairEnabled, chartState.crosshairX, chartState.crosshairY, chartState.hoveredIndex, data, height, priceHeight, priceWindow.max, priceWindow.min, plotArea.plotX0, plotArea.plotX1, volumeHeight, width]);
+    React.useEffect(() => {
+        if (rafRef.current) {
+            cancelAnimationFrame(rafRef.current);
+        }
+        rafRef.current = requestAnimationFrame(() => {
+            drawPriceLayer();
+            drawOverlayLayer();
+        });
+        return () => {
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+        };
+    }, [drawOverlayLayer, drawPriceLayer]);
+    const updateVisibleBars = React.useCallback((factor) => {
+        if (chartState.locked)
+            return;
+        setChartState(prev => {
+            const dataLen = Math.max(data.length, 1);
+            const minBars = Math.min(Math.max(MIN_VISIBLE_BARS, 1), dataLen);
+            const maxBars = Math.max(minBars, Math.min(MAX_VISIBLE_BARS, dataLen));
+            const nextVisible = clamp$1(Math.round(prev.visibleBars * factor), minBars, maxBars);
+            if (nextVisible === prev.visibleBars)
+                return prev;
+            const bounds = getPanBounds(nextVisible, dataLen);
+            const nextPan = clamp$1(prev.panOffsetBars, bounds.min, bounds.max);
+            return { ...prev, visibleBars: nextVisible, panOffsetBars: nextPan };
+        });
+    }, [chartState.locked, data.length]);
+    const updatePan = React.useCallback((deltaBars) => {
+        setChartState(prev => {
+            const bounds = getPanBounds(prev.visibleBars, data.length);
+            const nextPan = clamp$1(prev.panOffsetBars + deltaBars, bounds.min, bounds.max);
+            if (nextPan === prev.panOffsetBars)
+                return prev;
+            return { ...prev, panOffsetBars: nextPan };
+        });
+    }, [data.length]);
+    const handleWheel = React.useCallback((event) => {
+        if (chartState.locked)
+            return;
+        event.preventDefault();
+        const factor = event.deltaY > 0 ? 1.18 : 0.85;
+        updateVisibleBars(factor);
+    }, [chartState.locked, updateVisibleBars]);
+    const updateCrosshairPosition = React.useCallback((clientX, clientY) => {
+        if (chartState.locked || !chartState.crosshairEnabled || !visibleData.length)
+            return;
+        const rect = chartAreaRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        const localX = clientX - rect.left;
+        clientY - rect.top;
+        const relative = (localX - (plotArea.plotX0 + xMapping.offsetX)) / (xMapping.barSpacing || 1);
+        const approx = safeStart + relative;
+        const snapped = clamp$1(Math.round(approx), safeStart, safeEnd);
+        const crosshairX = xMapping.x(snapped);
+        const hoveredCandle = data[snapped];
+        const priceRange = Math.max(priceWindow.max - priceWindow.min, 1e-6);
+        const price = hoveredCandle?.close ?? hoveredCandle?.open ?? priceWindow.min;
+        const snappedY = ((priceWindow.max - price) / priceRange) * priceHeight;
+        const crosshairY = clamp$1(snappedY, 0, priceHeight);
+        setChartState(prev => ({ ...prev, crosshairX, crosshairY, hoveredIndex: snapped }));
+    }, [chartState.crosshairEnabled, chartState.locked, data, priceHeight, priceWindow.max, priceWindow.min, plotArea.plotX0, safeEnd, safeStart, visibleData.length, xMapping]);
+    const handlePointerDown = React.useCallback((event) => {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        chartAreaRef.current?.setPointerCapture(event.pointerId);
+        isDraggingRef.current = true;
+        lastPointerXRef.current = event.clientX;
+        updateCrosshairPosition(event.clientX, event.clientY);
+    }, [updateCrosshairPosition]);
+    const handlePointerMove = React.useCallback((event) => {
+        if (isDraggingRef.current && !chartState.locked) {
+            const deltaX = event.clientX - lastPointerXRef.current;
+            lastPointerXRef.current = event.clientX;
+            const deltaBars = -(deltaX / (barSpacingRef.current || 1));
+            updatePan(deltaBars);
+            return;
+        }
+        updateCrosshairPosition(event.clientX, event.clientY);
+    }, [chartState.locked, updateCrosshairPosition, updatePan]);
+    const handlePointerUp = React.useCallback((event) => {
+        chartAreaRef.current?.releasePointerCapture(event.pointerId);
+        isDraggingRef.current = false;
+    }, []);
+    const handlePointerLeave = React.useCallback(() => {
+        isDraggingRef.current = false;
+        setChartState(prev => ({
+            ...prev,
+            crosshairX: chartState.crosshairEnabled ? null : prev.crosshairX,
+            crosshairY: chartState.crosshairEnabled ? null : prev.crosshairY,
+            hoveredIndex: null
+        }));
+    }, [chartState.crosshairEnabled]);
+    const handleReset = React.useCallback(() => {
+        setChartState(prev => ({
+            ...prev,
+            panOffsetBars: 0,
+            visibleBars: prev.defaultVisibleBars,
+            crosshairEnabled: true,
+            crosshairX: null,
+            crosshairY: null,
+            hoveredIndex: null,
+            autoScaleY: true,
+            showCandles: true,
+            showVolume: true,
+            showGrid: true,
+            showGridMinor: true
+        }));
+    }, []);
+    const handleSnapshot = React.useCallback(() => {
+        const priceCanvas = priceCanvasRef.current;
+        if (!priceCanvas)
+            return;
+        const overlayCanvas = overlayCanvasRef.current;
+        const exportCanvas = document.createElement('canvas');
+        exportCanvas.width = priceCanvas.width;
+        exportCanvas.height = priceCanvas.height;
+        const ctx = exportCanvas.getContext('2d');
+        if (!ctx)
+            return;
+        ctx.drawImage(priceCanvas, 0, 0);
+        if (overlayCanvas) {
+            ctx.drawImage(overlayCanvas, 0, 0);
+        }
+        const link = document.createElement('a');
+        link.download = 'chart-simple.png';
+        link.href = exportCanvas.toDataURL('image/png');
+        link.click();
+    }, []);
+    const derivedVisibleBars = Math.max(1, Math.min(chartState.visibleBars, data.length || chartState.visibleBars));
+    return (React.createElement("div", { style: { width } },
+        React.createElement("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '12px' } },
+            React.createElement("button", { onClick: () => updateVisibleBars(0.85), disabled: chartState.locked, style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: chartState.locked ? '#1f2937' : '#0f172a', color: '#f8fafc' } }, "Zoom +"),
+            React.createElement("button", { onClick: () => updateVisibleBars(1.18), disabled: chartState.locked, style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: chartState.locked ? '#1f2937' : '#0f172a', color: '#f8fafc' } }, "Zoom -"),
+            React.createElement("button", { onClick: () => setChartState(prev => ({ ...prev, locked: !prev.locked })), style: { padding: '6px 12px', borderRadius: '999px', border: chartState.locked ? '1px solid #fbbf24' : '1px solid #475569', background: chartState.locked ? '#fbbf2411' : '#0f172a', color: '#f8fafc' } }, chartState.locked ? 'Unlock' : 'Lock'),
+            React.createElement("button", { onClick: () => setChartState(prev => ({
+                    ...prev,
+                    crosshairEnabled: !prev.crosshairEnabled,
+                    crosshairX: prev.crosshairEnabled ? null : prev.crosshairX,
+                    crosshairY: prev.crosshairEnabled ? null : prev.crosshairY,
+                    hoveredIndex: prev.crosshairEnabled ? null : prev.hoveredIndex
+                })), style: { padding: '6px 12px', borderRadius: '999px', border: chartState.crosshairEnabled ? '1px solid #22d3ee' : '1px solid #475569', background: chartState.crosshairEnabled ? '#22d3ee11' : '#0f172a', color: '#f8fafc' } }, chartState.crosshairEnabled ? 'Crosshair on' : 'Crosshair off'),
+            React.createElement("button", { onClick: handleReset, style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: '#0f172a', color: '#f8fafc' } }, "Reset"),
+            React.createElement("button", { onClick: handleSnapshot, style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: '#0f172a', color: '#f8fafc' } }, "Camera"),
+            React.createElement("button", { onClick: () => setShowMenu(prev => !prev), style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: showMenu ? '#22c55e11' : '#0f172a', color: '#f8fafc' } }, "Menu")),
+        showMenu && (React.createElement("div", { style: { marginBottom: '12px', padding: '12px', borderRadius: '16px', border: '1px solid #1f2937', background: '#0b1120', color: '#e2e8f0', display: 'flex', flexWrap: 'wrap', gap: '10px' } }, [
+            { key: 'showCandles', label: 'Mostrar velas' },
+            { key: 'showVolume', label: 'Mostrar volumen' },
+            { key: 'showGrid', label: 'Grilla mayor' },
+            { key: 'showGridMinor', label: 'Grilla menor' },
+            { key: 'autoScaleY', label: 'Auto scale Y' }
+        ].map(toggle => (React.createElement("label", { key: toggle.key, style: { display: 'flex', alignItems: 'center', gap: '6px', fontSize: '12px' } },
+            React.createElement("input", { type: "checkbox", checked: chartState[toggle.key], onChange: () => setChartState(prev => ({ ...prev, [toggle.key]: !prev[toggle.key] })) }),
+            toggle.label))))),
+        React.createElement("div", { ref: chartAreaRef, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onWheel: handleWheel, style: { position: 'relative', width, height, borderRadius: '20px', overflow: 'hidden', border: '1px solid #1f2937', background: '#05070d', touchAction: 'none' } },
+            React.createElement("canvas", { ref: priceCanvasRef, style: { position: 'absolute', inset: 0 } }),
+            React.createElement("canvas", { ref: overlayCanvasRef, style: { position: 'absolute', inset: 0, pointerEvents: 'none' } })),
+        React.createElement("p", { style: { marginTop: '8px', fontSize: '12px', color: '#94a3b8' } },
+            "Ventana: ",
+            derivedVisibleBars,
+            " velas visibles \u00B7 Pan offset ",
+            chartState.panOffsetBars.toFixed(2),
+            " barras")));
 };
 
 var DefaultContext = {
@@ -2085,10 +2665,14 @@ const CUSTOM_THEME_FIELDS = [
 const MIN_CANDLE_PX = 4;
 const MAX_CANDLE_PX = 28;
 const BUFFER_FRACTION = 0.18;
-const LEFT_OFFSET_BARS = 2;
-const RIGHT_OFFSET_BARS = 18;
-const BAR_BODY_RATIO = 0.78;
 const GRID_DIVISIONS = 10;
+const RIGHT_PADDING_PX = 60;
+const RIGHT_PADDING_MIN = 40;
+const RIGHT_PADDING_MAX = 120;
+const LEFT_PADDING_PX = 0;
+const MIN_BAR_SPACING = 6;
+const MAX_BAR_SPACING = 16;
+const MIN_BODY_WIDTH = 3;
 const INERTIA_DURATION_MS = 900;
 const ZOOM_MIN = 0.2;
 const ZOOM_MAX = 6;
@@ -2114,19 +2698,19 @@ const determinePriceFormat = (reference) => {
         return { min: 2, max: 3 };
     return { min: 2, max: 2 };
 };
-const getEffectiveBarCount = (count) => Math.max(count + LEFT_OFFSET_BARS + RIGHT_OFFSET_BARS, 1);
-const getCandleStep = (width, count) => (width <= 0 ? 0 : width / getEffectiveBarCount(count));
-const getCandleCenter = (index, width, count) => {
-    const step = getCandleStep(width, count);
-    return (index + LEFT_OFFSET_BARS + 0.5) * step;
+const getPlotArea = ({ containerWidth, containerHeight, leftToolsWidth, priceScaleWidth, paddingLeft = 0, paddingRight = 0, paddingTop = 0, paddingBottom = 0 }) => {
+    const plotX0 = Math.max(0, leftToolsWidth + paddingLeft);
+    const plotX1 = Math.max(plotX0, containerWidth - priceScaleWidth - paddingRight);
+    const usableWidth = Math.max(1, plotX1 - plotX0);
+    const usableHeight = Math.max(1, containerHeight - paddingTop - paddingBottom);
+    return {
+        plotX0,
+        plotX1,
+        plotWidth: usableWidth,
+        plotHeight: usableHeight
+    };
 };
 const clampPixelToChart = (pixel, width) => Math.max(0, Math.min(width, pixel));
-const pixelToCandleIndex = (pixel, width, count) => {
-    const step = getCandleStep(width, count);
-    if (step === 0)
-        return 0;
-    return pixel / step - LEFT_OFFSET_BARS - 0.5;
-};
 const clampCandleIndex = (value, length) => {
     if (length <= 0)
         return 0;
@@ -2231,7 +2815,19 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
     const showCrosshairRef = React.useRef(false);
     const containerRef = React.useRef(null);
     const plotAreaRef = React.useRef(null);
+    const layoutRowRef = React.useRef(null);
+    const barGeometryRef = React.useRef({ barSpacing: MAX_BAR_SPACING, offsetX: 0 });
     const priceWindowRef = React.useRef({ min: 0, max: 1 });
+    const projectPixelToIndex = React.useCallback((pixelX) => {
+        const { barSpacing, offsetX } = barGeometryRef.current;
+        if (barSpacing <= 0)
+            return 0;
+        return (pixelX - offsetX) / barSpacing;
+    }, []);
+    const getLocalCenter = React.useCallback((index) => {
+        const { barSpacing, offsetX } = barGeometryRef.current;
+        return offsetX + index * barSpacing;
+    }, []);
     const [dimensions, setDimensions] = React.useState({ width: 800, height: 400, cssWidth: 800, cssHeight: 400 });
     const isDraggingRef = React.useRef(false);
     const lastMouseXRef = React.useRef(0);
@@ -2275,6 +2871,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
             default: return 25;
         }
     }, []);
+    const totalDataPoints = storeData.length;
     React.useEffect(() => {
         setData(data);
     }, [data, setData]);
@@ -2360,7 +2957,8 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         if (!chartWidth)
             return;
         const candles = getVisibleCandles();
-        const pxPerCandle = chartWidth / Math.max(getEffectiveBarCount(candles.length || 1), 1);
+        const spacing = barGeometryRef.current.barSpacing || (chartWidth / Math.max(candles.length || 1, 1));
+        const pxPerCandle = Math.max(spacing, 1e-3);
         if (!isFinite(pxPerCandle) || pxPerCandle === 0)
             return;
         const deltaOffset = deltaPx / Math.max(pxPerCandle, 1e-3);
@@ -2517,6 +3115,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
     const [noteDraft, setNoteDraft] = React.useState('');
     const [priceFormat, setPriceFormat] = React.useState({ min: 2, max: 4 });
     const [isMobile, setIsMobile] = React.useState(false);
+    const [layoutSize, setLayoutSize] = React.useState({ width: 0, height: 0 });
     React.useEffect(() => {
         if (!plotAreaRef.current)
             return;
@@ -2530,6 +3129,20 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         window.addEventListener('resize', checkMobile);
         return () => window.removeEventListener('resize', checkMobile);
     }, []);
+    React.useEffect(() => {
+        if (!layoutRowRef.current || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(entries => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            const { width, height } = entry.contentRect;
+            setLayoutSize(prev => (prev.width === width && prev.height === height ? prev : { width, height }));
+        });
+        observer.observe(layoutRowRef.current);
+        return () => observer.disconnect();
+    }, []);
     React.useEffect(() => {
         if (!visibleData.length)
             return;
@@ -2603,11 +3216,77 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         const referenceMagnitude = Math.min(Math.abs(minPrice), Math.abs(maxPrice)) || Math.max(Math.abs(minPrice), Math.abs(maxPrice));
         const suggestedFormat = determinePriceFormat(referenceMagnitude);
         setPriceFormat((prev) => (prev.min === suggestedFormat.min && prev.max === suggestedFormat.max ? prev : suggestedFormat));
-        const chartWidth = Math.max(1, cssWidth - priceScaleWidth);
-        const chartHeight = Math.max(1, cssHeight - timeScaleHeight - volumeHeight);
-        const candleStep = getCandleStep(chartWidth, candles.length);
-        const candleWidth = Math.max(1, candleStep * BAR_BODY_RATIO);
-        const centerX = (index) => getCandleCenter(index, chartWidth, candles.length);
+        const leftToolsWidth = showDrawingToolbar ? (isMobile ? 60 : 88) : 0;
+        const layoutRect = layoutRowRef.current?.getBoundingClientRect();
+        const fallbackWidth = leftToolsWidth + cssWidth;
+        const layoutWidth = layoutSize.width || layoutRect?.width || fallbackWidth;
+        const layoutHeight = layoutSize.height || layoutRect?.height || cssHeight;
+        const paddingLeft = 0;
+        const paddingRight = 0;
+        const effectiveContainerHeight = Math.max(0, layoutHeight - timeScaleHeight);
+        const plotArea = getPlotArea({
+            containerWidth: layoutWidth,
+            containerHeight: layoutHeight,
+            leftToolsWidth,
+            priceScaleWidth,
+            paddingLeft,
+            paddingRight
+        });
+        const chartWidth = Math.max(1, plotArea.plotWidth);
+        const chartHeight = Math.max(1, plotArea.plotHeight - volumeHeight);
+        const visibleBars = Math.max(candles.length, 1);
+        const leftPaddingPx = LEFT_PADDING_PX;
+        const rightPaddingPx = clamp(RIGHT_PADDING_PX, RIGHT_PADDING_MIN, RIGHT_PADDING_MAX);
+        const targetFirstLocal = leftPaddingPx;
+        const targetLastLocal = Math.max(targetFirstLocal, plotArea.plotWidth - rightPaddingPx);
+        const indexSpan = Math.max(visibleBars - 1, 1);
+        const availableSpan = Math.max(targetLastLocal - targetFirstLocal, MIN_BAR_SPACING);
+        const barSpacing = clamp(availableSpan / indexSpan, MIN_BAR_SPACING, MAX_BAR_SPACING);
+        const candleWidth = clamp(barSpacing * 0.7, MIN_BODY_WIDTH, Math.max(barSpacing - 2, MIN_BODY_WIDTH));
+        const wickWidth = Math.max(1, Math.floor(candleWidth * 0.2));
+        const windowMeta = visibleWindowRef.current;
+        const startIndex = windowMeta.start;
+        const endIndex = Math.max(windowMeta.end - 1, startIndex);
+        const spanBars = Math.max(0, endIndex - startIndex);
+        const rawOffset = targetLastLocal - spanBars * barSpacing;
+        const maxOffset = Math.max(0, plotArea.plotWidth - rightPaddingPx);
+        const offsetXLocal = clamp(rawOffset, 0, maxOffset);
+        const xForIndex = (absIndex) => plotArea.plotX0 + offsetXLocal + (absIndex - startIndex) * barSpacing;
+        const centerX = (index) => xForIndex(startIndex + index) - plotArea.plotX0;
+        const lastXAbsolute = candles.length ? xForIndex(endIndex) : plotArea.plotX0 + offsetXLocal;
+        const lastX = lastXAbsolute - plotArea.plotX0;
+        const gapLeft = offsetXLocal - leftPaddingPx;
+        const gapRight = targetLastLocal - lastX;
+        if (Math.abs(gapLeft) > 2 || Math.abs(gapRight) > 2) {
+            console.warn('[ChartLayout] gap mismatch', { gapLeft, gapRight, visibleBars, startIndex, endIndex });
+        }
+        const panOffset = panOffsetRef.current;
+        barGeometryRef.current = { barSpacing, offsetX: offsetXLocal };
+        console.log('[ChartLayout]', {
+            containerWidth: layoutWidth,
+            containerHeight: effectiveContainerHeight,
+            leftToolsWidth,
+            priceScaleWidth,
+            paddingLeft,
+            paddingRight,
+            plotX0: plotArea.plotX0,
+            plotX1: plotArea.plotX1,
+            plotWidth: plotArea.plotWidth,
+            plotHeight: plotArea.plotHeight,
+            dataLength: totalDataPoints,
+            visibleBars: candles.length,
+            barSpacing,
+            candleWidth,
+            wickWidth,
+            rightPaddingPx,
+            offsetIndex: panOffset,
+            offsetXPx: offsetXLocal,
+            startIndex,
+            endIndex,
+            lastX,
+            lastXAbsolute,
+            gapRight
+        });
         // Generate price labels
         const priceLabelsArray = [];
         for (let i = 0; i <= 10; i++) {
@@ -2644,7 +3323,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
             }
             const timeStep = Math.max(1, Math.floor(Math.max(candles.length, 1) / GRID_DIVISIONS));
             for (let i = 0; i <= candles.length; i += timeStep) {
-                const x = alignStroke((i + LEFT_OFFSET_BARS) * candleStep);
+                const x = alignStroke(offsetXLocal + i * barSpacing);
                 if (x < 0 || x > chartWidth)
                     continue;
                 gridCtx.beginPath();
@@ -2680,7 +3359,6 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
                     else if (seriesType === 'step') {
                         const prev = candles[index - 1];
                         if (prev) {
-                            centerX(index - 1);
                             const prevY = ((maxPrice - prev.close) / priceRange) * chartHeight;
                             chartCtx.lineTo(x, prevY);
                             chartCtx.lineTo(x, yClose);
@@ -2740,7 +3418,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
                         seriesType === 'high-low';
                     if (usesWick) {
                         chartCtx.strokeStyle = color;
-                        chartCtx.lineWidth = 1;
+                        chartCtx.lineWidth = wickWidth;
                         chartCtx.beginPath();
                         chartCtx.moveTo(strokeX, alignedYHigh);
                         chartCtx.lineTo(strokeX, alignedYLow);
@@ -2846,7 +3524,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
             });
             indicatorCtx.setLineDash([]); // Reset line dash
         }
-    }, [visibleData, cssWidth, cssHeight, colorScheme, calculatedIndicators, seriesType, getVisibleCandles]);
+    }, [visibleData, cssWidth, cssHeight, colorScheme, calculatedIndicators, seriesType, getVisibleCandles, showDrawingToolbar, isMobile, totalDataPoints, layoutSize]);
     const drawCrosshair = React.useCallback(() => {
         const overlayCtx = overlayRef.current?.getContext('2d');
         if (overlayCtx && showCrosshairRef.current) {
@@ -2883,13 +3561,13 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         }
         if (!isDraggingRef.current) {
             const { min, max } = priceWindowRef.current;
-            const rawIndex = pixelToCandleIndex(x, chartWidth, visibleData.length);
+            const rawIndex = projectPixelToIndex(x);
             const hoveredIndex = clampCandleIndex(rawIndex, visibleData.length);
             const hoveredCandle = visibleData[hoveredIndex];
             const snappedPrice = coordsRef.current.snapToPrice(y, chartHeight, min, max);
             const yPixel = coordsRef.current.priceToPixel(snappedPrice, chartHeight, min, max);
             const xPixel = magnetEnabled
-                ? getCandleCenter(hoveredIndex, chartWidth, visibleData.length)
+                ? getLocalCenter(hoveredIndex)
                 : clampPixelToChart(x, chartWidth);
             mousePosRef.current = { x: xPixel, y: yPixel };
             setCrosshairMeta({
@@ -2955,8 +3633,8 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         let snappedPrice = coordsRef.current.snapToPrice(y, chartHeight, bounds.minPrice, bounds.maxPrice, 0.5);
         let snappedY = y;
         if (magnetEnabled && targetData.length) {
-            const snappedIndex = clampCandleIndex(pixelToCandleIndex(x, chartWidth, dataLength), dataLength);
-            x = getCandleCenter(snappedIndex, chartWidth, dataLength);
+            const snappedIndex = clampCandleIndex(projectPixelToIndex(x), dataLength);
+            x = getLocalCenter(snappedIndex);
             snappedY = coordsRef.current.priceToPixel(snappedPrice, chartHeight, bounds.minPrice, bounds.maxPrice);
             y = snappedY;
         }
@@ -2964,7 +3642,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
             x = clampPixelToChart(x, chartWidth);
         }
         const price = coordsRef.current.pixelToPrice(snappedY, chartHeight, bounds.minPrice, bounds.maxPrice);
-        const hoveredIndex = clampCandleIndex(pixelToCandleIndex(x, chartWidth, dataLength), dataLength);
+        const hoveredIndex = clampCandleIndex(projectPixelToIndex(x), dataLength);
         const time = targetData[hoveredIndex]?.timestamp ?? hoveredIndex;
         return { x, y: snappedY, price, time };
     }, [visibleData, storeData, magnetEnabled, chartWidth, chartHeight, interactionsLocked]);
@@ -3177,7 +3855,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
         }
         if (visibleData.length) {
             const { min, max } = priceWindowRef.current;
-            const snappedIndex = clampCandleIndex(pixelToCandleIndex(rawX, chartWidth, visibleData.length), visibleData.length);
+            const snappedIndex = clampCandleIndex(projectPixelToIndex(rawX), visibleData.length);
             setSelectedCandleIndex(snappedIndex);
             const price = coordsRef.current.pixelToPrice(rawY, chartHeight, min, max);
             setClickedPrice({ x: rawX, y: rawY, price });
@@ -3695,7 +4373,7 @@ const TradingViewChart = ({ data, symbol = 'BTC/USDT', onTimeframeChange, showSt
                             fontSize: '13px',
                             fontWeight: 600
                         } }, "Save note"))))),
-        React.createElement("div", { style: {
+        React.createElement("div", { ref: layoutRowRef, style: {
                 flex: 1,
                 display: 'flex',
                 gap: isMobile ? '12px' : '16px',