Проблема с расположением столбчатой ​​диаграммы с использованием библиотеки ApexCharts

Question

Я использую apexChart для общества (они являются причиной, по которой я скрываю названия свойств).

Я работаю с гистограммой, которая содержит 13 различных рядов с каждыми 4 данными (для кого-то ноль)эти значения представлены в 4 категориях "xaxis".

Моя проблема - это смещение в расположении этих категорий, вы можете видеть на картинке, что у меня есть несколько столбцов для правильного расположения -> по сравнениюэто начальные места.

Ниже вы можете увидеть мой сценарий:

var options = {
            chart: {
                height: 450,
                type: 'bar',
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '100%',
                    endingShape: 'flat'

            },},
            dataLabels: {
                enabled: false
            },
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent']
            },

            series: [{
                name: 'Confidential',
                data: [ 22, 5, 9, ]
                      },{
                name: 'Confidential',
                data: [17, , , ]
                      },{
                name: 'Confidential',
                data: [4, 2, , ]
                      },{
                name: 'Confidential',
                data: [ 1, , , ]
                      },{
                name: 'Confidential',
                data: [ 5, 1, , ]
                      },{
                name: 'Confidential',
                data: [ 3, , , ]
                      },{
                name: 'Confidential',
                data: [ 2, , , ]
                      },{
                name: 'plooppPPPloooPPp',
                data: [ 22, 5, 9, ]
                      },{
                name: 'Confidential',
                data: [ 3, , , ]
                      },{
                name: 'Confidential',
                data: [ , 2, , ]
                      },{
                name: 'Confidential',
                data: [ 1, , , ]
                      },{
                name: 'Confidential',
                data: [ 1, , , ]
                      },{
                name: 'Confidential',
                data: [ 1, , , ]
                        }
                    ],
            xaxis: {
                categories: ['Confidential', 'Confidential', 'whuuuutttt', 'lolilollll'],
            },
            fill: {
                opacity: 1

            },
            tooltip: {
                y: {
                    formatter: function (val) {
                        return  val
                    }
                }
            }
        }

        var chart = new ApexCharts(
            document.querySelector("#chart"),
            options
        );

        chart.render();

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

<div id="chart" style="max-width: 850px;
  margin:0px;">
    <script src="js/Graph2.js"></script>
</div>

Я уже прочитал документацию и искал решенную, но ничего хорошего не сделал.

У вас есть моя благодарность, если вы мне в этом поможете.

Желаю вам хорошего конца недели:)