Sets or gets the animationDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} animationDuration={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the backgroundColor property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} backgroundColor={'red'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the barSpacing property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} barSpacing={12}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the baseValue property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} baseValue={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the colorScheme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} colorScheme={'scheme02'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the customColorScheme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} colorScheme={colorScheme} customColorScheme={{"name":"colorScheme","colors":["#FFCF5E","#E83C64","#FF60B9","#52BDE8"]}}
            
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the endAngle property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} endAngle={180}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the formatFunction property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} formatFunction={formatFunction}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the labels property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} labels={labels}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the max property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={60}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the min property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} min={-25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the relativeInnerRadius property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} relativeInnerRadius={0}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rendered property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} rendered={rendered}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the startAngle property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} startAngle={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the title property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} title={title}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the tooltip property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} tooltip={tooltip}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the useGradient property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150} useGradient={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the values property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

The event is raised when the BarGauge finish rendering. Commonly used in combination with drawStart event.

Code examples

Bind to the drawEnd event of jqxBarGauge.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myBarGauge.on('drawEnd', (event) => {
            // Do Something...
        });
    }

    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

The event is raised when the BarGauge starts rendering again. Commonly used in combination with drawEnd event.

Code examples

Bind to the drawStart event of jqxBarGauge.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myBarGauge.on('drawStart', (event) => {
            // Do Something...
        });
    }

    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Fires when the jqxBarGauge is rendered for the first time. The BarGauge is initialized.

Code examples

Bind to the initialized event of jqxBarGauge.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myBarGauge.on('initialized', (event) => {
            // Do Something...
        });
    }

    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Fires when a BarGauge's tooltip is closed.

Code examples

Bind to the tooltipClose event of jqxBarGauge.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myBarGauge.on('tooltipClose', (event) => {
            // Do Something...
        });
    }

    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Fires when a BarGauge's tooltip is open.

Code examples

Bind to the tooltipOpen event of jqxBarGauge.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myBarGauge.on('tooltipOpen', (event) => {
            // Do Something...
        });
    }

    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Fires after the values are changed.

Code examples

Bind to the valueChanged event of jqxBarGauge.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myBarGauge.on('valueChanged', (event) => {
            // Do Something...
        });
    }

    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxBarGauge from 'jqwidgets-react/react_jqxbargauge.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myBarGauge.val([112, 125, 150, 137]);
    }

    
    render() {       
        let values = [102, 115, 130, 137];
 
        let labels = 
        {
            connectorColor: 'green', 
            connectorWidth: 1
        };
 
        let tooltip = 
        {
            formatFunction: (value, index) => {
                return `${value} $`;
            }, 
            visible: true, 
            precision: 0 
        };
 
        let rendered = () => 
        {
            // Do Something
        };
 
        let formatFunction(value, index, color) {
            return 'red';
        }   
        return (
            <JqxBarGauge ref='myBarGauge'
                 values={values} width={600} height={600} max={150}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));