var options = {
  series: [900000, 400000, 240000, 60000],
  chart: {
    type: 'unit',
    height: 470,
    animations: {
      enabled: true,
      speed: 900,
    },
  },
  labels: ['Wifi', '5G', '4G', 'Wired'],
  colors: ['#008FFB', '#00B8A9', '#F2994A', '#7B8794'],
  plotOptions: {
    unit: {
      layout: 'custom',
      // A stroke shape from apexcharts/unit-shapes.
      positions: 'wifi',
      transition: 'flow',
      unitValue: 2000,
      clusterLabels: {
        // Outer labels: each band is named in the margin with a leader line to its
        // own dots, so the crowd reads without a legend.
        external: {
          show: true,
        },
      },
    },
  },
  legend: {
    show: false,
  },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
Connection Types - JavaScript Unit Charts | ApexCharts.js | ApexCharts.js