<template>
  <div>
    <div id="chart">
      <apexchart
        type="pyramid"
        height="350"
        :options="chartOptions"
        :series="series"
      ></apexchart>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [
        {
          name: '',
          data: [200, 330, 548, 740, 880, 990, 1100, 1380],
        },
      ],
      chartOptions: {
        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,
        },
      },
    }
  },
}
</script>

<style>
#chart {
  max-width: 650px;
  margin: 35px auto;
}
</style>