apexchart javascript grouped stacked bars sometimes not working

Question

Here's the scenario, I have multiple tabs containing multiple reports using apexcharts javascript.

For some reason, I can't get the grouped stack bar to work just like from the demo in https://apexcharts.com/javascript-chart-demos/bar-charts/grouped-stacked-bars/. In the demo it was grouped into two per categories. Mine is just stacked in a single line.

I already tried incognito and still the same it is only in a single line. tried clearing cache using laravel's optimize still not working.

It must be in my application since the sample given from the demo works just fine when I pasted it in codepen. any ideas?

Here's my html code

<div class="tab-content mt-4" id="chart-tab-category-content">
    <div class="bg-white tab-pane fade active show" id="effect-rating" role="tabpanel" arialabelledby="effect-rating">
        <div id="effect-rating-test">

        </div>
        <div id="effect-rating-process">

        </div>
    </div>

    <div class="bg-white tab-pane fade" id="rate-distribution-summary" role="tabpanel" arialabelledby="chart-tabs-rating-distribution">
        <div class="mt-4" id="rate-distribution">

        </div>
        <div class="mt-4" id="rating-distribution-process">

        </div>
    </div>
</div>

Here's from the sample given by apexcharts

var options = {
      series: [
      {
        name: 'Q1 Budget',
        group: 'budget',
        data: [44000, 55000, 41000, 67000, 22000]
      },
      {
        name: 'Q1 Actual',
        group: 'actual',
        data: [48000, 50000, 40000, 65000, 25000]
      },
      {
        name: 'Q2 Budget',
        group: 'budget',
        data: [13000, 36000, 20000, 8000, 13000]
      },
      {
        name: 'Q2 Actual',
        group: 'actual',
        data: [20000, 40000, 25000, 10000, 12000]
      }
    ],
      chart: {
      type: 'bar',
      height: 350,
      stacked: true,
    },
    stroke: {
      width: 1,
      colors: ['#fff']
    },
    dataLabels: {
      formatter: (val) => {
        return val / 1000 + 'K'
      }
    },
    plotOptions: {
      bar: {
        horizontal: true
      }
    },
    xaxis: {
      categories: [
        'Online advertising',
        'Sales Training',
        'Print advertising',
        'Catalogs',
        'Meetings'
      ],
      labels: {
        formatter: (val) => {
          return val / 1000 + 'K'
        }
      }
    },
    fill: {
      opacity: 1,
    },
    colors: ['#80c7fd', '#008FFB', '#80f1cb', '#00E396'],
    legend: {
      position: 'top',
      horizontalAlign: 'left'
    }
    };

    var chart = new ApexCharts(document.querySelector("#effect-rating-test"), options);
    chart.render();