Drill Down Support

7 Jun 20172 minutes to read

Treemap enables drill down to expose the hierarchy achieved by clicking on a node and this results in enabling the Treemap to move to the next level or sub level and can return back to the normal Treemap view by clicking on the node header. Only a single level of the Treemap is visible at once.

Enable Drill Down

Treemap elements can be drilled down by setting the enableDrillDown property to true. You can view the hierarchy of the Treemap by clicking on the treemap items and can move to the previous level by clicking on the drill down header. The header color can be customized by changing the values in the property drillDownHeaderColor and the selection color can be done by changing the drillDownSelectionColor property.

Property	Type	Description
enableDrillDown	bool	Gets or sets a value that indicates whether the drill down feature is enabled or not
drillDownHeaderColor	string	Gets or sets a color for header during drill down
drillDownSelectionColor	string	Gets or sets a color for highlighting tree map item during drill down.

HTML

<ej-treemap id="treemap"  [dataSource]="population_data" [enableDrillDown]="true"
                    weightValuePath= "Population"  uniColorMapping.color= "#CCDFE3">
    <e-levels>
          <e-level groupPath="Continent" [showLabels]= "true" [groupGap]=5 
          [headerHeight]=25 [showHeader]="true" headerTemplate='headertemplate'>
          </e-level>
          <e-level groupPath="Country" [showLabels]= "true" [groupGap]=5
           [headerHeight]=25 [showHeader]="true" headerTemplate='headertemplate'>
           </e-level>
          <e-level groupPath="Name" [showLabels]= "true" [groupGap]=5 
          [headerHeight]=25 [showHeader]="true" headerTemplate='headertemplate'>
          </e-level>
    </e-levels>
</ej-treemap>

Before Drill Down

After Drill Down