React UI Components Documentation

Sets ot gets the bulletcharts's animationDuration.

Possible values

number

'slow'

'fast'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120} animationDuration={500}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the bulletcharts's bar size.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120} barSize={'40%'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the bulletcharts's description.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120} description={'Description'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Disables the bullet chart.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the bulletcharts's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the bulletcharts's labelsFormat.

Possible values:

"null"

"d" - decimal numbers

"f" - floating-point numbers

"n" - integer numbers

"c" - currency numbers

"p" - percentage numbers

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120} labelsFormat={'c'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the bulletcharts's labelsFormatFunction.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      labelsFormatFunction: (value: string, position: string): any => {
        return value + 'C'
      }
    }
  }  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120} labelsFormatFunction={this.state.labelsFormatFunction}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the bulletcharts's orientation.

Possible values:

"horizontal"

"vertical"

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120} orientation={'horizontal'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the bulletcharts's pointer.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        pointer: {
          value: 270,
          label: 'Value',
          thickness: 8,
          color: 'White'
        }
    }
  }  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120} pointer={this.state.pointer}
      />
    );
  }
}
 
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 JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120} rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the bulletcharts's range.

Possible values

'startValue' - the value from which the range will start

'endValue' - the value where the current range will end

'color' - the colour of the range

'opacity' - the opacity of the range

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        ranges: [
          {
            startValue: 0, endValue: 200, color: 'Blue', opacity: 0.6
          },
          {
            startValue: 200, endValue: 250, color: 'Black', opacity: 0.3
          }
        ]
    }
  }  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120} ranges={this.state.ranges}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the bulletcharts's showTooltip.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120} showTooltip={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the bulletcharts's target.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        target: { value: 270, label: 'Value', thickness: 8, color: 'White' }
    }
  }  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120} target={this.state.target}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the bulletcharts's ticks.

Possible values for ticks.position

"near" - positions the ticks at the top of the ranges bar if the orientation is set to "horizontal" and at the left if the orientation is set to "vertical";

"far" - positions the ticks at the bottom of the ranges bar if the orientation is set to "horizontal" and at the right if the orientation is set to "vertical";

"both"

"none"

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        ticks: { position: 'near', interval: 20, size: 10 }
    }
  }  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120} ticks={this.state.ticks}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the bulletcharts's title.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120} title={'Title'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the bulletcharts's tooltipFormatFunction.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      tooltipFormatFunction: (pointerValue: number, targetValue: number): any => {
        return 'Current: ' + pointerValue + '; Average: ' + targetValue
      }
    }
  }  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120} tooltipFormatFunction={this.state.tooltipFormatFunction}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the bulletcharts's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxBulletChart.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();  
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} onChange={this.onChange} 
        width={500} height={120}
      />
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Destroy the jqxBulletChart widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();
 
  public componentDidMount(): void {
    this.myBulletChart.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Renders the jqxBulletChart widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();
 
  public componentDidMount(): void {
    this.myBulletChart.current!.render();
  }
   
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Refresh the jqxBulletChart widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();
 
  public componentDidMount(): void {
    this.myBulletChart.current!.refresh();
  }
   
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the selected value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBulletChart, { IBulletChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbulletchart';
 
class App extends React.PureComponent<{}, IBulletChartProps> {
  private myBulletChart = React.createRef<JqxBulletChart>();
 
  public componentDidMount(): void {
    this.myBulletChart.current!.val(50);
  }
   
  
  public render() {
    return (
      <JqxBulletChart ref={this.myBulletChart} 
        width={500} height={120}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);