ejTreeMap

11 Jul 201824 minutes to read

The treemap can be easily configured to the DOM element, such as div and can be created with a highly customized look and feel.

Syntax

$(element).ejTreeMap<span class="signature">()</span>

Example

HTML

<div id="container"> 
 
<script>
// Create TreeMap
$('#container').ejTreeMap();    
</script> 
  
</div>

Requires

module:jQuery
module:ej.datavisualization.TreeMap
module:JsRender
module:properties

Members

borderBrush `string`

Specifies the border brush color of the treemap

Default Value

“white”

Example

//To set borderBrush API value during initialization 
  $("#container").ejTreeMap( {borderBrush:'white'});

//Get or set the borderBrush API, after initialization:
   
   //Gets the borderBrush value 
   
   var property =$("#container").data("ejTreeMap").model.borderBrush;
 
   //Sets the borderBrush value 
   
   $("#container").data("ejTreeMap").model.borderBrush = 'white';

borderThickness `number`

Specifies the border thickness of the treemap

Default Value

Example

//To set borderThickness API value during initialization 
  $("#container").ejTreeMap({borderThickness:1});

//Get or set the borderThickness API, after initialization:
 
   //Gets the borderThickness value 
 
   var property =$("#container").data("ejTreeMap").model.borderThickness;
 
   //Sets the borderThickness value 
   
   $("#container").data("ejTreeMap").model.borderThickness = 1;

uniColorMapping `object`

Specifies the uniColorMapping settings of the treemap

uniColorMapping.color `string`

Specifies the uniform color mapping of the treemap

Default Value

null

Example

//To set uniColorMapping API value during initialization 
  $("#container").ejTreeMap( {uniColorMapping{ color: null }});

//Get or set the uniColorMapping API, after initialization:
   
   //Gets the uniColorMapping value 
   
   var property =$("#container").data("ejTreeMap").model.uniColorMapping.color;
 
   //Sets the uniColorMapping value 
   
   $("#container").data("ejTreeMap").model.uniColorMapping = { color: null };

desaturationColorMapping `object`

Specifies the desaturationColorMapping settings of the treemap

desaturationColorMapping.to `number`

Specifies the to value for desaturation color mapping

Default Value

Example

//To set to API value during initialization 
  $("#container").ejTreeMap( {desaturationColorMapping{ to:1}});

//Get or set the to API, after initialization:
   
   //Gets the to value 
   
   var property =$("#container").data("ejTreeMap").model.desaturationColorMapping.to;
 
   //Sets the to value 
   
   $("#container").data("ejTreeMap").model.desaturationColorMapping = { to:1};

desaturationColorMapping.color `string`

Specifies the color for desaturationColorMapping

Default Value

null

Example

//To set color API value during initialization 
  $("#container").ejTreeMap( {desaturationColorMapping{ color:"#41B8C4" }});

//Get or set the color API, after initialization:
   
   //Gets the color value 
   
   var property =$("#container").data("ejTreeMap").model.desaturationColorMapping.color;
 
   //Sets the color for desaturationColorMapping value 
   
   $("#container").data("ejTreeMap").model.desaturationColorMapping = { color:"#41B8C4" };

desaturationColorMapping.from `number`

Specifies the from value for desaturation color mapping

Default Value

Example

//To set from API value during initialization 
  $("#container").ejTreeMap( {desaturationColorMapping{ from:1}});

//Get or set the from API, after initialization:
   
   //Gets the from value 
   
   var property =$("#container").data("ejTreeMap").model.desaturationColorMapping.from;
 
   //Sets the from value 
   
   $("#container").data("ejTreeMap").model.desaturationColorMapping = { from:1};

desaturationColorMapping.rangeMaximum `number`

Specifies the rangeMaximum value for desaturation color mapping

Default Value

Example

//To set rangeMaximum API value during initialization 
  $("#container").ejTreeMap( {desaturationColorMapping{ rangeMaximum:1}});

//Get or set the rangeMaximum API, after initialization:
   
   //Gets the rangeMaximum value 
   
   var property =$("#container").data("ejTreeMap").model.desaturationColorMapping.rangeMaximum;
 
   //Sets the rangeMaximum value 
   
   $("#container").data("ejTreeMap").model.desaturationColorMapping = { rangeMaximum:1};

desaturationColorMapping.rangeMinimum `number`

Specifies the rangeMinimum value for desaturation color mapping

Default Value

Example

//To set rangeMinimum API value during initialization 
  $("#container").ejTreeMap( {desaturationColorMapping{ rangeMinimum:1}});

//Get or set the rangeMinimum API, after initialization:
   
   //Gets the rangeMinimum value 
   
   var property =$("#container").data("ejTreeMap").model.desaturationColorMapping.rangeMinimum;
 
   //Sets the rangeMinimum value 
   
   $("#container").data("ejTreeMap").model.desaturationColorMapping = { rangeMinimum:1};

paletteColorMapping `object`

Specifies the paletteColorMapping of the treemap

paletteColorMapping.colors `array`

Specifies the colors of the paletteColorMapping

Default Value

[]

Example

//To set the colors of the paletteColorMapping during initialization 
  $("#container").ejTreeMap( {paletteColorMapping{colors: ["red","green","blue", "yellow"]}});

//Get or set the colors of the paletteColorMapping, after initialization:
   
   //Gets the colors of the paletteColorMapping value 
   
   var property =$("#container").data("ejTreeMap").model.paletteColorMapping;
 
   //Sets the the colors of the paletteColorMapping
   
   $("#container").data("ejTreeMap").model.paletteColorMapping = {colors: ["red","green","blue", "yellow"]};

colorValuePath `string`

Specifies the color value path of the treemap

Default Value

null

Example

//To set colorValuePath API value during initialization 
  $("#container").ejTreeMap({colorValuePath:'GoldMedals'});

//Get or set the colorValuePath API, after initialization:
   
   //Gets the colorValuePath value 
   
   var property =$("#container").data("ejTreeMap").model.colorValuePath;
 
   //Sets the colorValuePath value 
   
   $("#container").data("ejTreeMap").model.colorValuePath = 'GoldMedals';

colorPath `string`

Specifies the field name in the datasource that contains color values for treemap items.

Default Value

null

Example

//To set colorPath API value during initialization
  $("#container").ejTreeMap({colorPath:'fill'});

//Get or set the colorPath API, after initialization:

   //Gets the colorPath value

   var property =$("#container").data("ejTreeMap").model.colorPath;

   //Sets the colorPath value

   $("#container").data("ejTreeMap").model.colorPath = 'fill';

dataSource `object`

Specifies the datasource of the treemap

