reactjs - 如何在堆叠条之间添加间隙

Question

我想实现如下条形图设计：

问题是我找不到在堆叠条之间添加间隙的方法，所以我最终得到了这样的图表：

我正在使用 react-chartjs-2 版本 3.0.4，我的代码是：

<Bar
data={{
    labels: ['1', '2', '3', '4', '5', '6'],
    datasets: [
        {
            label: 'First',
            data: [65, 59, 80, 81, 56, 55],
            backgroundColor: 'rgba(30,223,129, 0.8)',
            borderColor: 'transparent',
            borderWidth: 0,
            barThickness: 60,
        },
        {
            label: 'Second',
            data: [20, 30, 78, 26, 45, 22],
            backgroundColor: 'rgba(181,190,232,0.8)',
            borderColor: 'transparent',
            borderWidth: 0,
            barThickness: 60,
        }
    ]
}}

options={{
    plugins: {
        legend: {
            display: false,
        },
    },
    scales: {
        x: { 
            display: false,
            ticks: {
                display: false,
            },
            grid: {
                display: false,
            },
            stacked: true,
        },
        y: { 
            grid: {
                drawBorder: false,
                lineWidth: 0.6,
            },
            ticks: {
                display: false,
            },
        },
    }
}}/>

标签： reactjschart.jsreact-chartjs-2