React UI Components

Show Demo List

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title id='Description'> This ReactJS demo displays jqxBarGauge with negative values. </title> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> </head> <body> <div class="example-description"> This ReactJS demo displays jqxBarGauge with negative values. </div> <div id="app"></div> <script src="../build/bargauge_negativevalues.bundle.js"></script> </body> </html>

import React from 'react'; import ReactDOM from 'react-dom'; import JqxBarGauge from '../../../jqwidgets-react/react_jqxbargauge.js'; class App extends React.Component { render() { let labels = { formatFunction: (value) => { return value + ' m'; }, precision: 1, indent: 15 } return ( <JqxBarGauge width={600} height={600} max={45} min={-45} endAngle={90} labels={labels} animationDuration={0} relativeInnerRadius={0.2} baseValue={0} startAngle={270} colorScheme={'scheme02'} values={[12, -35, -14.78, 29.5, 23.124, 41]} /> ) } } ReactDOM.render(<App />, document.getElementById('app'));