Default Value

null

Example

//To set datasource API value during initialization 
  $("#container").ejTreeMap({datasource:medal_data});

//Get or set the datasource API, after initialization:
   
   //Gets the datasource value 
   
   var property =$("#container").data("ejTreeMap").model.datasource;
 
   //Sets the datasource value 
   
   $("#container").data("ejTreeMap").model.datasource = medal_data;

dockPosition `enum`

Specifies the dockPosition for legend

Name	Description
top	specifies the top position
bottom	specifies the bottom position
right	specifies the bottom position
left	specifies the left position

Default Value

Example

//To set dockPosition API value during initialization 
  $("#container").ejTreeMap( {legendSettings:{ dockPosition: "top"}});

//Get or set the dockPosition API, after initialization:
   
   //Gets the template value 
   
   var property =$("#container").data("ejTreeMap").model.legendSettings.dockPosition;
 
   //Sets the dockPosition value 
   
   $("#container").data("ejTreeMap").model.legendSettings = { dockPosition: "top"};

drillDownHeaderColor `string`

specifies the drillDown header color

####Default Value

‘null’

Example

// Set the drillDownHeaderColor during initialization.                  
   $("#container").ejTreeMap({drillDownHeaderColor:'#0478c3'});

//Get or set the drillDownHeaderColor API, after initialization:
   
   //Gets the drillDownHeaderColor value 
   
   var property =$("#container").data("ejTreeMap").model.drillDownHeaderColor;
 
   //Sets the drillDownHeaderColor value 
   
   $("#container").data("ejTreeMap").model.drillDownHeaderColor = '#0478c3';

drillDownSelectionColor `string`

specifies the drillDown selection color

Default Value

‘#000000’

Example

// Set the drillDownSelectionColor during initialization.                       
   $("#container").ejTreeMap({drillDownSelectionColor:'#e5e5e5'});

//Get or set the drillDownSelectionColor API, after initialization:
   
   //Gets the drillDownSelectionColor value 
   
   var property =$("#container").data("ejTreeMap").model.drillDownSelectionColor;
 
   //Sets the drillDownSelectionColor value 
   
   $("#container").data("ejTreeMap").model.drillDownSelectionColor = '#000000';

isHierarchicalDatasource `boolean`

Specifies whether datasource is hierarchical or not.

Default Value

false

Example

//To set isHierarchicalDatasource API value during initialization 
  $("#container").ejTreeMap({isHierarchicalDatasource : true});

//Get or set the isHierarchicalDatasource API, after initialization:
   
   //Gets the isHierarchicalDatasource value 
   
   var property =$("#container").data("ejTreeMap").model.isHierarchicalDatasource;
 
   //Sets the isHierarchicalDatasource value 
   
   $("#container").data("ejTreeMap").model.isHierarchicalDatasource = true;

header `string`

Specifies the header for parent item during drilldown. This is applicable only for hierarchical data source.

Default Value

null

Example

//To set header API value during initialization 
  $("#container").ejTreeMap({header:"Country"});

//Get or set the header API, after initialization:
   
   //Gets the header value 
   
   var property =$("#container").data("ejTreeMap").model.header;
 
   //Sets the header value 
   
   $("#container").data("ejTreeMap").model.header = "Country";

enableDrillDown `boolean`

Enable/Disable the drillDown for treemap

Default Value

false

Example

//To set enableDrillDown API value during initialization 
  $("#container").ejTreeMap({enableDrillDown:true});

//Get or set the enableDrillDown API, after initialization:
   
   //Gets the enableDrillDown value 
   
   var property =$("#container").data("ejTreeMap").model.enableDrillDown;
 
   //Sets the enableDrillDown value 
   
   $("#container").data("ejTreeMap").model.enableDrillDown = true;

drillDownValue `string`

Specifies to drill the particular data of the treemap.

Default Value

null

Example

//To set drillDownValue API value during initialization 
  $("#container").ejTreeMap({drillDownValue:'Asia'});

//Get or set the drillDownValue API, after initialization:
   
   //Gets the drillDownValue value 
   
   var property =$("#container").data("ejTreeMap").model.drillDownValue;
 
   //Sets the drillDownValue value 
   
   $("#container").data("ejTreeMap").model.drillDownValue = 'Asia';

drillDownLevel `number`

Specifies to render particular level of the treemap.

Default Value

Example

//To set drillDownLevel API value during initialization 
  $("#container").ejTreeMap({drillDownLevel:1});

//Get or set the drillDownLevel API, after initialization:
 
   //Gets the drillDownLevel value 
 
   var property =$("#container").data("ejTreeMap").model.drillDownLevel;
 
   //Sets the drillDownLevel value 
   
   $("#container").data("ejTreeMap").model.drillDownLevel = 5;

isResponsive `boolean`

Controls whether Treemap has to be responsive while resizing the window.

Default Value

true

Example

//To set isResponsive API value during initialization 
  $("#container").ejTreeMap({isResponsive:true});

enableResize `boolean`

Specifies whether treemap need to resize when container is resized

Default Value

true

Example

//To set enableResize API value during initialization 
  $("#container").ejTreeMap({enableResize:false});

//Get or set the enableResize API, after initialization:
   
   //Gets the enableResize value 
   
   var property =$("#container").data("ejTreeMap").model.enableResize;
 
   //Sets the enableResize value 
   
   $("#container").data("ejTreeMap").model.enableResize = false;

draggingOnSelection`boolean`

This property is used to select treemap items while clicking and dragging

Default Value

false

Example

//To set draggingOnSelection API value during initialization 
  $("#container").ejTreeMap({draggingOnSelection:false});

draggingGroupOnSelection`boolean`

This property is used to select group of treemap items while clicking and dragging

Default Value

false

Example

//To set draggingGroupOnSelectionAPI value during initialization 
  $("#container").ejTreeMap({draggingGroupOnSelection:false});

groupColorMapping `array`

Specifies the group color mapping of the treemap

Default Value

[]

Example

//To set groupColorMapping API value during initialization 
  $("#container").ejTreeMap( {groupColorMapping:[{ groupID: "Asia", rangeColorMapping:[{ color: "#77D8D8", from: "0", to: "1"}]}] });

//Get or set the groupColorMapping API, after initialization:
   
   //Gets the groupColorMapping value 
   
   var property =$("#container").data("ejTreeMap").model.groupColorMapping;
 
   //Sets the groupColorMapping value 
   
   $("#container").data("ejTreeMap").model.groupColorMapping = [groupColorMapping:[{ groupID: "Asia", rangeColorMapping:[{ color: "#77D8D8", from: "0", to: "1"}] }]});

