How do I add the fifth point to chart.js?

Question

I have a chart that I created with chart.js and I added four points. I obtained a quadrilateral with these added points. When I want to add a fifth point, I want to get a pentagon instead of this quadrilateral, but the shape is distorted.

//codes with quadrilateral
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,
                    }
                }
            }
        });

datasets in this code:

{ x: minFluidOutletTemp, y: minAmbientTemp },
{ x: minFluidOutletTemp, y: maxAmbientTemp },
{ x: maxFluidOutletTemp, y: maxAmbientTemp - 10 },
{ x: maxFluidOutletTemp, y: minAmbientTemp },
{ x: minFluidOutletTemp, y: minAmbientTemp },
{ x: minFluidOutletTemp + 2, y: maxAmbientTemp }, 
{ x: maxFluidOutletTemp, y: minAmbientTemp },

I get a pentagon, but I can't get a perfect pentagon.

quadrilateral enter image description here pentagon enter image description here it looks like this. I want the pentagon to look like this just like the quadrilateral looks like this. how to do it?