var options = {
  series: [
    {
      name: 'Mobile',
      data: [44, 55, 41, 67, 22, 43, 21, 49],
    },
    {
      name: 'Desktop',
      data: [13, 23, 20, 8, 13, 27, 33, 12],
    },
    {
      name: 'Tablet',
      data: [11, 17, 15, 15, 21, 14, 15, 13],
    },
  ],
  chart: {
    type: 'bar',
    height: 350,
    stacked: true,
    stackType: '100%',
  },
  responsive: [
    {
      breakpoint: 480,
      options: {
        legend: {
          position: 'bottom',
          offsetX: -10,
          offsetY: 0,
        },
      },
    },
  ],
  title: {
    text: 'Traffic Share by Device',
    align: 'left',
  },
  xaxis: {
    categories: [
      '2024 Q1',
      '2024 Q2',
      '2024 Q3',
      '2024 Q4',
      '2025 Q1',
      '2025 Q2',
      '2025 Q3',
      '2025 Q4',
    ],
  },
  fill: {
    opacity: 1,
  },
  legend: {
    position: 'right',
    offsetX: 0,
    offsetY: 50,
  },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
Stacked Column 100% - JavaScript Column Charts | ApexCharts.js | ApexCharts.js