groupColorMapping.groupID `string`

Specifies the groupID for GroupColorMapping.

Default Value

null

Example

// Set the groupID for GroupColorMapping during initialization.                         
        $("#container").ejTreeMap({groupColorMapping: [{ groupID:"Asia" }]})

//Get or set the groupID for GroupColorMapping after initialization:

  //Gets the groupID for GroupColorMapping from map.

  var property =$("#container").data("ejTreeMap").model.groupColorMapping.groupID;

  //Sets the groupID for GroupColorMapping to map.

  $("#container").data("ejTreeMap").model.groupColorMapping.groupID  = "Asia";

legendSettings `object`

Specifies the legend settings of the treemap

legendSettings.height `number`

Specifies the height for legend

Default Value

Example

//To set height API value during initialization 
  $("#container").ejTreeMap( {legendSettings:{ height: 15}});

//Get or set the height API, after initialization:
   
   //Gets the template value 
   
   var property =$("#container").data("ejTreeMap").model.legendSettings.height;
 
   //Sets the height value 
   
   $("#container").data("ejTreeMap").model.legendSettings = { height: 30};

legendSettings.width `number`

Specifies the width for legend

Default Value

Example

//To set width API value during initialization 
  $("#container").ejTreeMap( {legendSettings:{ width: 100}});

//Get or set the width API, after initialization:
   
   //Gets the template value 
   
   var property =$("#container").data("ejTreeMap").model.legendSettings.width;
 
   //Sets the width value 
   
   $("#container").data("ejTreeMap").model.legendSettings = { width: 100};

legendSettings.iconHeight `number`

Specifies the iconHeight for legend

Default Value

Example

//To set iconHeight API value during initialization 
  $("#container").ejTreeMap( {legendSettings:{ iconHeight: 15}});

//Get or set the iconHeight API, after initialization:
   
   //Gets the template value 
   
   var property =$("#container").data("ejTreeMap").model.legendSettings.iconHeight;
 
   //Sets the iconHeight value 
   
   $("#container").data("ejTreeMap").model.legendSettings = { iconHeight: 15};

legendSettings.iconWidth `number`

Specifies the iconWidth for legend

Default Value

Example

//To set iconWidth API value during initialization 
  $("#container").ejTreeMap( {legendSettings:{ iconWidth: 15}});

//Get or set the iconWidth API, after initialization:
   
   //Gets the template value 
   
   var property =$("#container").data("ejTreeMap").model.legendSettings.iconWidth;
 
   //Sets the iconWidth value 
   
   $("#container").data("ejTreeMap").model.legendSettings = { iconWidth: 15};

legendSettings.template `string`

Specifies the template for legendSettings

Default Value

null

Example

//To set template API value during initialization 
  $("#container").ejTreeMap( {legendSettings:{ template: null}});

//Get or set the template API, after initialization:
   
   //Gets the template value 
   
   var property =$("#container").data("ejTreeMap").model.legendSettings.template;
 
   //Sets the template value 
   
   $("#container").data("ejTreeMap").model.legendSettings = { template: null};

legendSettings.mode `string`

Specifies the mode for legendSettings whether default or interactive mode

Default Value

“default”

Example

//To set mode API value during initialization 
  $("#container").ejTreeMap( {legendSettings:{ mode: "interactive"}});

legendSettings.title `string`

Specifies the title text for legend

Default Value

””

Example

//To set title API value during initialization 
  $("#container").ejTreeMap( {legendSettings:{ title: "Population"}});

legendSettings.leftLabel `string`

Specifies the leftLabel text for legend

Default Value

””

Example

//To set leftLabel API value during initialization 
  $("#container").ejTreeMap( {legendSettings:{ leftLabel: "10Million"}});

legendSettings.rightLabel `string`

Specifies the rightLabel text for legend

Default Value

””

Example

//To set rightLabel API value during initialization 
  $("#container").ejTreeMap( {legendSettings:{ rightLabel: "100Million"}});

legendSettings.dockPosition `string`

Specifies the dockPosition text for legend

Default Value

“top”

Example

//To set dockPosition API value during initialization 
  $("#container").ejTreeMap( {legendSettings:{ dockPosition: "bottom"}});

legendSettings.alignment `string`

Specifies the alignment text for legend

Default Value

“near”

Example

//To set alignment API value during initialization 
  $("#container").ejTreeMap( {legendSettings:{ alignment: "far"}});

legendSettings.columnCount `number`

Specifies the alignment text for legend

Default Value

Example

//To set columnCount API value during initialization 
  $("#container").ejTreeMap( {legendSettings:{ columnCount: 2}});

highlightBorderBrush `string`

Specifies the highlight border brush of treemap

Default Value

“gray”

Example

//To set highlightBorderBrush API value during initialization 
  $("#container").ejTreeMap({highlightBorderBrush:'gray'});

//Get or set the highlightBorderBrush API, after initialization:
   
   //Gets the highlightBorderBrush value 
   
   var property =$("#container").data("ejTreeMap").model.highlightBorderBrush;
 
   //Sets the highlightBorderBrush value 
   
   $("#container").data("ejTreeMap").model.highlightBorderBrush = 'gray';

highlightBorderThickness `number`

Specifies the border thickness when treemap items is highlighted in the treemap

Default Value

Example

//To set highlightBorderThickness API value during initialization 
  $("#container").ejTreeMap({highlightBorderThickness:5});

//Get or set the highlightBorderThickness API, after initialization:
 
   //Gets the highlightBorderThickness value 
 
   var property =$("#container").data("ejTreeMap").model.highlightBorderThickness;
 
   //Sets the highlightBorderThickness value 
   
   $("#container").data("ejTreeMap").model.highlightBorderThickness = 5;

highlightGroupBorderBrush `string`

Specifies the highlight border brush of treemap

Default Value

“gray”

Example

//To set highlightGroupBorderBrush API value during initialization 
  $("#container").ejTreeMap({highlightGroupBorderBrush:'gray'});

//Get or set the highlightGroupBorderBrush API, after initialization:
   
   //Gets the highlightGroupBorderBrush value 
   
   var property =$("#container").data("ejTreeMap").model.highlightGroupBorderBrush;
 
   //Sets the highlightGroupBorderBrush value 
   
   $("#container").data("ejTreeMap").model.highlightGroupBorderBrush = 'gray';

highlightGroupBorderThickness `number`

Specifies the border thickness when treemap items is highlighted in the treemap

Default Value

Example

//To set highlightGroupBorderThickness API value during initialization 
  $("#container").ejTreeMap({highlightGroupBorderThickness:5});

