How to get started easily with Syncfusion Angular 11 Tree Map?

The Essential JS 2 Angular TreeMap is used to visualize self-referential hierarchical data effectively in a zoomable manner. The size of the boxes is calculated based on the umber of child components. Its feature set include functionalities such as data label, data binding, export to PDF, and SVG. This KB article explains how to easily integrate Syncfusion Angular TreeMap in an Angular 11 Application and how to enable its commonly used features using services.

Prerequisites

Before starting, you need the following items to create Angular TreeMap in an Angular 11 application:

• Node.js (Latest version)
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio Code for Editor

Installation and application creation

1. Install Angular CLI using the following command.

npm install -g @angular/cli@11.2.3

2. Create an Angular 11 application using Angular CLI.

ng new angular11-app

cd angular11-app

3. Serve the Angular 11 using the following command.

ng serve --open

Listen to the application in localhost:4200. Your application will serve in browser. Refer to the following screenshot for Angular 11 version.

Integration of Angular TreeMap

4. After running the Angular 11 application successfully, configure the Angular TreeMap in this application. Install Angular TreeMap and EJ2 package using the following command.

   npm install @syncfusion/ej2-angular-treemap --save
   
   npm install @syncfusion/ej2 --save
   
   

The --save command instructs the NPM to include the TreeMap package inside the dependencies section of the package.json.

5. Import TreeMapModule from installed package in app/app.module.ts.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { TreemapModule } from '@syncfusion/ej2-angular-treemap';

import { AppComponent } from './app.component';

 

@NgModule({

   declarations: 

       AppComponent

 ],

imports: [

        BrowserModule,

       TreeMapModule

   ],

 bootstrap: [AppComponent]

})

export class AppModule { }

6. Refer the CSS file for Angular TreeMap in style.css.

Import “../node_modules/@syncfusion/ej2/material.css”

7. Add the Angular TreeMap component in app.component.html.

<ejs-treemap></ejs-treemap>

8. Now, define the data source for this TreeMap in app.component.ts. Here, the JSON data is used for the TreeMap.

export class AppComponent {

    title = 'treemap-app';

    dataSource: object[] = CarSales;

    weightValuePath: string = 'Sales';

    palette: string[] = ['#C33764', '#AB3566', '#993367', '#853169', '#742F6A', '#632D6C', '#532C6D', '#412A6F', '#312870', '#1D2671'];

    leafItemSettings: object = {

        labelPath: 'Company',

        border: { color: 'white', width: 0.5 }

    };

}

9. After defining the dataSource, define data source of TreeMap in app.component.html.

<ejs-treemap id='container' [dataSource] ='dataSource'    [weightValuePath] ='weightValuePath' [palette] ='palette' [leafItemSettings] = 'leafItemSettings' format='n' useGroupingSeparator="true">

</ejs-treemap>

10. Now, serve the application using the following command.

ng serve --open

After all the files have been compiled successfully, it will serve the site at localhost:4200.

The following screenshot illustrates this.

Summary

To know more about TreeMap, check our Angular TreeMap features from  this page. If you have any queries or require clarifications. Please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!