React UI Components Documentation

Sets or gets the default color used when the colorMode property is set to "autoColors".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50} baseColor={'#C2EEAA'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the color ranges used when the colorMode property is set to "rangeColors"

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        colorRanges: [
          { color: '#52CBFF', min: 0, max: 85 },
          { color: '#52CBAA', min: 86, max: 105 }
        ],
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50} colorRanges={this.state.colorRanges}
        colorMode={'rangeColors'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the range in which the base colors can vary. The value is expected to be from 0 to 255.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={100}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the sectors rendering behavior.

• parent - a child sector inherits the color from its parent sector. Depending on the child value and the colorRange property the color varies.
• autoColors - automatic color generation based on the baseColor/colorRange and the value.
• rangeColors - the user can sets array of color ranges. Each color range has the properties min, max and color.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50} colorMode={'autoColors'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the displayMember property. The displayMember determines the name of an object property to display. The name is contained in the collection specified by the source property and the name is stored in the label field of each sector. The property is taken into account when the jqxTreeMap's source property points to jqxDataAdapter instance.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50} displayMember={'label'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxTreeMap's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50} height={500}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether a sector will be outlined when the mouse cursor is over it.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50} hoverEnabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of the parent sector's header.

Sets or gets the Legend's label.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50} legendLabel={'Olympic medal count - London 2012'}
        colorMode={'autoColors'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Legend's position. The x determines the X offset of the Legend from the left side of the jqxTreeMap. The y determines the Y offset of the Legend from the bottom side of jqxTreeMap.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50} legendPosition={{x: 20, y: 0}}
        colorMode={'autoColors'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a callback function which formats the values displayed in the jqxTreeMap's Legend.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        legendScaleCallback: (v: number): any => {
          v = v.toFixed(1);
        return v;
        },
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50} colorMode={'autoColors'} legendScaleCallback={this.state.legendScaleCallback}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets callback function(s) which enable you to customize the rendering of any sector in the jqxTreeMap. To define a callback function for all sectors, use the "*" : function(sectorHtmlElement, sectorData) syntax. To define a callback function for a specific element, use its label value instead of "*".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        renderCallbacks: {
            '*': function (element, data) {
                element.css({
                    color: '#ffffff'
                });
                element.html('<span style="font-size: 11px;" class="jqx-treemap-label">' + data.label + ', ' + data.value + '</span>');
                return true;
            }
        },
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50} renderCallbacks={this.state.renderCallbacks}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether a sector will be outlined when it is clicked..

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50} selectionEnabled={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the jqxTreeMap's Legend is displayed. Legend is possible to be displayed when the colorMode property is set to "autoColors" or "rangeColors".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50} showLegend={false} colorMode={'autoColors'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Specifies the jqxTreeMap's data source. Use this property to populate the jqxTreeMap.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50} theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the valueMember property. The valueMember determines the name of an object property to set as a value of the treemap sectors. The name is contained in the collection specified by the source property. The property is taken into account when the jqxTreeMap's source property points to jqxDataAdapter instance.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50} valueMember={'value'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxTreeMap's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
  
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50} width={500}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

Destroy the jqxTreeMap widget. The destroy method removes the jqxTreeMap widget from the web page.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
 
  public componentDidMount(): void {
    this.myTreeMap.current!.destroy();
  }
   
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Renders the jqxTreeMap widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';
 
class App extends React.PureComponent<{}, ITreeMapProps> {
  private myTreeMap = React.createRef<JqxTreeMap>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
    }
  }
 
  public componentDidMount(): void {
    this.myTreeMap.current!.render();
  }
   
  public render() {
    return (
      <JqxTreeMap ref={this.myTreeMap} 
        source={this.state.source} colorRange={50}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);