// Draw 40x40 white circle with SVG icon on chart right side
chart.drawRightSideCircle = function() {
    const a = this.getChartArea();
    
    // Check if current running candle is within 1% from right edge
    const twoCm = 100;
    const startX = a.left + this.panOffset + twoCm;
    const i = this.currentCandleIndex;
    const isOddCandle = (i % 2) === 0;
    const gridIndex = Math.floor(i / 2);
    const currentCandleX = isOddCandle ?
        startX + gridIndex * twoCm :
        startX + gridIndex * twoCm + twoCm / 2;
    
    const rightEdgeThreshold = a.left + a.width - (a.width * 0.01);
    const shouldShowCircle = currentCandleX >= rightEdgeThreshold;
    
    if (!shouldShowCircle) {
        // Hide circle and icon
        const chartContainer = this.canvas.parentElement;
        let existingIcon = chartContainer.querySelector('.chart-right-circle-icon');
        if (existingIcon) existingIcon.remove();
        return;
    }
    
    const circleX = a.left + a.width - (a.width * 0.01); // 1% from right edge
    const circleY = a.top + (a.height * 0.5); // 50% from top
    const radius = 20; // 40px diameter = 20px radius
    
    // Check if mouse is hovering over circle
    const isHovered = this.mouseX && this.mouseY && 
        Math.sqrt(Math.pow(this.mouseX - circleX, 2) + Math.pow(this.mouseY - circleY, 2)) <= radius;
    
    // Draw circle with hover effect
    this.ctx.fillStyle = isHovered ? '#026FD3' : '#ffffff';
    this.ctx.beginPath();
    this.ctx.arc(circleX, circleY, radius, 0, 2 * Math.PI);
    this.ctx.fill();
    
    // Set cursor style and hide crosshair on hover
    if (isHovered) {
        this.canvas.style.setProperty('cursor', 'pointer', 'important');
        this.showCrosshair = false;
    } else if (!this.isDragging) {
        this.canvas.style.setProperty('cursor', 'default', 'important');
        this.showCrosshair = true;
    }
    
    // Store circle position for click detection
    this.circlePosition = { x: circleX, y: circleY, radius: radius };
    
    // Create SVG icon in the center
    const iconSize = 20;
    const iconColor = isHovered ? 'white' : 'blue';
    const iconHTML = `
        <div style="position: absolute; left: ${circleX - iconSize/2}px; top: ${circleY - iconSize/2}px; width: ${iconSize}px; height: ${iconSize}px; pointer-events: none; z-index: 9999;">
            <svg class="icon-arrow-right" width="${iconSize}" height="${iconSize}" style="fill: ${iconColor}; color: ${iconColor}; z-index: 9999;">
                <use xlink:href="./svg/spritemap.svg#icon-arrow-right"></use>
            </svg>
        </div>
    `;
    
    // Add icon to chart container
    const chartContainer = this.canvas.parentElement;
    let existingIcon = chartContainer.querySelector('.chart-right-circle-icon');
    if (existingIcon) existingIcon.remove();
    
    const iconDiv = document.createElement('div');
    iconDiv.className = 'chart-right-circle-icon';
    iconDiv.style.zIndex = '9999';
    iconDiv.innerHTML = iconHTML.trim();
    chartContainer.appendChild(iconDiv);
};