var options = {
  series: [
    {
      name: 'Desktops',
      data: [
        {
          x: 'Apple',
          y: 50,
        },
        {
          x: 'Acer',
          y: 30,
        },
        {
          x: 'Asus',
          y: 21,
        },
      ],
    },
    {
      name: 'Laptops',
      data: [
        {
          x: 'Dell',
          y: 21,
        },
        {
          x: 'HP',
          y: 16,
        },
        {
          x: 'Lenovo',
          y: 20,
        },
      ],
    },
    {
      name: 'Tablets',
      data: [
        {
          x: 'Samsung',
          y: 4,
        },
        {
          x: 'Huawei',
          y: 7,
        },
        {
          x: 'Microsoft',
          y: 11,
        },
        {
          x: 'Amazon',
          y: 31,
        },
        {
          x: 'Lenovo',
          y: 13,
        },
      ],
    },
    {
      name: 'Mobile',
      data: [
        {
          x: 'Apple',
          y: 10,
        },
        {
          x: 'Samsung',
          y: 20,
        },
        {
          x: 'Huawei',
          y: 51,
        },
        {
          x: 'Xiaomi',
          y: 30,
        },
      ],
    },
  ],
  legend: {
    show: true,
    offsetY: 10,
    height: 30,
  },
  chart: {
    height: 350,
    type: 'treemap',
  },
  title: {
    text: 'Multi-dimensional Treemap',
    align: 'center',
  },
  plotOptions: {
    treemap: {},
  },
}

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