//Get or set the highlightGroupBorderThickness API, after initialization:
   
   //Gets the highlightGroupBorderThickness value 
   
   var property =$("#container").data("ejTreeMap").model.highlightGroupBorderThickness;
 
   //Sets the highlightGroupBorderThickness value 
   
   $("#container").data("ejTreeMap").model.highlightGroupBorderThickness = 5;

highlightGroupOnSelection `boolean`

Specifies whether treemap item need to highlighted on selection

Default Value

false

Example

//To set highlightGroupOnSelection API value during initialization 
  $("#container").ejTreeMap({highlightGroupOnSelection:false});

//Get or set the highlightGroupOnSelection API, after initialization:
   
   //Gets the highlightGroupOnSelection value 
   
   var property =$("#container").data("ejTreeMap").model.highlightGroupOnSelection;
 
   //Sets the highlightGroupOnSelection value 
   
   $("#container").data("ejTreeMap").model.highlightGroupOnSelection = false;

highlightOnSelection `boolean`

Specifies whether treemap item need to highlighted on selection

Default Value

false

Example

//To set highlightOnSelection API value during initialization 
  $("#container").ejTreeMap({highlightOnSelection:false});

//Get or set the highlightOnSelection API, after initialization:
   
   //Gets the highlightOnSelection value 
   
   var property =$("#container").data("ejTreeMap").model.highlightOnSelection;
 
   //Sets the highlightOnSelection value 
   
   $("#container").data("ejTreeMap").model.highlightOnSelection = false;

itemsLayoutMode `enum`

Specifies the items layout mode of the treemap. Accepted itemsLayoutMode values are Squarified, SliceAndDiceHorizontal, SliceAndDiceVertical and SliceAndDiceAuto

Name	Description
squarified	specifies the squarified as layout type position
sliceanddicehorizontal	specifies the sliceanddicehorizontal as layout type position
sliceanddicevertical	specifies the sliceanddicevertical as layout type position
sliceanddiceauto	specifies the sliceanddiceauto as layout type position

Default Value

“Squarified”

Example

//To set itemsLayoutMode API value during initialization 
  $("#container").ejTreeMap({itemsLayoutMode:ej.datavisualization.TreeMap.ItemsLayoutMode.Squarified});

//Get or set the itemsLayoutMode API, after initialization:
   
   //Gets the itemsLayoutMode value 
   
   var property =$("#container").data("ejTreeMap").model.itemsLayoutMode;
 
   //Sets the itemsLayoutMode value 
   
   $("#container").data("ejTreeMap").model.itemsLayoutMode = ej.datavisualization.TreeMap.ItemsLayoutMode.Squarified;

enableGroupSeparator `boolean`

Specify to convert the date object to string, using locale settings.

Default Value

false

Example

//To set enableGroupSeparator API value during initialization 
  $("#container").ejTreeMap({enableGroupSeparator : true});

//Get or set the enableGroupSeparator API, after initialization:
   
   //Gets the enableGroupSeparator value 
   
   var property =$("#container").data("ejTreeMap").model.enableGroupSeparator;
 
   //Sets the enableGroupSeparator value 
   
   $("#container").data("ejTreeMap").model.enableGroupSeparator = true;

locale `string`

Name of the culture based on which Tree Map should be localized.

Default Value

“en-US”

Example

//Get or set the locale API, after initialization:

   //Gets the locale value 

    var property =$("#container").data("ejTreeMap").model.locale;
      
         
   //Sets the locale value

   $("#container").data("ejTreeMap").model.locale = "en-US";

leafItemSettings `object`

Specifies the leaf settings of the treemap

leafItemSettings.borderBrush `string`

Specifies the border brush color of the leaf item.

Default Value

“white”

Example

//To set borderBrush API value during initialization 
  $("#container").ejTreeMap({leafItemSettings:{ borderBrush: "white"}});

//Get or set the borderBrush API, after initialization:
   
   //Gets the borderBrush value 
   
   var property =$("#container").data("ejTreeMap").model.leafItemSettings.borderBrush;
 
   //Sets the borderBrush value 
   
   $("#container").data("ejTreeMap").model.leafItemSettings = { borderBrush: "white"};

leafItemSettings.borderThickness `number`

Specifies the border thickness of the leaf item.

Default Value

Example

//To set borderThickness API value during initialization 
  $("#container").ejTreeMap({leafItemSettings:{ borderThickness: 1}});

//Get or set the borderThickness API, after initialization:
   
   //Gets the borderThickness value 
   
   var property =$("#container").data("ejTreeMap").model.leafItemSettings.borderThickness;
 
   //Sets the borderThickness value 
   
   $("#container").data("ejTreeMap").model.leafItemSettings = { borderThickness: 1};

leafItemSettings.gap `number`

Specifies the space between the leaf items.

Default Value

Example

//To set gap API value during initialization 
  $("#container").ejTreeMap({leafItemSettings:{ gap: 1}});

//Get or set the gap API, after initialization:
   
   //Gets the gap value 
   
   var property =$("#container").data("ejTreeMap").model.leafItemSettings.gap;
 
   //Sets the gap value 
   
   $("#container").data("ejTreeMap").model.leafItemSettings = { gap: 1};

leafItemSettings.itemTemplate `string`

Specifies the label template of the leaf item.

Default Value

null

Example

//To set itemTemplate API value during initialization 
  $("#container").ejTreeMap({leafItemSettings:{ itemTemplate: "temp"}});

//Get or set the itemTemplate API, after initialization:
   
   //Gets the itemTemplate value 
   
   var property =$("#container").data("ejTreeMap").model.leafItemSettings.itemTemplate;
 
   //Sets the itemTemplate value 
   
   $("#container").data("ejTreeMap").model.leafItemSettings = { itemTemplate: "temp"};

leafItemSettings.labelPath `string`

Specifies the label path of the leaf item.

Default Value

null

Example

//To set labelPath API value during initialization 
  $("#container").ejTreeMap({leafItemSettings:{ labelPath: "GameName"}});

//Get or set the labelPath API, after initialization:
   
   //Gets the labelPath value 
   
   var property =$("#container").data("ejTreeMap").model.leafItemSettings.labelPath;
 
   //Sets the labelPath value 
   
   $("#container").data("ejTreeMap").model.leafItemSettings = { labelPath: "GameName"};

leafItemSettings.labelPosition `enum`

Specifies the position of the leaf labels.

Name	Description
none	specifies the none position
topleft	specifies the topleft position
topcenter	specifies the topcenter position
topright	specifies the topright position
centerleft	specifies the centerleft position
center	specifies the center position
centerright	specifies the centerright position
bottomleft	specifies the bottomleft position
bottomcenter	specifies the bottomcenter position
bottomright	specifies the bottomright position

