var options = {
  series: [
    {
      name: 'Spend',
      data: [18, 42, 55, 33, 21, 14, 9],
    },
    {
      name: 'Revenue',
      data: [64, 96, 138, 71, 52, 88, 130],
    },
  ],
  chart: {
    type: 'bar',
    height: 430,
  },
  plotOptions: {
    bar: {
      horizontal: true,
      dataLabels: {
        position: 'top',
      },
    },
  },
  dataLabels: {
    enabled: false,
  },
  stroke: {
    show: true,
    width: 1,
    colors: ['#fff'],
  },
  grid: {
    padding: {
      right: 30,
    },
  },
  tooltip: {
    shared: true,
    intersect: false,
  },
  title: {
    text: 'Marketing Spend vs Revenue by Channel',
    align: 'left',
  },
  xaxis: {
    categories: [
      'Email',
      'Social',
      'Search',
      'Display',
      'Affiliate',
      'Referral',
      'Direct',
    ],
    labels: {
      formatter: function (val) {
        return '$' + Math.round(val) + 'k'
      },
    },
  },
}

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