Angular UI Components Documentation

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}

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'
        }
    ];
}
							
						

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'
        }
    ];
}
							
						

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'
        }
    ];
}