Properties

NameTypeDefault
animationDuration number null

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);
barSize number | string 50%

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);
description string 'Description'

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);
disabled boolean false

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);
height string | number 100

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);
labelsFormat BulletChartLabelsFormat null
BulletChartLabelsFormat: "null" | "d" | "f" | "n" | "c" | "p"

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);
labelsFormatFunction (value?: BulletChartLabelsFormatFunction['value'], position?: BulletChartLabelsFormatFunction['position']) => any null
Interface BulletChartLabelsFormatFunction {
  value?: string;
  position?: string;
}

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);
orientation BulletChartOrientation "horizontal"
BulletChartOrientation: "horizontal" | "vertical"

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);
pointer BulletChartPointer { value: 65, label: "Value", size: "25%", color: "" }
Interface BulletChartPointer {
  value?: number;
  label?: string;
  size?: number | string;
  color?: string;
}

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);
rtl boolean false

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);
ranges Array<BulletChartRanges> [{ startValue: 0, endValue: 50, color: "#000000", opacity: 0.7 }, { startValue: 50, endValue: 80, color: "#000000", opacity: 0.5 }, { startValue: 80, endValue: 100, color: "#000000", opacity: 0.3}]
Interface BulletChartRanges {
  startValue?: number;
  endValue?: number;
  opacity?: number;
  color?: string;
}

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);
showTooltip boolean true

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);
target BulletChartPointer { value: 85, label: "Target", size: 4, color: "" };
Interface BulletChartPointer {
  value?: number;
  label?: string;
  size?: number | string;
  color?: string;
}

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);
ticks BulletChartTicks { position: "far", interval: 20, size: 10 }
BulletChartTicksPosition: "near" | "far" | "both" | "none"

Interface BulletChartTicks {
  position?: BulletChartTicksPosition;
  interval?: number;
  size?: number | string;
}

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);
title string 'Title'

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);
tooltipFormatFunction (pointerValue?: BulletChartTooltipFormatFunction['pointerValue'], targetValue?: BulletChartTooltipFormatFunction['targetValue']) => string null
Interface BulletChartTooltipFormatFunction {
  pointerValue?: number;
  targetValue?: number;
}

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);
width string | number 500

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);

Events

change Event

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);

Methods

NameArgumentsReturn Type
destroy None

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);
render None

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 None

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);
val value

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);