| Name | Type | Default |
|---|
|
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);
|
|
|
|
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);
|
|
|
| Name | Arguments | Return 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);
|