Distributed Columns in JavaScript

var colors = [
  '#008FFB',
  '#00E396',
  '#FEB019',
  '#FF4560',
  '#775DD0',
  '#546E7A',
  '#26a69a',
  '#3F51B5',
]

var options = {
  series: [
    {
      name: 'Deals closed',
      data: [21, 22, 10, 28, 16, 21, 13, 30],
    },
  ],
  chart: {
    height: 350,
    type: 'bar',
    events: {
      click: function (chart, w, e) {
        // console.log(chart, w, e)
      },
    },
  },
  colors: colors,
  title: {
    text: 'Deals Closed by Sales Rep',
    align: 'left',
  },
  plotOptions: {
    bar: {
      columnWidth: '45%',
      distributed: true,
    },
  },
  dataLabels: {
    enabled: false,
  },
  legend: {
    show: false,
  },
  yaxis: {
    title: {
      text: 'Deals closed',
    },
  },
  xaxis: {
    categories: [
      ['John', 'Doe'],
      ['Joe', 'Smith'],
      ['Jake', 'Williams'],
      'Amber',
      ['Peter', 'Brown'],
      ['Mary', 'Evans'],
      ['David', 'Wilson'],
      ['Lily', 'Roberts'],
    ],
    labels: {
      style: {
        colors: colors,
        fontSize: '12px',
      },
    },
  },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()