• Edit
  • Download
    • <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }

    .zc-ref {
      display: none;
    }

    select {
      margin: 10px;
    }
  </style>
</head>

<body>
  <div id="myChart">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    <select id="treemap-layout">
      <option selected value="balanced">Balanced</option>
      <option value="balancedV2">Balanced(v2)</option>
      <option value="random">Random</option>
      <option value="horizontal">Horizontal</option>
      <option value="vertical">Vertical</option>
      <option value="squarify">Squarify</option>
      <option value="squarifyV2">Squarify(v2)</option>
    </select>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      type: 'treemap',
      options: {
        splitType: 'balanced',
        colorType: 'palette',
        palette: ['#f44336', '#29b6f6', '#ab47bc', '#ffc107', '#5c6bc0', '#009688']
      },
      plotarea: {
        margin: '0 0 35 0'
      },
      series: [{
          text: 'North America',
          children: [{
              text: 'United States',
              children: [{
                text: 'Texas',
                value: 90
              }]
            },
            {
              text: 'Canada',
              value: 113
            },
            {
              text: 'Mexico',
              value: 78
            }
          ]
        },
        {
          text: 'Europe',
          children: [{
              text: 'France',
              value: 42
            },
            {
              text: 'Spain',
              value: 28
            }
          ]
        },
        {
          text: 'Africa',
          children: [{
              text: 'Egypt',
              value: 22
            },
            {
              text: 'Congo',
              value: 38
            }
          ]
        },
        {
          text: 'Asia',
          children: [{
              text: 'India',
              value: 92
            },
            {
              text: 'China',
              value: 68
            }
          ]
        },
        {
          text: 'South America',
          children: [{
              text: 'Brazil',
              value: 42
            },
            {
              text: 'Argentina',
              value: 28
            }
          ]
        },
        {
          text: 'Australia (continent)',
          children: [{
              text: 'Australia (country)',
              value: 121
            },
            {
              text: 'New Zealand',
              value: 24
            }
          ]
        }
      ]
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%'
    });

    document.getElementById('treemap-layout').addEventListener('change', function(e) {
      myConfig.options['split-type'] = e.srcElement.value;
      zingchart.exec('myChart', 'setdata', {
        data: myConfig
      });
    })
  </script>
</body>

</html>
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id="myChart">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    <select id="treemap-layout">
      <option selected value="balanced">Balanced</option>
      <option value="balancedV2">Balanced(v2)</option>
      <option value="random">Random</option>
      <option value="horizontal">Horizontal</option>
      <option value="vertical">Vertical</option>
      <option value="squarify">Squarify</option>
      <option value="squarifyV2">Squarify(v2)</option>
    </select>
  </div>
</body>

</html>
    html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}

.zc-ref {
  display: none;
}

select {
  margin: 10px;
}
    let chartConfig = {
  type: 'treemap',
  options: {
    splitType: 'balanced',
    colorType: 'palette',
    palette: ['#f44336', '#29b6f6', '#ab47bc', '#ffc107', '#5c6bc0', '#009688']
  },
  plotarea: {
    margin: '0 0 35 0'
  },
  series: [{
      text: 'North America',
      children: [{
          text: 'United States',
          children: [{
            text: 'Texas',
            value: 90
          }]
        },
        {
          text: 'Canada',
          value: 113
        },
        {
          text: 'Mexico',
          value: 78
        }
      ]
    },
    {
      text: 'Europe',
      children: [{
          text: 'France',
          value: 42
        },
        {
          text: 'Spain',
          value: 28
        }
      ]
    },
    {
      text: 'Africa',
      children: [{
          text: 'Egypt',
          value: 22
        },
        {
          text: 'Congo',
          value: 38
        }
      ]
    },
    {
      text: 'Asia',
      children: [{
          text: 'India',
          value: 92
        },
        {
          text: 'China',
          value: 68
        }
      ]
    },
    {
      text: 'South America',
      children: [{
          text: 'Brazil',
          value: 42
        },
        {
          text: 'Argentina',
          value: 28
        }
      ]
    },
    {
      text: 'Australia (continent)',
      children: [{
          text: 'Australia (country)',
          value: 121
        },
        {
          text: 'New Zealand',
          value: 24
        }
      ]
    }
  ]
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%'
});

document.getElementById('treemap-layout').addEventListener('change', function(e) {
  myConfig.options['split-type'] = e.srcElement.value;
  zingchart.exec('myChart', 'setdata', {
    data: myConfig
  });
})