Not able to get shaded region in quadrant drawn in chartjs

const red_zone = [
    { x: x_min, y: y_median },
    { x: x_min, y: y_max },
    { x: x_median, y: y_max },
    { x: x_median, y: y_median },
    { x: x_min, y: y_median }
];

const orange_zone = [
    { x: x_min, y: y_min },
    { x: x_min, y: y_median },
    { x: x_median, y: y_median },
    { x: x_median, y: y_min },
    { x: x_min, y: y_min }
];

const green_zone = [
    { x: x_median, y: y_min },
    { x: x_max, y: y_min },
    { x: x_max, y: y_median },
    { x: x_median, y: y_median },
    { x: x_median, y: y_min }
];

const yellow_zone = [
    { x: x_median, y: y_median },
    { x: x_max, y: y_median },
    { x: x_max, y: y_max },
    { x: x_median, y: y_max },
    { x: x_median, y: y_median }
];

const chartData = {
    datasets: [
        {
            label: 'Red Zone',
            data: red_zone,
            backgroundColor: 'rgba(255, 0, 0, 0.2)',
            borderColor: 'red',
            borderWidth: 2,
            type: 'line',
            fill: true,
            tension: 0,
            showLine: true,
            spanGaps: true
        },
        {
            label: 'Orange Zone',
            data: orange_zone,
            backgroundColor: 'rgba(255, 165, 0,0.2)',
            borderColor: 'orange',
            borderWidth: 2,
            type: 'line',
            fill: true,
        },
        {
            label: 'Green Zone',
            data: green_zone,
            backgroundColor: 'rgba(0, 255, 0,0.2)',
            borderColor: 'green',
            borderWidth: 2,
            type: 'line',
            fill: true,
        },
        {
            label: 'Yellow Zone',
            data: yellow_zone,
            backgroundColor: 'rgba(255, 255, 0,0.2)',
            borderColor: 'yellow',
            borderWidth: 2,
            type: 'line',
            fill: true,
        }
    ]
};