您的轴配置似乎遵循了旧版本charts.js的格式。主要变化必须是options中的，scales是一个对象（而不是数组），每个单独的轴将在其id下显示为一个键：

{
   options:{
      scales:{
         "y-axis-1": {
         // ...........
         },
         "y-axis-2": {
         // ...........
         },
         x: {
         // ...........
         }
      }
   }
}

以下是代码的简化版本，用于说明目的，非React，排除未定义的函数，使用虚构的数据和类别x轴而不是时间：

const ctx = document.getElementById('myChart'),
    container = ctx.parentElement;

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['q','w','e','r'],
        datasets: [
            {
                label: 'Sales (in units)',
                data: [1100, 2200, 3300, 4400],
                yAxisID: "y-axis-1",
                //backgroundColor: tailwindConfig().theme.colors.blue[400],
                //hoverBackgroundColor: tailwindConfig().theme.colors.blue[500],
                barPercentage: 0.66,
                categoryPercentage: 0.66,
            },
            {
                label: 'Spend (million USD)',
                data: [3, 2, 4, 1],
                yAxisID: "y-axis-2",
                //backgroundColor: tailwindConfig().theme.colors.indigo[500],
                //hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
                barPercentage: 0.66,
                categoryPercentage: 0.66,
            }
        ]
    },
    options: {
        layout: {
            padding: {
                top: 12,
                bottom: 16,
                left: 70,
                right: 70
            },
        },
        scales: {
            "y-axis-1": {
                //id: "y-axis-1",
                type: "linear",
                position: "left",
                ticks: {
                    maxTicksLimit: 5,
                    callback: (value) => /*formatValue*/(value)/1000 + "K (units)",
                },
            },
            "y-axis-2": {
                //id: "y-axis-2",
                type: "linear",
                position: "right",
                ticks: {
                    maxTicksLimit: 5,
                    callback: (value) =>  /*formatValue*/(value) + "M ($)",
                },
            },
            x: {
                /*  type: 'time',
                 time: {
                     parser: 'MM-DD-YYYY',
                     unit: 'month',
                     displayFormats: {
                         month: 'MMM YY',
                     },
                 }, */
                grid: {
                    display: false,
                    drawBorder: false,
                },
                position: 'bottom'
            },
        },
        plugins: {
            legend: {
                display: true,
            },
            tooltip: {
                callbacks: {
                    title: () => false, // Disable tooltip title
                    label: (context) => /*formatValue*/(context.parsed.y),
                },
            },
        },
        interaction: {
            intersect: false,
            mode: 'nearest'
        },
        animation: {
            duration: 500
        },
        maintainAspectRatio: false,
        resizeDelay: 200,
    },
});

<div style="position: relative; min-height:300px; width: 90vw" >
    <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>