Ej1 api migration in React Treemap component
24 Jan 202324 minutes to read
This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS 2.
Data Binding
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Datasource |
Property: dataSource<EJ.TreeMap id="treemap" dataSource={[{State:"United States", GDP:17946, percentage:11.08, Rank:1}]} weightValuePath='GDP' leafItemSettings={leaf}></EJ.TreeMap> var leaf={labelPath: 'State'}
|
Property: dataSource<TreeMapComponent id="treemap" dataSource={[{State:"United States", GDP:17946, percentage:11.08, Rank:1}]} weightValuePath='GDP' leafItemSettings={labelPath: 'State'}></TreeMapComponent>,
|
Appearance
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Layout |
Property: itemsLayoutMode<EJ.TreeMap id="treemap" itemsLayoutMode= "sliceanddiceauto"></EJ.TreeMap>
|
Property: layoutType<TreeMapComponent id="treemap" layoutType= 'SliceAndDiceAuto'></TreeMapComponent>
|
Weight Value Path |
Property: weightValuePath<EJ.TreeMap id="treemap" weightValuePath= "Population" ></EJ.TreeMap>
|
Property: weightValuePath<TreeMapComponent id="treemap" weightValuePath= 'Population'></TreeMapComponent>
|
Range Color Value Path |
Property: colorValuePath<EJ.TreeMap id="treemap" colorValuePath= "Continent"></EJ.TreeMap>
|
Property: rangeColorValuePath<TreeMapComponent id="treemap" rangeColorValuePath= 'Continent' ></TreeMapComponent>
|
Equal Color Value Path | Not Applicable |
Property: equalColorValuePath<TreeMapComponent id="treemap" equalColorValuePath= 'Asia' ></TreeMapComponent>
|
Height |
Property: height<EJ.TreeMap id="treemap" height= 50 ></EJ.TreeMap>
|
Property: height<TreeMapComponent id="treemap" height= '50px' ></TreeMapComponent>
|
Width |
Property: width<EJ.TreeMap id="treemap" width= 400></EJ.TreeMap>
|
Property: width<TreeMapComponent id="treemap" width='400px' ></TreeMapComponent>
|
Theme | Not Applicable |
Property: theme<TreeMapComponent id="treemap" theme= 'Highcontrast' ></TreeMapComponent>
|
Localization |
Property: locale<EJ.TreeMap id="treemap" locale= "en-US"></EJ.TreeMap>
|
Property: locale<TreeMapComponent id="treemap" locale='en-US' ></TreeMapComponent>
|
Palette Colors |
Property: paletteColorMapping.colors<EJ.TreeMap id="treemap" paletteColorMapping="paletteColorMapping"></EJ.TreeMap> var paletteColorMapping={ colors: ['red','green'] }
|
Property: palette<TreeMapComponent palette={['#C33764', '#AB3566']} id="treemap" ></TreeMapComponent>
|
Margin | Not Applicable |
Property: margin<TreeMapComponent id="treemap" ></TreeMapComponent>
|
Resize |
Property: enableResize<EJ.TreeMap id="treemap" enableResize: true></EJ.TreeMap>
|
Not Applicable |
Responsive |
Property: isResponsive<EJ.TreeMap id="treemap" isResponsive= true></EJ.TreeMap>
|
Not Applicable |
Leaf Items
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Border Color |
Property: leafItemSettings.borderBrush<EJ.TreeMap id="treemap" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap> var leafItem={borderBrush: "blue" }
|
Property: leafItemSettings.border<TreeMapComponent id="treemap" leafItemSettings={ border: { color: 'white' } }></TreeMapComponent>
|
Border Width |
Property: leafItemSettings.borderThickness<EJ.TreeMap id="treemap" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap> var leafItem={ borderThickness: 5}
|
Property: leafItemSettings.border<TreeMapComponent id="treemap" leafItemSettings={ border: { width: 5 } }></TreeMapComponent>
|
Gap Value |
Property: leafItemSettings.gap<EJ.TreeMap id="treemap" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap> var leafItem={ gap: 5}
|
Property: leafItemSettings.gap<TreeMapComponent id="treemap" leafItemSettings={ gap: 5 }></TreeMapComponent>
|
Leaf Item Label |
Property: leafItemSettings.itemTemplate<EJ.TreeMap id="treemap" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap> var leafItem={ itemTemplate: "template"}
|
Property: leafItemSettings.labelTemplate<TreeMapComponent id="treemap" leafItemSettings={ labelTemplate: 'template' }></TreeMapComponent>
|
Leaf Label Path |
Property: leafItemSettings.labelPath<EJ.TreeMap id="treemap" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap> var leafItem={ labelPath: "GameName" }
|
Property: leafItemSettings.labelPath<TreeMapComponent id="treemap" leafItemSettings={ labelPath: 'GameName' }></TreeMapComponent>
|
Leaf Label Position |
Property: leafItemSettings.labelPosition<EJ.TreeMap id="treemap" leafItemSettings ={leafItem} showLabels={true}></EJ.TreeMap> var leafItem={ labelPosition: "topcenter"}
|
Property: leafItemSettings.labelPosition<TreeMapComponent id="treemap" leafItemSettings={ labelPosition: 'Center' }></TreeMapComponent>
|
Leaf Label Color | Not Applicable |
Property: leafItemSettings.fill<TreeMapComponent id="treemap" leafItemSettings={ fill: 'red'}></TreeMapComponent>
|
Random Colors | Not Applicable |
Property: leafItemSettings.autoFill<TreeMapComponent id="treemap" leafItemSettings={ autoFill: true }></TreeMapComponent>
|
Format | Not Applicable |
Property: leafItemSettings.labelFormat<TreeMapComponent id="treemap" leafItemSettings={ labelFormat: '${Continent}-${Population}' }></TreeMapComponent>
|
Labels Visibility |
Property: leafItemSettings.showLabels<EJ.TreeMap id="treemap" showLabels={true}></EJ.TreeMap>
|
Property: leafItemSettings.showLabels<TreeMapComponent id="treemap" leafItemSettings={ showLabels: false }></TreeMapComponent>
|
Opacity | Not Applicable |
Property: *leafItemSettings.opacity *<TreeMapComponent id="treemap" leafItemSettings={ opacity: 0.7 }></TreeMapComponent>
|
Padding | Not Applicable |
Property: *leafItemSettings.padding *<TreeMapComponent id="treemap" leafItemSettings={ padding: 5}></TreeMapComponent>
|
Font Customization | Not Applicable |
Property: leafItemSettings.labelStyle<TreeMapComponent id="treemap" leafItemSettings={ labelStyle: { size: '12px', color: 'red', opacity: 0.5 } }></TreeMapComponent>
|
Position of Template | Not Applicable |
Property: leafItemSettings.templatePosition<TreeMapComponent id="treemap" leafItemSettings={ templatePosition: 'Center'}></TreeMapComponent>
|
Legend
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Legend Alignment |
Property: legendSettings.alignment<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ alignment: "far" }
|
Property: legendSettings.alignment <TreeMapComponent id="treemap" legendSettings={alignment: 'Near' }></TreeMapComponent>
|
Legend Visibility |
Property: showLegend<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ showLegend: false }
|
Property: legendSettings.visible<TreeMapComponent id="treemap" legendSettings={visible: true }></TreeMapComponent>
|
Legend Position |
Property: legendSettings.dockPosition<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ dockPosition: "bottom" }
|
Property: legendSettings.position<TreeMapComponent id="treemap" legendSettings={ position: 'Top' }></TreeMapComponent>
|
Legend Height |
Property: legendSettings.height<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ height: 40}
|
Property: legendSettings.height<TreeMapComponent id="treemap" legendSettings={ height: '40px' }></TreeMapComponent>
|
Legend Width |
Property: legendSettings.width<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ width: 100}
|
Property: legendSettings.width<TreeMapComponent id="treemap" legendSettings={ width: '100px' }</TreeMapComponent>
|
Shape Height |
Property: legendSettings.iconHeight<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ iconHeight: 15 }
|
Property: legendSettings.shapeHeight<TreeMapComponent id="treemap" legendSettings={ shapeHeight: '40px' }></TreeMapComponent>
|
Shape Width |
Property: legendSettings.iconWidth<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={iconWidth: 8 }
|
Property: legendSettings.shapeWidth<TreeMapComponent id="treemap" legendSettings={shapeWidth: '40px' }></TreeMapComponent>
|
Padding | Not Applicable |
Property: legendSettings.shapePadding<TreeMapComponent id="treemap" legendSettings={ shapePadding: 10}></TreeMapComponent>
|
Legend Title |
Property: legendSettings.title<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ iconWidth: 8 }
|
Property: legendSettings.title<TreeMapComponent id="treemap" legendSettings={title: 'Legend' }></TreeMapComponent>
|
Legend Shape | Not Applicable |
Property: legendSettings.shape<TreeMapComponent id="treemap" legendSettings={shape: 'Rectangle' }></TreeMapComponent>
|
Legend Mode |
Property: legendSettings.mode<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ mode: "interactive"}
|
Property: legendSettings.mode<TreeMapComponent id="treemap" legendSettings={ mode: 'Interactive' }></TreeMapComponent>
|
Legend Text Customization | Not Applicable |
Property: legendSettings.textStyle<TreeMapComponent id="treemap" legendSettings={textStyle: { size: '10px', opacity: 0.5, color: 'red' } }></TreeMapComponent>
|
Legend Title Customization | Not Applicable |
Property: legendSettings.titleStyle<TreeMapComponent id="treemap" legendSettings={ titleStyle: { size: '10px', opacity: 0.5, color: 'red' } }></TreeMapComponent>
|
Legend Shape Border | Not Applicable |
Property: legendSettings.shapeBorder<TreeMapComponent id="treemap" legendSettings={shapeBorder: { width: 2, color: 'red' } }></TreeMapComponent>
|
Legend Template |
Property: legendSettings.template<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ template: "template" }
|
Not Applicable |
Left Label |
Property: legendSettings.leftLabel<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ mode: "interactive", leftLabel: "10Million" }
|
Not Applicable |
Right Label |
Property: legendSettings.rightLabel<EJ.TreeMap id="treemap" legendSettings = {legend} ></EJ.TreeMap> var legend={ mode: "interactive", rightLabel: "100Million"}
|
Not Applicable |
Legend Shape Image | Not Applicable |
Property: legendSettings.imageUrl<TreeMapComponent id="treemap" legendSettings={ imageUrl: "image.png" }></TreeMapComponent>
|
Position in Interactive Legend | Not Applicable |
Property: legendSettings.labelPosition<TreeMapComponent id="treemap" legendSettings={labelPosition: "Center" }></TreeMapComponent>
|
Legend Location | Not Applicable |
Property: legendSettings.location<TreeMapComponent id="treemap" legendSettings={ location: { x: 10, y: 20 } }></TreeMapComponent>
|
Legend Orientation | Not Applicable |
Property: legendSettings.orientation<TreeMapComponent id="treemap" legendSettings={orientation: "Horizontal" }></TreeMapComponent>
|
Levels
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Random Colors | Not Applicable |
Property: levels.autoFill<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective autoFill=true></LevelDirective></LevelsDirective></TreeMapComponent>
|
Level Background Color |
Property: levels.groupBackground<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[groupBackground: "white" ]
|
Property: levels.fill<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective fill= 'white'></LevelDirective></LevelsDirective></TreeMapComponent>
|
Level Border Color |
Property: levels.groupBorderColor<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[groupBorderColor: "#58585B" ]
|
Property: levels.border.color<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective border= { color: "#58585B" } ></LevelDirective></LevelsDirective></TreeMapComponent>
|
Level Border Width |
Property: levels.groupBorderThickness<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[groupBorderThickness: 2 ]
|
Property: levels.border.width<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective border= { width: 2 }></LevelDirective></LevelsDirective></TreeMapComponent>
|
Group Gap |
Property: levels.groupGap<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[groupGap: 2 ]
|
Property: levels.groupGap<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective groupGap= 2></LevelDirective></LevelsDirective></TreeMapComponent>
|
Group Padding |
Property: levels.groupPadding<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[groupPadding: 1 ]
|
Property: levels.groupPadding<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective groupPadding={1} ></LevelDirective></LevelsDirective></TreeMapComponent>
|
Group Path |
Property: levels.groupPath<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[groupPath: "pathname" ]
|
Property: levels.groupPath<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective groupPath= 'pathname'></LevelDirective></LevelsDirective></TreeMapComponent>
|
Height of Header Level |
Property: levels.headerHeight<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[ headerHeight: 20 ]
|
Property: levels.headerHeight<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective headerHeight={20} ></LevelDirective></LevelsDirective></TreeMapComponent>
|
Header Template |
Property: levels.headerTemplate<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[ headerTemplate: "template" ]
|
Property: levels.headerTemplate<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective headerTemplate= 'template' ></LevelDirective></LevelsDirective></TreeMapComponent>
|
Opacity of Color | Not Applicable |
Property: levels.opacity<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective opacity={0.5}></LevelDirective></LevelsDirective></TreeMapComponent>
|
Header Visibility |
Property: levels.showHeader<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[showHeader: false ]
|
Property: levels.showHeader<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective showHeader={false}></LevelDirective></LevelsDirective> </TreeMapComponent>
|
Template Position |
Property: levels.labelPosition<EJ.TreeMap id="treemap" levels = {levels}></EJ.TreeMap> var levels=[ labelPosition: "topleft" ]
|
Property: levels.templatePosition<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective templatePosition= 'Center' ></LevelDirective></LevelsDirective></TreeMapComponent>
|
Header Style | Not Applicable |
Property: levels.headerStyle<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective headerStyle= { color: 'red', size: '16px', opacity: 0.7 } ></LevelDirective></LevelsDirective></TreeMapComponent>
|
Header Format | Not Applicable |
Property: levels.headerFormat<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective headerFormat= '${Continent}' ></LevelDirective></LevelsDirective></TreeMapComponent>
|
Header Alignment | Not Applicable |
Property: levels.headerAlignment<TreeMapComponent id="treemap"><LevelsDirective><LevelDirective headerAlignment= 'Center' ></LevelDirective></LevelsDirective></TreeMapComponent>
|
Selection
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Selection |
Property: selectionMode<EJ.TreeMap id="treemap" selectionMode="default"> </EJ.TreeMap>
|
Property: selectionSettings.mode<TreeMapComponent id="treemap" selectionSettings={ enable: true, mode: 'Item'}></TreeMapComponent> <Inject services={[TreeMapSelection]}/>
|
Selection Color | Not Applicable |
Property: selectionSettings.fill<TreeMapComponent id="treemap" selectionSettings={ enable: true, fill: 'blue' }></TreeMapComponent> <Inject services={[TreeMapSelection]}/>
|
Selection Color Opacity | Not Applicable |
Property: selectionSettings.opacity<TreeMapComponent id="treemap" selectionSettings={ enable: true, fill: 'blue', opacity: 0.6}></TreeMapComponent> <Inject services={[TreeMapSelection]}/>
|
Border for selection | Not Applicable |
Property: selectionSettings.border<TreeMapComponent id="treemap" selectionSettings={ border: { color: 'red', width: 2 } }></TreeMapComponent> <Inject services={[TreeMapSelection]}/>
|
Highlight
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Highlight Group Selection Mode |
Property: highlightGroupOnSelection<EJ.TreeMap id="treemap" highlightGroupOnSelection= {true} ></EJ.TreeMap>
|
Property: highlightSettings.mode<TreeMapComponent id="treemap" highlightSettings={ enable: true, mode: 'All'}></TreeMapComponent> <Inject services={[TreeMapHighlight]}/>
|
Highlight Selection Mode |
Property: highlightOnSelection<EJ.TreeMap id="treemap" highlightOnSelection= {true}></EJ.TreeMap>
|
Property: highlightSettings.mode<TreeMapComponent id="treemap" highlightSettings={enable: true, mode: 'Item' }></TreeMapComponent> <Inject services={[TreeMapHighlight]}/>
|
Highlight Group Border Color |
Property: highlightGroupBorderBrush<EJ.TreeMap id="treemap" highlightGroupBorderBrush= 'gray'></EJ.TreeMap>
|
Property: highlightSettings.border.color<TreeMapComponent id="treemap" highlightSettings={ enable: true, mode: 'All',border: { color: 'gray' } }></TreeMapComponent> <Inject services={[TreeMapHighlight]}/>
|
Highlight Group Border Width |
Property: highlightGroupBorderThickness<EJ.TreeMap id="treemap" highlightGroupBorderThickness= {3} ></EJ.TreeMap>
|
Property: highlightSettings.border.width<TreeMapComponent id="treemap" highlightSettings={enable: true, mode: 'All', border: { width: 3 } }></TreeMapComponent> <Inject services={[TreeMapHighlight]}/>
|
Highlight Selection Border Color |
Property: highlightBorderBrush<EJ.TreeMap id="treemap" highlightBorderBrush= 'gray' ></EJ.TreeMap>
|
Property: highlightSettings.border.color<TreeMapComponent id="treemap" highlightSettings={ enable: true, mode: 'Item', border: { color: 'gray' }}></TreeMapComponent> <Inject services={[TreeMapHighlight]}/>
|
Highlight Selection Border Width |
Property: highlightBorderThickness<EJ.TreeMap id="treemap" highlightBorderThickness= {3}></EJ.TreeMap>
|
Property: highlightSettings.border.width<TreeMapComponent id="treemap" highlightSettings={ enable: true, mode: 'Item', border: { width: 3 } }></TreeMapComponent> <Inject services={[TreeMapHighlight]}/>
|
Highlight Color | Not Applicable |
Property: highlightSettings.fill<TreeMapComponent id="treemap" highlightSettings={ enable: true, fill: 'red' }></TreeMapComponent> <Inject services={[TreeMapHighlight]}/>
|
Highlight Color Opacity | Not Applicable |
Property: highlightSettings.opacity<TreeMapComponent id="treemap" highlightSettings={ enable: true, fill: 'red', opacity: 0.5 }></TreeMapComponent> <Inject services={[TreeMapHighlight]}/>
|
Range ColorMapping
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
From value |
Property: rangeColorMapping.from<EJ.TreeMap id="treemap" rangeColorMapping="range"></EJ.TreeMap> var range=[{ from: 1000 } ]
|
Property: leafItemSettings.colorMapping.from<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ from: 1000 }] }></TreeMapComponent>
|
To value |
Property: rangeColorMapping.to<EJ.TreeMap id="treemap" rangeColorMapping="range"></EJ.TreeMap> var range=[{ to: 100000 } ]
|
Property: leafItemSettings.colorMapping.to<TreeMapComponent id="treemap" leafItemSettings={ colorMapping: [{ to: 100000 }] }></TreeMapComponent>
|
Color |
Property: rangeColorMapping.color<EJ.TreeMap id="treemap" rangeColorMapping="range"></EJ.TreeMap> var range=[{ color: "#77D8D8" } ]
|
Property: leafItemSettings.colorMapping.color<TreeMapComponent id="treemap" leafItemSettings={ colorMapping: [{ color: "#77D8D8" }] }></TreeMapComponent>
|
Legend Label |
Property: rangeColorMapping.legendLabel<EJ.TreeMap id="treemap" rangeColorMapping="range"></EJ.TreeMap> var range=[{ legendLabel: "Growth" } ]
|
Property: leafItemSettings.colorMapping.label<TreeMapComponent id="treemap" leafItemSettings={ colorMapping: [{ label: "Growth" }] }></TreeMapComponent>
|
Desaturation ColorMapping
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
From value |
Property: desaturationColorMapping.from<EJ.TreeMap id="treemap" desaturationColorMapping="desaturation"> </EJ.TreeMap> var desaturation=[{ from: 1000 } ]
|
Property: leafItemSettings.colorMapping.from<TreeMapComponent id="treemap" leafItemSettings={ colorMapping: [{ from: 1000 }] }></TreeMapComponent>
|
To value |
Property: desaturationColorMapping.to<EJ.TreeMap id="treemap" desaturationColorMapping="desaturation"> </EJ.TreeMap> var desaturation=[{ to: 10000 } ]
|
Property: leafItemSettings.colorMapping.to<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ to: 10000 }]}></TreeMapComponent>
|
Color |
Property: desaturationColorMapping.color<EJ.TreeMap id="treemap" desaturationColorMapping="desaturation"> </EJ.TreeMap> var desaturation=[{ color: "#77D8D8" } ]
|
Property: leafItemSettings.colorMapping.color<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ color: "#77D8D8" }] }></TreeMapComponent>
|
Value | Not Applicable |
Property: leafItemSettings.colorMapping.value<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ value: "Population" }]}></TreeMapComponent>
|
Minimum Opacity | Not Applicable |
Property: leafItemSettings.colorMapping.minOpacity<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ minOpacity: 0.7 }]}></TreeMapComponent>
|
Maximum Opacity | Not Applicable |
Property: leafItemSettings.colorMapping.maxOpacity<TreeMapComponent id="treemap" leafItemSettings={colorMapping: [{ maxOpacity: 1 }] }></TreeMapComponent>
|
Tooltip
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Tooltip |
Property: showTooltip<EJ.TreeMap id="treemap" showTooltip={true}></EJ.TreeMap>
|
Property: tooltipSettings.visible<TreeMapComponent id="treemap" tooltipSettings={ visible: true}></TreeMapComponent> <Inject services={[TreeMapTooltip, TreeMapLegend]}/>
|
Tooltip Template |
Property: tooltipTemplate<EJ.TreeMap id="treemap" showTooltip={true} tooltipTemplate='template' ></EJ.TreeMap>
|
Property: tooltipSettings.template<TreeMapComponent id="treemap" tooltipSettings={visible: true,template: 'template' }></TreeMapComponent> <Inject services={[TreeMapTooltip, TreeMapLegend]}/>
|
Tooltip Border | Not Applicable |
Property: tooltipSettings.border<TreeMapComponent id="treemap" tooltipSettings={visible: true,border: { color: 'red', width: 2 } }></TreeMapComponent> <Inject services={[TreeMapTooltip, TreeMapLegend]}/>
|
Tooltip Color | Not Applicable |
Property: tooltipSettings.fill<TreeMapComponent id="treemap" tooltipSettings={visible: true, fill: 'gray'}></TreeMapComponent> <Inject services={[TreeMapTooltip, TreeMapLegend]}/>
|
Tooltip Format | Not Applicable |
Property: tooltipSettings.format<TreeMapComponent id="treemap" tooltipSettings={visible: true, format: '${Population}'}></TreeMapComponent> <Inject services={[TreeMapTooltip, TreeMapLegend]}/>
|
Tooltip Marker Shape | Not Applicable |
Property: tooltipSettings.markerShapes<TreeMapComponent id="treemap" tooltipSettings={visible: true, markerShapes: 'Circle' }></TreeMapComponent> <Inject services={[TreeMapTooltip, TreeMapLegend]}/>
|
Tooltip Color Opacity | Not Applicable |
Property: tooltipSettings.opacity<TreeMapComponent id="treemap" tooltipSettings={visible: true,opacity: 0.5 }></TreeMapComponent> <Inject services={[TreeMapTooltip, TreeMapLegend]}/>
|
Tooltip Text Style | Not Applicable |
Property: tooltipSettings.textStyle<TreeMapComponent id="treemap" tooltipSettings={visible: true,textStyle: { Color: 'red', opacity: 0.5, size: '12px' }}></TreeMapComponent> <Inject services={[TreeMapTooltip, TreeMapLegend]}/>
|
Drilldown
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Drilldown |
Property: enableDrillDown<EJ.TreeMap id="treemap" enableDrillDown= {true} ></EJ.TreeMap>
|
Property: enableDrillDown<TreeMapComponent id="treemap" enableDrillDown= {true}></TreeMapComponent>
|
Drilldown Level |
Property: drillDownLevel<EJ.TreeMap id="treemap" drillDownLevel= {1}></EJ.TreeMap>
|
Property: InitialDrillSettings.groupIndex<TreeMapComponent id="treemap" InitialDrillSettings= { groupIndex: 1 }></TreeMapComponent>
|
Methods
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Treemap Refresh Method |
Method: refreshvar treemap = $("#container").ejTreeMap("instance"); treemap.refresh();
|
Method: refreshvar treemap = document.getElementById('container').ej2_instances[0]; treemap.refresh();
|
Method to Drilldown |
Method: drillDownvar treemap = $("#container").ejTreeMap("instance"); treemap.drillDown();
|
Not Applicable |
Append to Method | Not Applicable |
Method: appendTovar treemap = document.getElementById('container').ej2_instances[0]; treemap.appendTo();
|
Add Event Listener Method | Not Applicable |
Method: addEventListenervar treemap = document.getElementById('container').ej2_instances[0]; treemap.addEventListener();
|
Treemap Destroy Method | Not Applicable |
Method: destroyvar treemap = document.getElementById('container').ej2_instances[0]; treemap.destroy();
|
Treemap Exporting Method | Not Applicable |
Method: exportvar treemap = document.getElementById('container').ej2_instances[0]; treemap.export();
|
Get the Module Name | Not Applicable |
Method: getModuleNamevar treemap = document.getElementById('container').ej2_instances[0]; treemap.getModuleName();
|
Printing the Treemap | Not Applicable |
Method: printvar treemap = document.getElementById('container').ej2_instances[0]; treemap.print();
|
Resizing the Treemap | Not Applicable |
Method: resizeOnTreeMapvar treemap = document.getElementById('container').ej2_instances[0]; treemap.resizeOnTreeMap();
|
Inject Method (Tooltip) | Not Applicable |
Method: resizeOnTreeMap TreeMap.Inject(TreeMapTooltip); TreeMap.Inject(TreeMapTooltip); var treemap = document.getElementById('container').ej2_instances[0]; treemap.resizeOnTreeMap();
|
Remove Event Listener Method | Not Applicable |
Method: removeEventListenervar treemap = document.getElementById('container').ej2_instances[0]; treemap.removeEventListener();
|
Events
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Treemap Load Event | Not Applicable |
Event: load<TreeMapComponent id="treemap" load={this.load.bind(this)}></TreeMapComponent> load(args){ }
|
Treemap Loaded Event | Not Applicable |
Event: loaded<TreeMapComponent id="treemap" loaded={this.loaded.bind(this)}></TreeMapComponent> loaded(args){ }
|
Event Before Print | Not Applicable |
Event: beforePrint<TreeMapComponent id="treemap" beforePrint={this.beforePrint.bind(this)}></TreeMapComponent> beforePrint(args){ }
|
Click Event |
Event: click<EJ.TreeMap id="treemap" click = {click}></EJ.TreeMap> function click(args){}
|
Event: click<TreeMapComponent id="treemap" click={this.click.bind(this)}></TreeMapComponent> click(args){ }
|
Drill Start Event |
Event: drillStarted<EJ.TreeMap id="treemap" drillStarted = {drillStarted}></EJ.TreeMap> function drillStarted(args){}
|
Event: drillStart<TreeMapComponent id="treemap" drillStart={this. drillStart.bind(this)}></TreeMapComponent> drillStart(args){ }
|
Drill End Event | Not Applicable |
Event: drillEnd<TreeMapComponent id="treemap" drillEnd={this.drillEnd.bind(this)}></TreeMapComponent> drillEnd(args){ }
|
Event on Item Click | Not Applicable |
Event: itemClick<TreeMapComponent id="treemap" itemClick={this. itemClick.bind(this)}></TreeMapComponent> itemClick(args){ }
|
Treemap Item Select Event |
Event: treeMapItemSelected<EJ.TreeMap id="treemap" treeMapItemSelected = {TreeMapItemSelected}></EJ.TreeMap> function treeMapItemSelected(args){}
|
Event: itemSelected<TreeMapComponent id="treemap" itemSelected={this. itemSelected.bind(this)}></TreeMapComponent> itemSelected(args){ }
|
Treemap Item Rendering Event |
Event: itemRendering<EJ.TreeMap id="treemap" itemRendering = { itemRendering}></EJ.TreeMap> function itemRendering(args){}
|
Event: itemRendering<TreeMapComponent id="treemap" itemRendering={this. itemRendering.bind(this)}></TreeMapComponent> itemRendering(args){ }
|
Treemap Item Move Event | Not Applicable |
Event: itemMove<TreeMapComponent id="treemap" itemMove={this.itemMove.bind(this)}></TreeMapComponent> itemMove(args){ }
|
Treemap Item Highlight Event | Not Applicable |
Event: itemHighlight<TreeMapComponent id="treemap" itemHighlight={this.itemHighlight.bind(this)}></TreeMapComponent> itemHighlight(args){ }
|
Template Header Render Event |
Event: headerTemplateRendering<EJ.TreeMap id="treemap" headerTemplateRendering = {headerTemplateRendering}></EJ.TreeMap> function headerTemplateRendering(args){}
|
Not Applicable |
Drilldown Item Select Event |
Event: drillDownItemSelected<EJ.TreeMap id="treemap" drillDownItemSelected = {drillDownItemSelected}></EJ.TreeMap> function drillDownItemSelected(args){}
|
Not Applicable |
Refresh Event |
Event: refreshed<EJ.TreeMap id="treemap" refreshed = {refreshed}></EJ.TreeMap> function refreshed(args){}
|
Not Applicable |
Group Select Event |
Event: treeMapGroupSelected<EJ.TreeMap id="treemap" treeMapGroupSelected = { treeMapGroupSelected}></EJ.TreeMap> function treeMapGroupSelected(args){}
|
Not Applicable |
Mouse Event | Not Applicable |
Event: mouseMove<TreeMapComponent id="treemap" mouseMove={this.mouseMove.bind(this)}></TreeMapComponent> mouseMove(args){ }
|
Resize Event | Not Applicable |
Event: resize<TreeMapComponent id="treemap" resize={this.resize.bind(this)}></TreeMapComponent> resize(args){ }
|
Tooltip Render Event | Not Applicable |
Event: tooltipRendering<TreeMapComponent id="treemap" tooltipRendering={this.tooltipRendering.bind(this)}></TreeMapComponent> tooltipRendering(args){ }
|
Double Click Event |
Event: doubleClick<EJ.TreeMap id="treemap" doubleClick = {doubleClick}></EJ.TreeMap> function doubleClick(args){}
|
Not Applicable |
Right Click Event |
Event: rightClick<EJ.TreeMap id="treemap" rightClick = {rightClick}></EJ.TreeMap> function rightClick(args){}
|
Not Applicable |