Chart.js coloring the shape in a chart

Question

I have a chart I created with Chart.js. In this chart, I have four points and these points are connected and a quadrilateral is obtained and the inside is colored green. But in this way, the y-axis points are painted higher even though they are lower, and the right place remains unpainted even though the points are lower. How can this unpainted area be painted?

var ctx = document.getElementById('workingLimitGraph').getContext('2d');
        var minFluidOutletTemp = @Model.SerieLimits.Cooling_MinFluidOutletTemp;
        var maxFluidOutletTemp = @Model.SerieLimits.Cooling_MaxFluidOutletTemp;
        var minAmbientTemp = @Model.SerieLimits.Cooling_MinAmbientTemp;
        var maxAmbientTemp = @Model.SerieLimits.Cooling_MaxAmbientTemp;

        var xAxisMin = minFluidOutletTemp - 5;
        var xAxisMax = maxFluidOutletTemp + 5;
        var yAxisMin = minAmbientTemp - 10;
        var yAxisMax = maxAmbientTemp + 10;

        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: '',
                    data: [
                        { x: minFluidOutletTemp, y: minAmbientTemp },
                        { x: minFluidOutletTemp, y: maxAmbientTemp },
                        { x: maxFluidOutletTemp, y: maxAmbientTemp },
                        { x: maxFluidOutletTemp, y: minAmbientTemp }
                    ],
                    fill: true,
                    backgroundColor: 'rgba(0, 128, 0, 0.3)',
                    borderColor: 'rgba(0, 128, 0, 0.3)',
                    borderWidth: 1,
                    pointRadius: 5,
                    pointBackgroundColor: 'rgba(0, 128, 0, 0.3)',
                    pointBorderColor: 'rgba(0, 128, 0, 0.3)',
                    showLine: true
                }]
            },
            options: {
                maintainAspectRatio: false,
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Water Outlet Temperature (°C)'
                        },
                        ticks: {
                            stepSize: 1,
                            padding: 20,
                        },
                        grid: {
                            display: false
                        },
                        min: xAxisMin,
                        max: xAxisMax,
                        stepSize: 1,
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'Ambient Air Temperature (°C)'
                        },
                        ticks: {
                            stepSize: 10,
                            padding: 20,
                        },
                        min: yAxisMin,
                        max: yAxisMax,
                        stepSize: 10,
                    }
                }
            }
        });

        // X ekseninin etiketlerini oluşturma
        var xAxisLabels = [];
        for (var i = minFluidOutletTemp - 3; i <= maxFluidOutletTemp + 3; i += 1) {
            xAxisLabels.push(i);
        }

        myChart.data.labels = xAxisLabels;
        // Y ekseninin etiketlerini oluşturma
        var yAxisLabels = [];
        for (var i = yAxisMin; i <= yAxisMax; i += 10) {
            yAxisLabels.push(i);
        }
        myChart.options.scales.y.ticks.callback = function (value, index, values) {
            return value;
        };
        //koordinat değerlerini hesaplama
        $('#workingLimitGraph').mousemove(function (event) {
            var canvas = document.getElementById('workingLimitGraph');
            var rect = canvas.getBoundingClientRect();
            var x = event.clientX - rect.left;
            var y = event.clientY - rect.top;

            var chartInstance = myChart;
            var chartArea = chartInstance.chartArea;

            var xValue = (x - chartArea.left) / (chartArea.right - chartArea.left) * (xAxisMax - xAxisMin) + xAxisMin;
            var yValue = (chartArea.bottom - y) / (chartArea.bottom - chartArea.top) * (yAxisMax - yAxisMin) + yAxisMin;

            if (xValue < xAxisMin + 5) {
                xValue = xAxisMin + 5;
            } else if (xValue > xAxisMax - 5) {
                xValue = xAxisMax - 5;
            }

            if (yValue < yAxisMin + 10) {
                yValue = yAxisMin + 10;
            } else if (yValue > yAxisMax - 10) {
                yValue = yAxisMax - 10;
            }

            $('#xCoordinate').text(xValue.toFixed(2));
            $('#yCoordinate').text(yValue.toFixed(2));
        });

.symbol {
    position: absolute;
    width: 20px;
    height: 20px;
    color: red;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    cursor: default;
}

.tooltip-box {
    position: absolute;
    background-color: transparent;
    border: 1px solid;
    color: red;
    border-color: red;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 999;
    transition: left 0.5s ease, top 0.5s ease, opacity 0.5s ease;
}

.symbol:hover {
    transform: scale(1.5);
}

<div class="modal fade" id="WLGModal" tabindex="-1" role="dialog" aria-labelledby="WLGModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title custom-font-size" id="WLGModalLabel">Working Limit Graph</h6>
                <button type="button" class="btn-close mr-2 mt-1" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="coordinatesLabel" class="text-center">
                    <div class="custom-font-size">
                        Water Outlet Temperature:
                        <span id="xCoordinate"></span>
                        Ambient Air Temperature:
                        <span id="yCoordinate"></span>
                    </div>
                </div>
                <div style="position: relative;">
                    <canvas id="workingLimitGraph" width="300" height="200"></canvas>
                    <div id="draggableSymbol" class="symbol">×</div>
                    <div id="tooltipBox" class="tooltip-box" style="display: none;"></div>
                </div>
            </div>
            <div class="modal-footer">
                <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                    <div>
                        <span id="WaterOutletModal" class="custom-font-size">Water Outlet Temperature (°C): </span><br>
                        <span id="AmbientTempModal" class="custom-font-size">Ambient Ait Temperature (°C): </span>
                    </div>
                    <div>
                        <button type="button" class="btn btn-light mb-2">
                            <i class="fas fa-check mr-3" style="color: #09be88;"></i>OK
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

When you make five points, it frames the shape correctly, but this time it does not paint inside. The inside of this shape must be painted.

data: [
                        { x: minFluidOutletTemp, y: minAmbientTemp },
                        { x: minFluidOutletTemp, y: maxAmbientTemp },
                        { x: maxFluidOutletTemp, y: maxAmbientTemp },
                        { x: maxFluidOutletTemp, y: minAmbientTemp },
                        { x: minFluidOutletTemp, y: minAmbientTemp }
                    ],