Javascript 在折线图上叠加 2 x 轴

function parseDateIndexed(data){
    return Object.entries(data).
    map(([s, f])=>({x: Date.parse(s), y: f, s})).
    sort(({x:t1},{x:t2})=>t1-t2);
}

let startGraph = function() {
    let canvas = document.getElementById('chart');
    let chart = new Chart(canvas.getContext('2d'), {
        type: 'line',
        data: {
            datasets: [{
                label: 'Revenue',
                data: parseDateIndexed({
                    "2023-03-01": 250,
                    "2023-03-02": 488,
                    "2023-03-03": 358,
                    "2023-03-04": 255,
                    "2023-03-05": 895
                }),
                borderColor: '#ff6384',
                xAxisID: 'x',
            },
                {
                    label: 'Profit',
                    data: parseDateIndexed({
                        "2023-03-01": 125,
                        "2023-03-02": 156,
                        "2023-03-03": 195,
                        "2023-03-04": 98,
                        "2023-03-05": 466
                    }),
                    borderColor: '#36a2eb',
                    xAxisID: 'x',
                },
                {
                    label: 'Past Revenue',
                    data: parseDateIndexed({
                        "2023-02-24": 280,
                        "2023-02-25": 456,
                        "2023-02-26": 665,
                        "2023-02-27": 288,
                        "2023-02-28": 499
                    }),
                    borderColor: '#fa829b',
                    xAxisID: 'x1',
                },
                {
                    label: 'Past Profit',
                    data: parseDateIndexed({
                        "2023-02-24": 125,
                        "2023-02-25": 198,
                        "2023-02-26": 265,
                        "2023-02-27": 101,
                        "2023-02-28": 221
                    }),
                    borderColor: '#76c1f5',
                    xAxisID: 'x1',
                }
            ]
        },
        options: {
            elements: {
                point: {
                    radius: 0,
                    hoverRadius: 0,
                    hitRadius: 3,
                },
                line: {
                    borderWidth: 2,
                },
            },
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                intersect: false,
                mode: 'index',
            },
            stacked: false,
            scales: {
                y: {
                    ticks: {
                        display: true,
                        beginAtZero: true,
                    }
                },
                x: {
                    type:"linear",
                    position: 'bottom',
                    ticks: {
                        display: false,
                    },
                },
                x1: {
                    type:"linear",
                    position: 'top',
                    ticks: {
                        display: false,
                    },
                    grid: {
                        drawOnChartArea: false,
                    },
                },
            },
            plugins: {
                tooltip:{
                    callbacks:{
                        title(items){
                            const dates = items.map(o=>o.raw.s);
                            const d1 = dates[0], d2 = dates[dates.length-1];
                            const ad = (d1 === d2) ? d1 : [d1, d2];
                            return ad.join(' / ')
                        }
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                    labels: {
                        boxWidth: 8,
                        boxHeight: 8,
                        useBorderRadius: true,
                        borderRadius: 3,
                        usePointStyle: false,
                        pointStyleWidth: 0,
                        padding: 7,
                        font: {
                            size: 11
                        }
                    }
                },
            },
        }
    });
}

document.addEventListener("DOMContentLoaded", function() {
    startGraph();
});

<canvas id="chart"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"
        integrity="sha512-t41WshQCxr9T3SWH3DBZoDnAT9gfVLtQS+NKO60fdAwScoB37rXtdxT/oKe986G0BFnP4mtGzXxuYpHrMoMJLA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>