React UI Components Documentation

Sets or gets the alterTextCase property used to specify the field by which tags should be sorted.
Possible values are 'none', 'allLower', 'allUpper', 'firstUpper', 'titleCase'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        alterTextCase={'titleCase'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the ability to follow tag links in jqxTagCloud.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the displayLimit property used to filter highest values tags up to the number specified.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        displayLimit={3}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the field name used for the tag label.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the displayValue property used to specify whether to add the tag value field after the text.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        displayValue={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the fontSizeUnit property used to set the font size unit possible values 'px', 'em', '%'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        fontSizeUnit={'em'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxTagCloud's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        height={50}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the maxColor property used to specify color of the tags for the elements with highest value attribute.
Together with minColor property will set color of tags in a gradient fashion depending on their value attribute towards the highest value.
Possible values: all browser supported colors including rgba.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        maxColor={'darkgreen'} minColor={'lime'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the maxFontSize property used to set the font size of the tags with the highest value attribute.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        maxFontSize={5}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the maxValueToDisplay property used to filter tags with value higher than the specified.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        maxValueToDisplay={50}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the minColor property used to specify color of the tags for the elements with lowest value attribute.
Together with maxColor property will set color of tags in a gradient fashion depending on their value attribute towards the highest value.
Possible values: all browser supported colors including rgba.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        maxColor={'darkgreen'} minColor={'lime'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the minFontSize property used to set the font size of the tags with the lowest value attribute.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        minFontSize={1}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the minValueToDisplay property used to filter tags with value lower than the specified.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        minValueToDisplay={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the sortBy property used to specify the field by which tags should be sorted.
Possible values are 'none', 'label', 'value'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        sortBy={'label'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the sortOrder property used to specify the direction in which tags should be sorted.
Possible values are 'ascending', 'descending'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        sortBy={'label'} sortOrder={'descending'}
      />
    );
  }
}
 
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 JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

A callback function used for custom tags rendering.

function tagRenderer (itemData, minValue, valueRange)

itemData - the record information of the current tag

minValue - the lowest value attribute of all elements in the cloud

valueRange - the difference between the lowest and highest value attributes in the cloud ( can be used for custom logic )

The function must return valid content for an anchor tag, usually a string but can be also be a jquery element object.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        tagRenderer: (itemData: any, minValue: number, valueRange: number): any => {
          return '<i>' + itemData.countryName + '</i>';
        },
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        tagRenderer={this.state.tagRenderer}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the takeTopWeightedItems property. Property indicates if displayLimit will prioritize highest value members

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        takeTopWeightedItems={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the textColor property used to specify color of the tags in the case where the minColor and maxColor properties are not set.
Possible values: all browser supported colors including rgba.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        textColor={'red'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the field name used for common base URL path for all tags.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        urlBase={'http://jqwidgets.com/'} urlMember={'url'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the field name used by the anchor element.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
        urlMember={'url'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the field name used for value/weight.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxTagCloud's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the widget has completed binding to a dataAdapter.

Code examples

Bind to the bindingComplete event of jqxTagCloud.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
 
  public componentDidMount(): void {
    this.myTagCloud.current!.setOptions({ source: this.source });
  }
   
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} onBindingComplete={this.onBindingComplete} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
      />
    );
  }
 
  private onBindingComplete(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a tag element is clicked. Event Arguments:

• label - item's label.
• value - item's value.
• url - item's url.
• visibleIndex - item's visible index.
• index - item's index.
• originalEvent - the Click event object.
• target - item's html element.

Code examples

Bind to the itemClick event of jqxTagCloud.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
  
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} onItemClick={this.onItemClick} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
      />
    );
  }
 
  private onItemClick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Calls the widget's destroy function.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
 
  public componentDidMount(): void {
    this.myTagCloud.current!.destroy();
  }
   
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Returns the index of the first tag with the specified label (displayMember).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
 
  public componentDidMount(): void {
    this.myTagCloud.current!.findTagIndex('Germany');
  }
   
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Returns an array with indices of all hidden tags.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
 
  public componentDidMount(): void {
    this.myTagCloud.current!.getHiddenTagsList();
  }
   
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Returns an array with a copy of all tags that have been rendered in the order that they have been rendered.
This array excludes filtered values. But includes hidden ones.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
 
  public componentDidMount(): void {
    this.myTagCloud.current!.getRenderedTags();
  }
   
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Returns an array with a copy of all tags.
This list is used before any filtering/sorting/hiding is done.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
 
  public componentDidMount(): void {
    this.myTagCloud.current!.getTagsList();
  }
   
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Hides an element with specified index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
 
  public componentDidMount(): void {
    this.myTagCloud.current!.hideItem(1);
  }
   
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Inserts an element before an element with specified index

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
 
  public componentDidMount(): void {
    this.myTagCloud.current!.insertAt(1,{ countryName: "Bulgaria", technologyRating: 50, url: "community" });
  }
   
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Deletes an element with specified index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
 
  public componentDidMount(): void {
    this.myTagCloud.current!.removeAt(1);
  }
   
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Updates an element with specified index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
 
  public componentDidMount(): void {
    this.myTagCloud.current!.updateAt(1,{ countryName: "USA", technologyRating: 70, url: "community" });
  }
   
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Reveals a hidden element with specified index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTagCloud, { ITagCloudProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtagcloud';
 
class App extends React.PureComponent<{}, ITagCloudProps> {
  private myTagCloud = React.createRef<JqxTagCloud>(); 
 
  constructor(props: {}) {
    super(props);
 
    let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
    ];
    const source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
    };
    
    this.state = {
        source: new jqx.dataAdapter(source)
    }
  }
 
  public componentDidMount(): void {
    this.myTagCloud.current!.showItem(1);
  }
   
  public render() {
    return (
      <JqxTagCloud ref={this.myTagCloud} 
        source={this.state.source} width={800} displayMember={'countryName'} valueMember={'technologyRating'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);