var options = {
  series: [128, 92, 156, 64],
  chart: {
    width: 480,
    type: 'pie',
  },
  labels: ['Cityscape', 'Waterfront', 'Street Art', 'Patterns'],
  title: {
    text: 'Photo Library by Scene',
    align: 'center',
  },
  colors: ['#93C3EE', '#E5C6A0', '#669DB5', '#94A74A'],
  fill: {
    type: 'image',
    opacity: 0.9,
    image: {
      src: [
        '../../assets/images/4274635880_809a4b9d0d_z.jpg',
        '../../assets/images/2979121308_59539a3898_z.jpg',
        '../../assets/images/4679113782_ca13e2e6c0_z.jpg',
        '../../assets/images/stripes.jpg',
      ],
      width: 500,
      height: 500,
    },
  },
  stroke: {
    width: 4,
  },
  legend: {
    show: false,
  },
  dataLabels: {
    enabled: true,
    style: {
      colors: ['#111'],
    },
    background: {
      enabled: true,
      foreColor: '#fff',
      borderWidth: 0,
    },
  },
  plotOptions: {
    pie: {
      dataLabels: {
        external: {
          show: true,
        },
      },
    },
  },
  responsive: [
    {
      breakpoint: 480,
      options: {
        chart: {
          width: 320,
        },
      },
    },
  ],
}

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