Custom Data Labels in JavaScript

var options = {
  series: [
    {
      data: [160, 210, 240, 310, 380, 450, 560, 690, 820, 1040],
    },
  ],
  chart: {
    type: 'bar',
    height: 380,
  },
  plotOptions: {
    bar: {
      barHeight: '100%',
      distributed: true,
      horizontal: true,
      dataLabels: {
        position: 'bottom',
      },
    },
  },
  theme: {
    monochrome: {
      enabled: true,
      color: '#3974FF',
      shadeTo: 'dark',
      shadeIntensity: 0.5,
    },
  },
  dataLabels: {
    enabled: true,
    textAnchor: 'start',
    style: {
      colors: ['#fff'],
      fontWeight: 600,
    },
    formatter: function (val, opt) {
      return opt.w.globals.labels[opt.dataPointIndex] + ':  ' + val
    },
    offsetX: 8,
  },
  legend: {
    show: false,
  },
  stroke: {
    width: 1,
    colors: ['#fff'],
  },
  xaxis: {
    categories: [
      'Billing',
      'Onboarding',
      'Account',
      'Feature Request',
      'Integrations',
      'Performance',
      'Mobile App',
      'Security',
      'Login',
      'Bug Report',
    ],
  },
  yaxis: {
    labels: {
      show: false,
    },
  },
  title: {
    text: 'Support Tickets by Category',
    align: 'center',
    floating: true,
  },
  subtitle: {
    text: 'Category names shown as labels inside the bars',
    align: 'center',
  },
  tooltip: {
    theme: 'dark',
    x: {
      show: false,
    },
    y: {
      title: {
        formatter: function () {
          return ''
        },
      },
    },
  },
}

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