Столбец ApexChart поверх других столбцов

Question

Я недавно использую ApexChart, и у меня проблема с гистограммой. Я создаю ApexChart, но столбцы не выглядят выровненными.

var options777 = {
    chart: {
        id: 'test',
        height: 350,
        type: 'bar'
    },
    plotOptions: {
        bar: {
            columnWidth: '50%' 
        }
    },
    series: [{
        name: 'Eligibility',
        data: [ 438, 360, 171, 322, 248, 190, 121, 206, 3 ]
    }],
    dataLabels: {
        enabled: false
    },
    stroke: {
        width: 2
    },
    grid: {
        row: {
            colors: ['#fff', '#f2f2f2']
        }
    },
    xaxis: {
        labels: {
            rotate: -45
        },
        categories: [ "2020-04-27", "2020-04-22", "2020-04-20", "2020-04-24", "2020-04-23", "2020-04-28", "2020-04-25", "2020-04-21", "2020-04-19" ],
        tickPlacement: 'on',
        type: 'datetime'
    },
    yaxis: {
        title: {
            text: 'Eligibility',
        },
    },
    fill: {
        type: 'gradient',
        gradient: {
            shade: 'light',
            type: "horizontal",
            shadeIntensity: 0.25,
            gradientToColors: undefined,
            inverseColors: true,
            opacityFrom: 0.85,
            opacityTo: 0.85,
            stops: [50, 0, 100]
        },
    }
};

var chart777 = new ApexCharts(
    document.querySelector("#myChart"),
    options777
);
chart777.render(); 

Когда диаграмма отображается, она выглядит как на рисунке ниже. Почему столбцы такие? Разве это не должно быть одно рядом с другим?