Setting symbol drag and drop limit

Question

I have a table I created with chart.js in Modal. In this modal, I also have a symbol that I write the position in the chart in the tooltip both by drag and drop and by clicking. I want this symbol to be draggable only within certain pixel ranges. The values for the pixel equivalent should be taken from the database, converted to pixels and added to the limitation section. I was able to make this limitation for the x axis, but there is no limitation for the y axis. These are the Codes:

 function dragElement(elmnt) {
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            elmnt.onmousedown = dragMouseDown;

            function dragMouseDown(e) {
                e = e || window.event;
                e.preventDefault();
                pos3 = e.clientX;
                pos4 = e.clientY;
                document.onmouseup = closeDragElement;
                document.onmousemove = elementDrag;
            }

            function elementDrag(e) {
                e = e || window.event;
                e.preventDefault();

                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;

                var minX = calculatePixelValue(minFluidOutletTemp);
                var maxX = calculatePixelValue(maxFluidOutletTemp);
                var minY = calculateYPixelValue(maxAmbientTemp); 
                var maxY = calculateYPixelValue(minAmbientTemp); 

                var newX = elmnt.offsetLeft - pos1;
                var newY = elmnt.offsetTop - pos2;

                newX = Math.min(Math.max(newX, minX), maxX);
                newY = Math.min(Math.max(newY, minY), maxY);

                elmnt.style.left = newX + "px";
                elmnt.style.top = newY + "px";
                console.log("Sembolün X konumu (piksel):", newX);
                console.log("Sembolün Y konumu (piksel):", newY);
                updateTooltipPosition(elmnt);
            }

            function closeDragElement() {
                document.onmouseup = null;
                document.onmousemove = null;
            }
           
            function calculatePixelValue(value) {
                var chartInstance = myChart;
                var chartArea = chartInstance.chartArea;
                var chartWidth = chartArea.right - chartArea.left;
                var chartHeight = chartArea.bottom - chartArea.top;

                var normalizedValue = (value - xAxisMin) / (xAxisMax - xAxisMin);
                var pixelValue = chartArea.left + normalizedValue * chartWidth;
                return pixelValue;
            }
            
            function calculateYPixelValue(value) {
                var chartInstance = myChart;
                var chartArea = chartInstance.chartArea;
                var chartHeight = chartArea.bottom - chartArea.top;

                var normalizedValue = (value - yAxisMin) / (yAxisMax - yAxisMin);
                var pixelValue = chartArea.bottom - normalizedValue * chartHeight;
                return pixelValue;
            }
        }

How can I take the values from the database for the y-axis, convert them to pixels and set the limit correctly? With these codes, the y-axis upper limit is set correctly, but the lower limit is not set.