Properties

NameTypeDefault
baseColor String '#C2EEFF'

Sets or gets the baseColor property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source" [baseColor]="'#C2EEFF'">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
colorRanges Array<TreeMapColorRanges> [ { color: '#aa9988', min: 0, max: 10 }, { color: '#ccbbcc', min: 11, max: 50 }, { color: '#000', min: 50, max: 100 } ];
interface TreeMapColorRanges {
     color?: String;
     min?: Number;
     max?: Number;
}

Sets or gets the colorRanges property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source" [colorRanges]="colorRanges">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
colorRange Number 100

Sets or gets the colorRange property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source" [colorRange]="100">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
colorMode enum:TreeMapColorMode 'parent'
enum TreeMapColorMode {
     parent,
     autoColors,
     rangeColors
}

Sets or gets the colorMode property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source" [colorMode]="'autoColors'">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
displayMember String ""

Sets or gets the displayMember property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source" [displayMember]="'label'">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
height String | Number 600

Sets or gets the height property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
hoverEnabled Boolean false

Sets or gets the hoverEnabled property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source" [hoverEnabled]="true">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
headerHeight Number 25

Sets or gets the headerHeight property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source" [headerHeight]="30">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
legendLabel String "Legend"

Sets or gets the legendLabel property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source" [legendLabel]="'Olympic medal count - London 2012'">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
legendPosition TreeMapLegendPosition { x: 0, y: -5 }
interface TreeMapLegendPosition {
     x?: String | Number;
     y?: String | Number;
}

Sets or gets the legendPosition property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source" [legendPosition]="legendPosition">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
legendScaleCallback Any null

Sets or gets the legendScaleCallback property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source" [legendScaleCallback]="legendScaleCallback">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
renderCallbacks Any null

Sets or gets the renderCallbacks property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source" [renderCallbacks]="renderCallbacks">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
selectionEnabled Boolean true

Sets or gets the selectionEnabled property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source" [selectionEnabled]="false">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
showLegend Boolean true

Sets or gets the showLegend property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source" [showLegend]="false">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
source Any null

Sets or gets the source property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
theme String ''

Sets or gets the theme property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source" [theme]="'energyblue'">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
valueMember String ""

Sets or gets the valueMember property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source" [valueMember]="'value'">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}
width String | Number 600

Sets or gets the width property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source">
</jqxTreeMap>
`
})
export class AppComponent {
source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}

Events

bindingComplete Event

This event is triggered when the jqxTreeMap's source property is set to point to jqxDataAdapter instance and the jqxDataAdapter's binding is finished.

Code examples

Bind to the bindingComplete event of jqxTreeMap.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap(onBindingComplete)="BindingComplete($event)"
[width]="850" [height]="300" [source]="source">
</jqxTreeMap>
`
})
export class AppComponent {
BindingComplete(event: any): void
{
// Do Something
}

source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}

Methods

NameReturn TypeArguments
destroy Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source">
</jqxTreeMap>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myTreeMap') myTreeMap: jqxTreeMapComponent;
ngAfterViewInit(): void
{
this.myTreeMap.destroy();
}

source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}

render Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxTreeMap #myTreeMap
[width]="850" [height]="300" [source]="source">
</jqxTreeMap>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myTreeMap') myTreeMap: jqxTreeMapComponent;
ngAfterViewInit(): void
{
this.myTreeMap.render();
}

source: any[] =
[
{
label: 'Chrome',
value: 44.06,
color: '#37c837'
},
{
label: 'Internet Explorer',
value: 22.08,
color: '#0066ff'
},
{
label: 'Firefox',
value: 18.17,
color: '#ed7b0f'
},
{
label: 'Others',
value: 9.07,
color: '#818181'
},
{
label: 'Opera',
value: 3.38,
color: '#9a0900'
},
{
label: 'Safari',
value: 3.24,
color: '#4dbff1'
}
];
}