// The catalog is also on the script-tag global, so a variant can be built here and
// handed to `positions` as a function. `.with()` never mutates the original.
var PULSE_BY_TIME = ApexUnitShapes.pulse.with({ order: 'cols' })

var options = {
  series: [12000, 4000, 1600, 400],
  chart: {
    type: 'unit',
    height: 470,
    animations: {
      enabled: true,
      speed: 900,
    },
  },
  labels: ['Under 100ms', '100 to 300ms', '300ms to 1s', 'Over 1s'],
  colors: ['#00A96E', '#7CB342', '#FFAB00', '#FF4560'],
  plotOptions: {
    unit: {
      layout: 'custom',
      // `.with()` returns a variant: column order, so the bands run along the
      // trace rather than slicing it. Defined in the head script.
      positions: PULSE_BY_TIME,
      transition: 'flow',
      unitValue: 24,
      clusterLabels: {
        show: false,
      },
    },
  },
  legend: {
    position: 'bottom',
  },
}

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