Create a Treemap Chart Using Javascript

3 min readOct 3, 2019

Treemap Chart is a popular chart type for hierarchical data visualization. I’ll show you how to create an interactive Treemap Chart using JavaScript.

There are four main steps when it comes to data visualization using JavaScript. To create a chart, it generally takes four main steps.

Create an HTML page with a container for a chart.
Connect all the scripts you need.
Load the data you need to visualize.
Write the JS chart code.

Step 1.

<!DOCTYPE html>
<html>
  <head>
    <title>My First JavaScript Treemap Chart</title>
    <style>
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

Here is an example of what the HTML page could look like. Notice that we included a <div> tag with an id “container”. We also styled it with width and height at 100% so it will take up the entire page.

Step 2.

Connect all the scripts you need to create a Treemap Chart. To represent data on a Treemap Chart, the core and Treemap modules are required. So I referenced them in the <body> section, in separate <script> tags:

<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script><script src="https://cdn.anychart.com/releases/v8/js/anychart-treemap.min.js"></script>

If you prefer to launch the scripts locally instead of making use of the AnyChart CDN, you can download the necessary scripts and them within your project folder.

And then reference the scripts locally within your index.html.

<script src="js/anychart-core.min.js"></script><script src="js/anychart-treemap.min.js"></script>

Step 3.

We’ve prepared a place for the Treemap visualization and referenced the JS charting library scripts. We are now set to load the data. I’ve organized the data as a tree, with every parent item provided with a children data field containing an array of child items:

var data = [
  {name: "World", children: [
    {name: "Asia", children: [
      {name: "East", value: 1000},
      {name: "Southern", value: 803},
      {name: "Southeast", value: 415},
      {name: "Western", value: 182},
      {name: "Central", value: 36}
    ]},
    {name: "America", children: [
      {name: "North", value: 346},
      {name: "South", value: 316},
      {name: "Central", value: 114},
      {name: "Caribbean", value: 23}
    ]},
    {name: "Europe", children: [
      {name: "Eastern", value: 233},
      {name: "Western", value: 183},
      {name: "Southern", value: 135},
      {name: "Northern", value: 100}
    ]},
    {name: "Africa", children: [
      {name: "Western", value: 158},
      {name: "Eastern", value: 140},
      {name: "Northern", value: 121},
      {name: "Southern", value: 34},
      {name: "Middle", value: 20}
    ]},
    {name: "Oceania", children: [
      {name: "Oceania", value: 29}
    ]}
  ]}
];

Step 4.

The entire JS chart code must be included in the anychart.onDocumentReady() function within the <script> tag. So first, add the function:

anychart.onDocumentReady(function() {// create data
  var data = [
    {name: "World", children: [
      {name: "Asia", children: [
        {name: "East", value: 1000},
        {name: "Southern", value: 803},
        {name: "Southeast", value: 415},
        {name: "Western", value: 182},
        {name: "Central", value: 36}
      ]},
      {name: "America", children: [
        {name: "North", value: 346},
        {name: "South", value: 316},
        {name: "Central", value: 114},
        {name: "Caribbean", value: 23}
      ]},
      {name: "Europe", children: [
        {name: "Eastern", value: 233},
        {name: "Western", value: 183},
        {name: "Southern", value: 135},
        {name: "Northern", value: 100}
      ]},
      {name: "Africa", children: [
        {name: "Western", value: 158},
        {name: "Eastern", value: 140},
        {name: "Northern", value: 121},
        {name: "Southern", value: 34},
        {name: "Middle", value: 20}
      ]},
      {name: "Oceania", children: [
        {name: "Oceania", value: 29}
      ]}
    ]}
  ];// create a data tree
  treeData = anychart.data.tree(data, "as-tree");});

Here is our result:

Create a Treemap Chart Using Javascript

Written by Jun Liang