React Mixed Chart of line and Area

Question

I need to create a chart in react chart js which have one line chart and one area chart like this. Mixed Chart Design

line chart has dataset - [10,20,50,30,-50,-25,-5] area chart has dataset - [0,0,0,1,1,1,1,1,0,0,0]

if area chart is 0 it will not show and if its 1 it will cover complete graph from +yaxis to -yaxis.

i am able to create line chart but how to add second chart over 1st so it covers whole chart height.

Please help here.

I have tried this code but its not giving the desired output.

const CompChart = () => {
    const chartRef = useRef(null);
    const options = {
        plugins: {
            datalabels: {
                display: false,
                color: "black"
            },
            zoom: {
                pan: {
                    enabled: true,
                    mode: "x",
                    sensitivity: 0.5
                },
            },
            filler: {
                propagate: true
            }
        },
        elements: {
            point: {
                radius: 0
            }
        },
        maintainAspectRatio: true,
        scales: {
            xAxes: [
                {
                    scaleLabel: {
                        display: true,
                        labelString: "Date",
                        fontStyle: 600,
                        fontSize: 12,
                        fontFamily: "Open Sans"
                    },
                    gridLines: {
                        display: true
                    },
                    ticks: {
                        beginAtZero: true,
                        fontStyle: 600,
                        fontSize: 10
                    }
                }
            ],
            yAxes: [
                {
                    scaleLabel: {
                        display: true,
                        labelString: "Temperature",
                        fontStyle: 600,
                    },
                    gridLines: {
                        display: true
                    },
                    ticks: {
                        beginAtZero: true,
                        fontStyle: 600,
                    }
                }
            ]
        },
        legend: {
            display: true,
            position: "top",
            align: "center",
            labels: {
                usePointStyle: true,
                pointStyle: 'circle',
                boxWidth: 7,
                padding: 20,
                fontStyle: 600,
            }
        },
        tooltips: {
            enabled: true
        },
        zoom: {
            enabled: true,
            mode: "x",
            sensitivity: 0.5
        }
    };

    useEffect(() => {
        const ctx = chartRef.current.getContext('2d');
        const newChart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    type: 'line',
                    data: [10, 20, -40, -34, -23, 5, 8, 14],
                    label: "Temperature",
                    fill: false,
                    backgroundColor: "#165BAA",
                    borderColor: "#165BAA",
                    borderWidth: 2,
                    pointStrokeColor: "#fff",
                }, {
                    type: 'line',
                    data: [0, 0, 0, 1, 1, 1, 0, 1],
                    label: "Compressor Status",
                    backgroundColor: "#165BAA",
                    borderColor: "#165BAA",
                    borderWidth: 2,
                    pointStrokeColor: "#fff",
                }],
                labels: ['2023-07-12', '2023-07-13', '2023-07-14', '2023-07-15', '2023-07-16', '2023-07-17', '2023-07-18', '2023-07-19'],
            },
            options: { options },
        });
    }, []);
    return (
        <div>
            <canvas ref={chartRef} id="myChart"></canvas>
        </div>
    )
}

export default CompChart