// A person icon, drawn inline as a data URI so the sample is self-contained.
var PERSON_ICON =
  'data:image/svg+xml,' +
  encodeURIComponent(
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#5B8DEF">' +
      '<circle cx="12" cy="7" r="4"/>' +
      '<path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8z"/>' +
      '</svg>',
  )

var options = {
  series: [520000, 1180000, 300000],
  chart: {
    type: 'unit',
    height: 440,
    animations: {
      enabled: true,
      speed: 900,
    },
  },
  labels: ['Under 18', '18 to 64', '65 and over'],
  colors: ['#5B8DEF', '#00B8A9', '#F6A609'],
  series: [520000, 1180000, 300000],
  legend: {
    position: 'bottom',
  },
  plotOptions: {
    unit: {
      layout: 'grouped',
      shape: 'image',
      unitValue: 25000,
      spacing: 1.2,
      image: {
        src: PERSON_ICON,
        width: 16,
        height: 16,
        // Recolour each icon to its category colour so the crowd matches the
        // legend (the source icon is a single-colour silhouette).
        tint: true,
      },
      clusterLabels: {
        show: true,
      },
    },
  },
}

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

// Nothing extra to wire: the chart renders the pictogram from the options
// above. PERSON_ICON lives in the shared head script.