Default Value

center

Example

//To set labelPosition API value during initialization 
  $("#container").ejTreeMap({leafItemSettings:{ labelPosition: "center"}});

//Get or set the labelPosition API, after initialization:
   
   //Gets the labelPosition value 
   
   var property =$("#container").data("ejTreeMap").model.leafItemSettings.labelPosition;
 
   //Sets the labelPosition value 
   
   $("#container").data("ejTreeMap").model.leafItemSettings.labelPosition= "topleft";

leafItemSettings.textOverflow `enum`

Specifies the overflow options for leaf labels.

Name	Description
none	Displays the label within the grid width
hide	Hides the label when its width exceeds grid width
wrap	Wrap the label by letter when its width exceeds grid width
wrapByWord	Wrap the label by word when its width exceeds grid width

Default Value

none

Example

//To set textOverflow API value during initialization 
  $("#container").ejTreeMap({leafItemSettings:{ textOverflow: "wrap"}});

//Get or set the textOverflow API, after initialization:
   
   //Gets the textOverflow value 
   
   var property =$("#container").data("ejTreeMap").model.leafItemSettings.textOverflow;
 
   //Sets the textOverflow value 
   
   $("#container").data("ejTreeMap").model.leafItemSettings.textOverflow= "wrapByWord";

leafItemSettings.labelVisibilityMode `enum`

Specifies the mode of label visibility

Name	Description
top	specifies the visible mode
hide on exceeded length	specifies the hide on exceeded length mode

Default Value

visible

Example

//To set labelVisibilityMode API value during initialization 
  $("#container").ejTreeMap({leafItemSettings:{ labelVisibilityMode: "visible"}});

//Get or set the labelVisibilityMode API, after initialization:
   
   //Gets the labelVisibilityMode value 
   
   var property =$("#container").data("ejTreeMap").model.leafItemSettings.labelVisibilityMode;
 
   //Sets the labelVisibilityMode value 
   
   $("#container").data("ejTreeMap").model.leafItemSettings.labelVisibilityMode= "visible";

leafItemSettings.showLabels `boolean`

Shows or hides the label of the leaf item.

Default Value

“false”

Example

//To set showLabels API value during initialization 
  $("#container").ejTreeMap({leafItemSettings:{ showLabels: "false"}});

//Get or set the showLabels API, after initialization:
   
   //Gets the showLabels value 
   
   var property =$("#container").data("ejTreeMap").model.leafItemSettings.showLabels;
 
   //Sets the showLabels value 
   
   $("#container").data("ejTreeMap").model.leafItemSettings = { showLabels: "false"};

rangeColorMapping `array`

Specifies the rangeColorMapping settings of the treemap

Default Value

[]

Example

//To set rangeColorMapping API value during initialization 
  $("#container").ejTreeMap( {rangeColorMapping:[{ color: "#77D8D8",legendLabel:"1% Growth", from: "0", to: "1" }]});

//Get or set the rangeColorMapping API, after initialization:
   
   //Gets the rangeColorMapping value 
   
   var property =$("#container").data("ejTreeMap").model.rangeColorMapping;
 
   //Sets the rangeColorMapping value 
   
   $("#container").data("ejTreeMap").model.rangeColorMapping = [{ color: "#77D8D8",legendLabel:"1% Growth", from: "0", to: "1" }];

rangeColorMapping.color `string`

Specifies the color value for rangeColorMapping.

Default Value

null

Example

// Set the color value for rangeColorMapping during initialization.                     
   $("#container").ejTreeMap({rangeColorMapping: [{ color: "#77D8D8" }]})

//Get or set the color value for rangeColorMapping after initialization:
  
  //Gets the color value for rangeColorMapping from map.
  
  var property =$("#container").data("ejTreeMap").model.rangeColorMapping.color;
  
  //Sets the color value for rangeColorMapping to map.
  
  $("#container").data("ejTreeMap").model.rangeColorMapping.color  = "#77D8D8";

rangeColorMapping.gradientColors `array`

specifies the gradient colors for th given range value

Default Value

[]

Example

//To set gradientColors API value during initialization 
  $("#container").ejTreeMap( {rangeColorMapping:[{ from: "0", to: "1", gradientColors: ["#fde6cc", "#fab665"] }]});

//Get or set the gradientColors API, after initialization:
   
   //Gets the gradientColors value 
   
   var property =$("#container").data("ejTreeMap").model.rangeColorMapping.gradientColors;
 
   //Sets the gradientColors value 
   
   $("#container").data("ejTreeMap").model.rangeColorMapping.gradientColors = ["#fde6cc", "#fab665"];

rangeColorMapping.from `number`

Specifies the from value for rangeColorMapping.

Default Value

-1

Example

// Set the from value for rangeColorMapping during initialization.                      
   $("#container").ejTreeMap({rangeColorMapping: [{ from:-1 }]})

//Get or set the from value for rangeColorMapping after initialization:

  //Gets the from value for rangeColorMapping from map.

  var property =$("#container").data("ejTreeMap").model.rangeColorMapping.from;

  //Sets the from value for rangeColorMapping to map.

  $("#container").data("ejTreeMap").model.rangeColorMapping.from  = -1;

rangeColorMapping.legendLabel `string`

Specifies the legend label value for rangeColorMapping.

Default Value

null

Example

// Set the legend label value for rangeColorMapping during initialization.                       
   $("#container").ejTreeMap({rangeColorMapping: [{ legendlabel: "1% Growth" }]})

//Get or set the legend label value for rangeColorMapping after initialization:

  //Gets the legend label value for rangeColorMapping from map.

  var property =$("#container").data("ejTreeMap").model.rangeColorMapping.legendLabel;

  //Sets the legend label value for rangeColorMapping to map.

  $("#container").data("ejTreeMap").model.rangeColorMapping.legendLabel  = "1% Growth";

rangeColorMapping.to `number`

Specifies the to value for rangeColorMapping.

Default Value

-1

Example

// Set the to value for rangeColorMapping during initialization.                        
   $("#container").ejTreeMap({rangeColorMapping: [{ to:-1 }]})

//Get or set the to value for rangeColorMapping after initialization:

  //Gets the to value for rangeColorMapping from map.

  var property =$("#container").data("ejTreeMap").model.rangeColorMapping.to;

  //Sets the to value for rangeColorMapping to map.

  $("#container").data("ejTreeMap").model.rangeColorMapping.to  = -1;

selectionMode `enum`

Specifies the selection mode of treemap item. Accepted selection mode values are Default and Multiple.

