var options = {
  series: [
    {
      data: [
        {
          x: 'node_modules',
          y: 428,
        },
        {
          x: 'assets',
          y: 213,
        },
        {
          x: '.git',
          y: 154,
        },
        {
          x: 'build',
          y: 96,
        },
        {
          x: 'vendor',
          y: 88,
        },
        {
          x: 'public',
          y: 61,
        },
        {
          x: 'src',
          y: 47,
        },
        {
          x: 'cache',
          y: 39,
        },
        {
          x: 'docs',
          y: 24,
        },
        {
          x: 'tests',
          y: 18,
        },
        {
          x: 'logs',
          y: 12,
        },
        {
          x: 'config',
          y: 6,
        },
      ],
    },
  ],
  legend: {
    show: false,
  },
  chart: {
    height: 350,
    type: 'treemap',
  },
  title: {
    text: 'Disk Usage by Folder (GB)',
    align: 'center',
  },
  colors: [
    '#3B93A5',
    '#F7B844',
    '#ADD8C7',
    '#EC3C65',
    '#CDD7B6',
    '#C1F666',
    '#D43F97',
    '#1E5D8C',
    '#421243',
    '#7F94B0',
    '#EF6537',
    '#C0ADDB',
  ],
  plotOptions: {
    treemap: {
      distributed: true,
      enableShades: false,
    },
  },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
Distributed Treemap - JavaScript Treemap Charts | ApexCharts.js | ApexCharts.js