Sets or gets the baseColor property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source} baseColor={'#C2EEFF'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the colorRanges property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source} colorRanges={colorRanges}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the colorRange property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source} colorRange={100}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the colorMode property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source} colorMode={'autoColors'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the displayMember property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source} displayMember={'label'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the hoverEnabled property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source} hoverEnabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the headerHeight property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source} headerHeight={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the legendLabel property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source} legendLabel={'Olympic medal count - London 2012'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the legendPosition property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source} legendPosition={legendPosition}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the legendScaleCallback property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source} legendScaleCallback={legendScaleCallback}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the renderCallbacks property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source} renderCallbacks={renderCallbacks}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the selectionEnabled property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source} selectionEnabled={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showLegend property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source} showLegend={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the source property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the valueMember property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source} valueMember={'value'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeMap.on('bindingComplete', (event) => {
            // Do Something...
        });
    }

    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeMap.destroy();
    }

    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTreeMap from 'jqwidgets-react/react_jqxtreemap.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTreeMap.render();
    }

    render() {       
        let source = 
        [
            {
                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'
            }
        ];
        return (
            <JqxTreeMap ref='myTreeMap'
                width={850} height={300} source={source}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));