Name	Description
default	specifies the default mode
multiple	specifies the multiple mode

Default Value

“default”

Example

// Set the selection mode during initialization.                                        
          $("#container").ejTreeMap({selectionMode:'default'});

//Get or set the selection mode after initialization:
  
  //Gets the selection mode from treemap.
  
  var property =$("#container").data("ejTreeMap").model.selectionMode;
  
  //Sets the selection mode to treemap.
  
  $("#container").data("ejTreeMap").model.selectionMode  = 'default';

groupSelectionMode `enum`

Specifies the selection mode of the treemap. Accepted selection mode values are Default and Multiple.

Name	Description
default	specifies the default mode
multiple	specifies the multiple mode

Default Value

“default”

Example

// Set the selection mode during initialization.                                        
          $("#container").ejTreeMap({groupSelectionMode:'default'});

//Get or set the groupSelection mode after initialization:
  
  //Gets the selection mode from treemap.
  
  var property =$("#container").data("ejTreeMap").model.groupSelectionMode;
  
  //Sets the selection mode to treemap.
  
  $("#container").data("ejTreeMap").model.groupSelectionMode  = 'default';

showLegend `boolean`

Specifies the legend visibility status of the treemap

Default Value

false

Example

//To set showLegend API value during initialization 
  $("#container").ejTreeMap({showLegend:false});

//Get or set the showLegend API, after initialization:
   
   //Gets the showLegend value 
   
   var property =$("#container").data("ejTreeMap").model.showLegend;
 
   //Sets the showLegend value 
   
   $("#container").data("ejTreeMap").model.showLegend = false;

enableGradient `boolean`

Specifies whether gradient color has to be applied for treemap items

Default Value

false

Example

//To set enableGradient API value during initialization 
  $("#container").ejTreeMap({enableGradient:true});

//Get or set the enableGradient API, after initialization:
   
   //Gets the enableGradient value 
   
   var property =$("#container").data("ejTreeMap").model.enableGradient;
 
   //Sets the enableGradient value 
   
   $("#container").data("ejTreeMap").model.enableGradient = false;

showTooltip `boolean`

Specifies whether treemap showTooltip need to be visible

//To set showTooltip API value during initialization 
  $("#container").ejTreeMap({showTooltip:false});

//Get or set the showTooltip API, after initialization:
   
   //Gets the showTooltip value 
   
   var property =$("#container").data("ejTreeMap").model.showTooltip;
 
   //Sets the showTooltip value 
   
   $("#container").data("ejTreeMap").model.showTooltip = false;

tooltipTemplate `string`

Specifies the tooltip template of the treemap

Default Value

null

Example

//To set tooltipTemplate API value during initialization 
  $("#container").ejTreeMap({tooltipTemplate:'template'});

//Get or set the tooltipTemplate API, after initialization:
   
   //Gets the tooltipTemplate value 
   
   var property =$("#container").data("ejTreeMap").model.tooltipTemplate;
 
   //Sets the tooltipTemplate value 
   
   $("#container").data("ejTreeMap").model.tooltipTemplate = 'template';

treeMapItems `array`

Hold the treeMapItems to be displayed in treemap

Default Value

[]

Example

// Set the treeMapItems during initialization. 
  $("#container").ejTreeMap({treeMapItems:[]});

//Get or set the treeMapItems after initialization:

  //Gets the treeMapItems from treemap.

  var property =$("#container").data("ejTreeMap").model.treeMapItems;
             
  //Sets the treeMapItems to treemap.

  $("#container").data("ejTreeMap").model.treeMapItems = [];

levels `array`

Specify levels of treemap for grouped visualization of data

Default Value

[]

Example

// Set the levels during initialization.                
  $("#container").ejTreeMap({   levels: [{ groupPath: "Continent", groupGap: 5, headerHeight: 30, headerTemplate: 'headertemplate' }]})

//Get or set the levels after initialization:
  
  //Gets the levels from map.
  
  var levels =$("#container").data("ejTreeMap").model.levels[levelIndex];
  
  //Sets the levels to map.
  
  $("#container").data("ejTreeMap").model.levels[levelIndex]  = { groupPath: "Continent", groupGap: 5, headerHeight: 30, headerTemplate: 'Template' };

levels.groupBackground `string`

specifies the group background

Default Value

null

Example

// Set the groupBackground during initialization.                       
   $("#container").ejTreeMap({levels: [{ groupBackground:"white" }]})

//Get or set the groupBackground after initialization:

  //Gets the groupBackground from map.

  var property =$("#container").data("ejTreeMap").model.levels[levelIndex].groupBackground;

  //Sets the groupBackground to map.

  $("#container").data("ejTreeMap").model.levels[levelIndex].groupBackground  = "white";

levels.groupBorderColor `string`

Specifies the group border color for tree map level.

Default Value

null

Example

// Set the groupBorderColor during initialization.                      
   $("#container").ejTreeMap({levels: [{ groupBorderColor:"#58585B" }]})

//Get or set the groupBorderColor after initialization:

  //Gets the groupBorderColor from map.

  var property =$("#container").data("ejTreeMap").model.levels[levelIndex].groupBorderColor;

  //Sets the groupBorderColor to map.

  $("#container").data("ejTreeMap").model.levels[levelIndex].groupBorderColor  = "#58585B";

levels.groupBorderThickness `number`

Specifies the group border thickness for tree map level.

Default Value

Example

// Set the groupBorderThickness during initialization.                  
   $("#container").ejTreeMap({levels: [{ groupBorderThickness:1 }]})

//Get or set the groupBorderThickness after initialization:

  //Gets the groupBorderThickness from map.

  var property =$("#container").data("ejTreeMap").model.levels[levelIndex].groupBorderThickness;

  //Sets the groupBorderThickness to map.

  $("#container").data("ejTreeMap").model.levels[levelIndex].groupBorderThickness  = 1;

levels.groupGap `number`

Specifies the group gap for tree map level.

Default Value

Example

// Set the groupGap during initialization.                      
   $("#container").ejTreeMap({levels: [{ groupGap:1 }]})

//Get or set the groupGap after initialization:
  
  //Gets the groupGap from map.
  
  var property =$("#container").data("ejTreeMap").model.levels[levelIndex].groupGap;
  
  //Sets the groupGap to map.
  
  $("#container").data("ejTreeMap").model.levels[levelIndex].groupGap  = 1;

levels.groupPadding `number`

Specifies the group padding for tree map level.

Default Value

Example

// Set the groupPadding during initialization.                  
   $("#container").ejTreeMap({levels: [{ groupPadding:4 }]})

