var options = {
  series: [
    {
      name: '',
      data: [200, 330, 548, 740, 880, 990, 1100, 1380],
    },
  ],
  chart: {
    type: 'pyramid',
    height: 350,
    dropShadow: {
      enabled: true,
    },
  },
  plotOptions: {
    bar: {
      borderRadius: 0,
      distributed: true,
    },
  },
  colors: [
    '#809bce',
    '#95b8d1',
    '#b8e0d4',
    '#d6eadf',
    '#eac4d5',
    '#d1625c',
    '#e89c81',
    '#ffd6a5',
  ],
  dataLabels: {
    enabled: true,
    formatter: function (val, opt) {
      // hide labels on tiers too small to fit them; the tooltip still names these
      if (val < 400) return ''
      return opt.w.globals.labels[opt.dataPointIndex]
    },
    dropShadow: {
      enabled: true,
    },
  },
  title: {
    text: 'Food Pyramid',
    align: 'middle',
  },
  xaxis: {
    categories: [
      'Sweets',
      'Processed Foods',
      'Healthy Fats',
      'Meat',
      'Beans & Legumes',
      'Dairy',
      'Fruits & Vegetables',
      'Grains',
    ],
  },
  legend: {
    show: false,
  },
}

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