React UI Components Documentation

Sets or gets the animationDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target} animationDuration={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the barSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target} barSize={'40%'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the description property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target} description={'Description'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the labelsFormat property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target} labelsFormat={'c'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the labelsFormatFunction property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target} labelsFormatFunction={labelsFormatFunction}
            
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the orientation property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target} orientation={'horizontal'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pointer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the ranges property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showTooltip property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target} showTooltip={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the target property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the ticks property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the title property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target} title={'Title'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the tooltipFormatFunction property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target} tooltipFormatFunction={tooltipFormatFunction}
            
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxBulletChart.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myBulletChart.on('change', (event) => {
            // Do Something...
        });
    }

    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myBulletChart.destroy();
    }

    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myBulletChart.render();
    }

    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myBulletChart.refresh();
    }

    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBulletChart from 'jqwidgets-react/react_jqxbulletchart.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myBulletChart.val(50);
    }

    render() {       
        let title = 'Revenue 2014 YTD'; 
 
        let description = '(U.S. $ in thousands)';
  
        let ranges = 
        [
            { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
            { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
            { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
        ];
 
        let pointer = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
        let target = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
        let ticks = { position: 'both', interval: 50, size: 10 }; 
        return (
            <JqxBulletChart ref='myBulletChart'
                 width={500} height={120} pointer={pointer} ticks={ticks} ranges={ranges} target={target}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));