//Get or set the groupPadding after initialization:

  //Gets the groupPadding from map.

  var property =$("#container").data("ejTreeMap").model.levels[levelIndex].groupPadding;

  //Sets the groupPadding to map.

  $("#container").data("ejTreeMap").model.levels[levelIndex].groupPadding  = 4;

levels.groupPath `string`

Specifies the group path for tree map level.

Example

// Set the groupPath during initialization.                     
   $("#container").ejTreeMap({levels: [{ groupPath:"pathName" }]})

//Get or set the groupPath after initialization:

  //Gets the groupPath from map.

  var property =$("#container").data("ejTreeMap").model.levels[levelIndex].groupPath;

  //Sets the groupPath to map.

  $("#container").data("ejTreeMap").model.levels[levelIndex].groupPath  = "pathName";

levels.headerHeight `number`

Specifies the header height for tree map level.

Default Value

Example

// Set the headerHeight during initialization.                  
   $("#container").ejTreeMap({levels: [{ headerHeight:20 }]})

//Get or set the headerHeight after initialization:

  //Gets the headerHeight from map.

  var property =$("#container").data("ejTreeMap").model.levels[levelIndex].headerHeight;

  //Sets the headerHeight to map.

  $("#container").data("ejTreeMap").model.levels[levelIndex].headerHeight  = 1;

levels.headerTemplate `string`

Specifies the header template for tree map level.

Default Value

null

Example

// Set the headerTemplate during initialization.                        
   $("#container").ejTreeMap({levels: [{ headerTemplate:"template" }]})

//Get or set the headerTemplate after initialization:

  //Gets the headerTemplate from map.

  var property =$("#container").data("ejTreeMap").model.levels[levelIndex].headerTemplate;

  //Sets the headerTemplate to map.

  $("#container").data("ejTreeMap").model.levels[levelIndex].headerTemplate  = "template";

levels.headerVisibilityMode `enum`

Specifies the mode of header visibility

Name	Description
top	specifies the visible mode
hide on exceeded length	specifies the hide on exceeded length mode

Default Value

visible

Example

//To set labelVisibilityMode API value during initialization 
  $("#container").ejTreeMap({levels:[{ headerVisibilityMode: "visible"}]});

//Get or set the headerVisibilityMode API, after initialization:
   
   //Gets the headerVisibilityMode value 
   
   var property =$("#container").data("ejTreeMap").model.levels[0].headerVisibilityMode;
 
   //Sets the headerVisibilityMode value 
   
   $("#container").data("ejTreeMap").model.levels[0].headerVisibilityMode= "visible";

levels.labelPosition `enum`

Specifies the position of the labels.

Name	Description
none	specifies the none position
topleft	specifies the topleft position
topcenter	specifies the topcenter position
topright	specifies the topright position
centerleft	specifies the centerleft position
center	specifies the center position
centerright	specifies the centerright position
bottomleft	specifies the bottomleft position
bottomcenter	specifies the bottomcenter position
bottomright	specifies the bottomright position

Default Value

center

Example

//To set labelPosition API value during initialization 
  $("#container").ejTreeMap({levels:[{ labelPosition: "center"]}});

//Get or set the labelPosition API, after initialization:
   
   //Gets the labelPosition value 
   
   var property =$("#container").data("ejTreeMap").model.levels[0].labelPosition;
 
   //Sets the labelPosition value 
   
   $("#container").data("ejTreeMap").model.levels[0].labelPosition= "topleft";

levels.textOverflow `enum`

Specifies the overflow options for leaf labels.

Name	Description
none	Displays the label within the grid width
hide	Hides the label when its width exceeds grid width
wrap	Wrap the label by letter when its width exceeds grid width
wrapByWord	Wrap the label by word when its width exceeds grid width

Default Value

none

Example

//To set textOverflow API value during initialization 
  $("#container").ejTreeMap({levels:[{ textOverflow: "wrap"]}});

//Get or set the textOverflow API, after initialization:
   
   //Gets the textOverflow value 
   
   var property =$("#container").data("ejTreeMap").model.levels[0].textOverflow;
 
   //Sets the textOverflow value 
   
   $("#container").data("ejTreeMap").model.levels[0].textOverflow= "wrapByWord";

levels.labelTemplate `string`

Specifies the label template for tree map level.

Default Value

null

Example

// Set the labelTemplate during initialization.                         
   $("#container").ejTreeMap({levels: [{ labelTemplate:"template" }]})

//Get or set the labelTemplate after initialization:

  //Gets the labelTemplate from map.

  var property =$("#container").data("ejTreeMap").model.levels[levelIndex].labelTemplate;

  //Sets the labelTemplate to map.

  $("#container").data("ejTreeMap").model.levels[levelIndex].labelTemplate  = "template";

levels.labelVisibilityMode `enum`

Specifies the mode of label visibility

Name	Description
top	specifies the visible mode
hide on exceeded length	specifies the hide on exceeded length mode

Default Value

visible

Example

//To set labelVisibilityMode API value during initialization 
  $("#container").ejTreeMap({levels:[{ labelVisibilityMode: "visible"}]});

//Get or set the labelVisibilityMode API, after initialization:
   
   //Gets the labelVisibilityMode value 
   
   var property =$("#container").data("ejTreeMap").model.levels[0].labelVisibilityMode;
 
   //Sets the labelVisibilityMode value 
   
   $("#container").data("ejTreeMap").model.levels[0].labelVisibilityMode= "visible";

levels.showHeader `boolean`

Shows or hides the header for tree map level.

Default Value

false

Example

// Set the shoeHeader during initialization.                    
   $("#container").ejTreeMap({levels: [{ showHeader:false }]})

//Get or set the showHeader after initialization:

  //Gets the showHeader from treemap.

  var property =$("#container").data("ejTreeMap").model.levels[levelIndex].showHeader;

  //Sets the headerHeight to map.

  $("#container").data("ejTreeMap").model.levels[levelIndex].showHeader  = true;

levels.showLabels `boolean`

Shows or hides the labels for tree map level.

Default Value

false

Example

// Set the showLabels during initialization.                    
   $("#container").ejTreeMap({levels: [{ showLabels:false }]})

//Get or set the showLabels after initialization:

  //Gets the showLabels from map.

  var property =$("#container").data("ejTreeMap").model.levels[levelIndex].showLabels;

  //Sets the showLabels to map.

  $("#container").data("ejTreeMap").model.levels[levelIndex].showLabels  = false;

weightValuePath `string`

Specifies the weight value path of the treemap

Default Value

null

Example

//To set weightValuePath API value during initialization 
  $("#container").ejTreeMap({weightValuePath:'TotalMedals'});

