Getting Started with Syncfusion® JavaScript (ES5) TreeMap Component

22 Jul 20267 minutes to read

Build your first Syncfusion JavaScript (ES5) application with a TreeMap in a few minutes. This quickstart guides you through creating a minimal HTML page, loading the required Syncfusion scripts from the CDN, mapping a flat data source, and rendering proportional rectangular items.

Prerequisites

Register your Syncfusion license key before using the component. For more information, refer to the license key registration documentation.

Dependencies

The TreeMap component is available in the @syncfusion/ej2-treemap package. The following dependencies are required:

|-- @syncfusion/ej2-treemap
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-svg-base
    |-- @syncfusion/ej2-pdf-export

Quick Setup

Step 1: Create the Folder and Files

Create a folder named quickstart in your preferred directory.

Inside the quickstart folder, create the following files:

  • index.html
  • index.js

Step 2: Add Syncfusion® CDN Resources

You can load the TreeMap component by using individual package scripts or the combined Syncfusion bundle. Choose only one of these approaches.

Individual Package Scripts

Add the following script references to the <head> section of index.html. Load the dependencies before the TreeMap component script.

<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-treemap/dist/global/ej2-treemap.min.js" type="text/javascript"></script>

Combined Bundle

Alternatively, load all Syncfusion JavaScript components from a single combined bundle:

<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>

Do not include the combined bundle together with the individual package scripts.

Step 3: Add the Syncfusion® TreeMap Control to the Application

The index.html file contains the TreeMap container and references a separate index.js file that contains the component initialization.

The global scripts added in Step 2 register the ej.treemap.TreeMap class in the ej namespace. Therefore, no module imports are required.

var treemap = new ej.treemap.TreeMap({
        dataSource: [
            { Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
            { Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
            { Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
            { Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
            { Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
            { Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Falkland Islands",Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "French Guiana", Count:1 },
            { Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
        ],
        weightValuePath: 'Count',
        leafItemSettings: {
            labelPath: 'State',
        }
});
treemap.appendTo('#container');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for Treemap </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for treemap UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

The new ej.treemap.TreeMap({...}) call creates the TreeMap component. The configuration object uses the following key properties:

  • dataSource — Specifies the collection of records displayed by the TreeMap.
  • weightValuePath — Maps the numeric data field that determines each item’s area.
  • leafItemSettings — Configures the appearance and behavior of leaf items.
  • labelPath — Maps the data field displayed as each leaf item’s label.

Finally, treemap.appendTo('#container') renders the component inside the <div id="element"> element declared in index.html.

Step 4: Open the Application in a Browser

Open quickstart/index.html through a local web server.

If you are using the Visual Studio Code Live Server extension:

  1. Right-click index.html in the Explorer.
  2. Select Open with Live Server.
  3. Open the URL displayed by Live Server, such as http://127.0.0.1:5500/.

The browser displays the initialized TreeMap.

Output

After completing the quick setup, the browser displays a TreeMap.

Syncfusion TreeMap Quick Start Output

Troubleshooting

  • The page is blank. Open index.html through a local web server instead of opening the file directly from the file system.
  • ej is not defined. Ensure that the Syncfusion CDN scripts are loaded before index.js.
  • ej.treemap is undefined. Verify that ej2-treemap.min.js is loaded after ej2-base.min.js, ej2-data.min.js, and ej2-svg-base.min.js.
  • The TreeMap is empty. Confirm that dataSource contains records and that weightValuePath maps to a numeric field in every record.