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 is an example ot React Chart Pie Series. The data is prepared as an array from a CSV file. The type of the seriesGroup is pie. You can see how to set the position of the legend with the legendPosition setting. You can also see how to set the radius, the label of the radius and the initial angle of the pie chart. The center offset is set to 0 in this case. </title> <meta name="description" content="This React Chart demo showcases how to create a Pie Chart'" /> <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/jqxchart.core.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../../scripts/demos.js"></script> </head> <body> <div class="example-description" style="margin-bottom:3em"> This is an example ot React Chart Pie Series. The data is prepared as an array from a CSV file. The type of the seriesGroup is pie. You can see how to set the position of the legend with the legendPosition setting. You can also see how to set the radius, the label of the radius and the initial angle of the pie chart. The center offset is set to 0 in this case. </div> <div id="app"></div> <script src="../build/chart_pieseries.bundle.js"></script> </body> </html>

import React from 'react';import ReactDOM from 'react-dom';import JqxChart from '../../../jqwidgets-react/react_jqxchart.js';class App extends React.Component { render() { let source = { datatype: 'csv', datafields: [ { name: 'Browser' }, { name: 'Share' } ], url: '../sampledata/desktop_browsers_share_dec2011.txt' }; let dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert('Error loading "' + source.url + '" : ' + error); } }); let legendPosition = { left: 520, top: 140, width: 100, height: 100 }; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 0, top: 0, right: 0, bottom: 10 }; let seriesGroups = [ { type: 'pie', showLabels: true, series: [ { dataField: 'Share', displayText: 'Browser', labelRadius: 120, initialAngle: 15, radius: 170, centerOffset: 0, formatSettings: { sufix: '%', decimalPlaces: 1 } } ] } ]; return ( <JqxChart style={{ width: 850, height: 500 }} title={'Desktop browsers share'} description={'(source: wikipedia.org)'} showLegend={false} enableAnimations={true} padding={padding} showBorderLine={true} titlePadding={titlePadding} source={dataAdapter} legendPosition={legendPosition} colorScheme={'scheme02'} seriesGroups={seriesGroups} /> ) } } ReactDOM.render(<App />, document.getElementById('app'));