//Get or set the weightValuePath API, after initialization:
   
   //Gets the weightValuePath value 
   
   var property =$("#container").data("ejTreeMap").model.weightValuePath;
 
   //Sets the weightValuePath value 
   
   $("#container").data("ejTreeMap").model.weightValuePath = 'TotalMedals';

Methods

refresh()

Method to reload treemap with updated values.

Returns: void

Example

//refresh method for treemap
   $("#container").ejTreeMap("refresh");

drillDown()

Method to drilldown the treemap.

Returns: void

Example

//refresh method for treemap
   $("#container").ejTreeMap("drillDown");

Events

treeMapItemSelected

Triggers on treemap item selected.

Name	Type	Description
HTML `originalEvent`	object	Returns selected treeMapItem object.

Example

//treemap item selected event for treemap
  $("#container").ejTreeMap({
   treeMapItemSelected: function () {}
  });

itemRendering

Triggers while rendering each treemap items.

Name	Type	Description
HTML `originalEvent`	object	Returns treemap leaf item

Example

//treemap item selected event for treemap
  $("#container").ejTreeMap({
   itemRendering: function () {}
  });

legendItemRendering

Triggers while rendering each legend item

Name	Type	Description
HTML `originalEvent`	object	Returns treemap legend item

Example

//treemap item selected event for treemap
  $("#container").ejTreeMap({
   legendItemRendering: function () {}
  });

drillStarted

Triggers when drilldown is started

Name	Type	Description
HTML `originalEvent`	object	Returns selected drilled treeMap object.

Example

//drillStarted event for treemap
  $("#container").ejTreeMap({
   drillStarted: function () {}
  });

drillDownItemSelected

Triggers on treemap drilldown item selected.

Name	Type	Description
HTML `originalEvent`	object	Returns selected drilldown treeMap object.

Example

//drillDownItemSelected event for treemap
  $("#container").ejTreeMap({
   drillDownItemSelected: function () {}
  });

headerTemplateRendering

Triggers before rendering the treemap drilldown header template

Name	Type	Description
HTML `originalEvent`	object	Returns drilldown header.

Example

//headerTemplateRendering event for treemap
  $("#container").ejTreeMap({
   headerTemplateRendering: function () {}
  });

refreshed

Triggers after refreshing the treemap items.

Name	Type	Description
HTML `originalEvent`	object	Refresh and load the treemap.

Example

//refreshed event for treemap
  $("#container").ejTreeMap({
   refreshed: function () {}
  });

treeMapGroupSelected

Triggers when the group selection is performed on treemap items.

Name	Type	Description
HTML `originalEvent`	object	Returns the selected group of treeMapItems as object.

Example

//treeMapGroupSelected event for treemap
  $("#container").ejTreeMap({
   treeMapGroupSelected: function () {}
  });

Click

Fires, on clicking the tree map items.

Name	Type	Description
HTML `originalEvent`	object	Returns the clicked group of treeMapItems as object.

Example

//Click event for tree map

 $("#container").ejTreeMap({

    click: function (args) {
              //Do something
    }
   
});

doubleClick

Fires, on double clicking the tree map items.

Name	Type	Description
HTML `originalEvent`	object	Returns the double clicked group of treeMapItems as object.

Example

//DoubleClick event for tree map

 $("#container").ejTreeMap({

    doubleClick: function (args) {
              //Do something
    }
   
});

rightClick

Fires, on right clicking the tree map items.

Name	Type	Description
HTML `originalEvent`	object	Returns the right clicked group of treeMapItems as object.

Example

//RightClick event for tree map

 $("#container").ejTreeMap({
    rightClick: function (args) {
              //Do something
    }
   
});

ejTreeMap

Syntax

Example

Requires

Members

borderBrush string

Default Value

Example

borderThickness number

Default Value

Example

uniColorMapping object

uniColorMapping.color string

Default Value

Example

desaturationColorMapping object

desaturationColorMapping.to number

Default Value

Example

desaturationColorMapping.color string

Default Value

Example

desaturationColorMapping.from number

Default Value

Example

desaturationColorMapping.rangeMaximum number

Default Value

Example

desaturationColorMapping.rangeMinimum number

Default Value

Example

paletteColorMapping object

paletteColorMapping.colors array

Default Value

Example

colorValuePath string

Default Value

Example

colorPath string

Default Value

Example

dataSource object

Default Value

Example

dockPosition enum

Default Value

Example

drillDownHeaderColor string

Example

drillDownSelectionColor string

Default Value

Example

isHierarchicalDatasource boolean

Default Value

Example

header string

Default Value

Example

enableDrillDown boolean

Default Value

Example

drillDownValue string

Default Value

Example

drillDownLevel number

Default Value

Example

isResponsive boolean

Default Value

Example

enableResize boolean

Default Value

Example

draggingOnSelectionboolean

Default Value

Example

draggingGroupOnSelectionboolean

Default Value

Example

groupColorMapping array

borderBrush `string`

borderThickness `number`

uniColorMapping `object`

uniColorMapping.color `string`

desaturationColorMapping `object`

desaturationColorMapping.to `number`

desaturationColorMapping.color `string`

desaturationColorMapping.from `number`

desaturationColorMapping.rangeMaximum `number`

desaturationColorMapping.rangeMinimum `number`

paletteColorMapping `object`

paletteColorMapping.colors `array`

colorValuePath `string`

colorPath `string`

dataSource `object`

dockPosition `enum`

drillDownHeaderColor `string`

drillDownSelectionColor `string`

isHierarchicalDatasource `boolean`

header `string`

enableDrillDown `boolean`

drillDownValue `string`

drillDownLevel `number`

isResponsive `boolean`

enableResize `boolean`

draggingOnSelection`boolean`

draggingGroupOnSelection`boolean`

groupColorMapping `array`

groupColorMapping.groupID `string`

legendSettings `object`

legendSettings.height `number`

legendSettings.width `number`

legendSettings.iconHeight `number`

legendSettings.iconWidth `number`

legendSettings.template `string`

legendSettings.mode `string`

legendSettings.title `string`

legendSettings.leftLabel `string`

legendSettings.rightLabel `string`

legendSettings.dockPosition `string`

legendSettings.alignment `string`

legendSettings.columnCount `number`

highlightBorderBrush `string`

highlightBorderThickness `number`

highlightGroupBorderBrush `string`

highlightGroupBorderThickness `number`

highlightGroupOnSelection `boolean`

highlightOnSelection `boolean`

itemsLayoutMode `enum`

enableGroupSeparator `boolean`

locale `string`

leafItemSettings `object`