We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to achieve DrillDown in ejTreeMap?

Platform: JavaScript |
Control: ejTreeMap |
Published Date: January 21, 2015 |
Last Revised Date: June 28, 2019

The following steps help you meet the requirement.

Step 1:

Create a TreeMap sample and include the necessary script files.

Step 2:

Set enableDrillDown property as True in order to drilldown the TreeMap elements.


 enableDrillDown: true

You can customize the drilled header color using the drillDownHeaderColor property.


  drillDownHeaderColor: "#199DAF"

You can refer to the following online documentation link for more details about DrillDown.


Sample Location for TreeMap-DrillDown:



<script type="text/javascript">
        jQuery(function ($) {
                   . . .
                enableDrillDown: true,
    drillDownHeaderColor: "#199DAF",
                       . . .
  levels: [
                       . . .



Treemap with drilldown view

Figure 1: Before DrillDown


TreeMap after the drill down enabled

Figure 2: After DrillDown


You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon