Chart. js shape coloring

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;
        //added/subtracted values to expand chart axis values
        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;
        };

Answer 1

Ensure Correct Order of Data Points eg.

var data = [
{ x: minFluidOutletTemp, y: minAmbientTemp }, // Point 1
{ x: minFluidOutletTemp, y: maxAmbientTemp }, // Point 2
{ x: maxFluidOutletTemp, y: maxAmbientTemp }, // Point 3
{ x: maxFluidOutletTemp, y: minAmbientTemp } // Point 4

];

Configure fill Option

fill: true;

specify backgroundColor

backgroundColor: 'rgba(0, 128, 0, 0.3)',

Ensure the y-axis scale is correctly configured to accommodate the range of your data points. This seems to be correctly set in your code with min: yAxisMin and max: yAxisMax.

Ensure you are using a version of Chart.js that supports the features you are using. The fill option and dataset configuration are well-supported in Chart.js 2.x and later.

Answer 2

I use this code on other pages, only my axis values are different. It works completely correctly on those pages. When I edited the code as follows, this time it connected 4 points correctly and created a rectangle, but this time it made the inside of this shape completely unpainted. Code:

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

I added one more dot in data and the shape is correct. But I cannot paint this shape.

This is the final version. How can I edit the code to paint inside this shape?