React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

<!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 of React Chart partial pie series. You can see how to enable labels on the lines of the pie chart and how to set the angles of the labels. You can also see how to enable toggle of the pie chart series.
    </title>
    <meta name="description" content="This React Chart demo showcases how to create a partial 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 of React Chart partial pie series. You can see how to enable labels on the lines of the pie chart and how to set the angles of the labels. You can also see how to enable toggle of the pie chart series.
    </div>
    <div id="app"></div>
    <script src="../build/chart_partialpieseries.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 dataStatCounter =
            [
                { Browser: 'Chrome', Share: 45.6 },
                { Browser: 'IE', Share: 24.6 },
                { Browser: 'Firefox', Share: 20.4 },
                { Browser: 'Safari', Share: 5.1 },
                { Browser: 'Opera', Share: 1.3 },
                { Browser: 'Other', Share: 3.0 }
            ];
        let dataW3CCounter =
            [
                { Browser: 'Chrome', Share: 34.1 },
                { Browser: 'IE', Share: 20.3 },
                { Browser: 'Firefox', Share: 18.3 },
                { Browser: 'Safari', Share: 17.8 },
                { Browser: 'Opera', Share: 2.7 },
                { Browser: 'Other', Share: 6.8 }
            ];
        let dataWikimedia =
            [
                { Browser: 'Chrome', Share: 42.7 },
                { Browser: 'IE', Share: 18.0 },
                { Browser: 'Firefox', Share: 15.3 },
                { Browser: 'Safari', Share: 6.1 },
                { Browser: 'Opera', Share: 2.4 },
                { Browser: 'Other', Share: 15.6 }
            ];
        let dataNetApplications =
            [
                { Browser: 'Chrome', Share: 16.4 },
                { Browser: 'IE', Share: 55.2 },
                { Browser: 'Firefox', Share: 18.0 },
                { Browser: 'Safari', Share: 5.8 },
                { Browser: 'Opera', Share: 1.3 },
                { Browser: 'Other', Share: 3.4 }
            ];
        let charts = [
            { title: 'Stat counter', label: 'Stat', dataSource: dataStatCounter },
            { title: 'W3C counter', label: 'W3C', dataSource: dataW3CCounter },
            { title: 'Wikimedia', label: 'Wikimedia', dataSource: dataWikimedia },
            { title: 'Net Applications', label: 'NetApp', dataSource: dataNetApplications }
        ];

        let padding = { left: 5, top: 5, right: 5, bottom: 5 };

        let titlePadding = { left: 0, top: 0, right: 0, bottom: 10 };

        let seriesGroups =
            [
                {
                    type: 'pie',
                    showLegend: true,
                    enableSeriesToggle: true,
                    series:
                    [
                        {
                            dataField: 'Share',
                            displayText: 'Browser',
                            showLabels: true,
                            labelRadius: 160,
                            labelLinesEnabled: true,
                            labelLinesAngles: true,
                            labelsAutoRotate: false,
                            initialAngle: 0,
                            radius: 125,
                            minAngle: 0,
                            maxAngle: 180,
                            centerOffset: 0,
                            offsetY: 170,
                            formatFunction: (value, itemIdx, serieIndex, groupIndex) => {
                                if (isNaN(value))
                                    return value;
                                return value + '%';
                            }
                        }
                    ]
                }
            ];
        return (
            <div>
                <JqxChart style={{ width: 400, height: 250, float: 'left' }}
                    title={''} description={charts[0].title} source={charts[0].dataSource}
                    showLegend={true} enableAnimations={false} padding={padding}
                    titlePadding={titlePadding} showBorderLine={true}
                    colorScheme={'scheme03'} seriesGroups={seriesGroups}
                />

                <JqxChart style={{ width: 400, height: 250, float: 'left' }}
                    title={''} description={charts[1].title} source={charts[1].dataSource}
                    showLegend={true} enableAnimations={false} padding={padding}
                    titlePadding={titlePadding} showBorderLine={true}
                    colorScheme={'scheme03'} seriesGroups={seriesGroups}
                />

                <JqxChart style={{ width: 400, height: 250, float: 'left' }}
                    title={''} description={charts[2].title} source={charts[2].dataSource}
                    showLegend={true} enableAnimations={false} padding={padding}
                    titlePadding={titlePadding} showBorderLine={true}
                    colorScheme={'scheme03'} seriesGroups={seriesGroups}
                />

                <JqxChart style={{ width: 400, height: 250, float: 'left' }}
                    title={''} description={charts[3].title} source={charts[3].dataSource}
                    showLegend={true} enableAnimations={false} padding={padding}
                    titlePadding={titlePadding} showBorderLine={true}
                    colorScheme={'scheme03'} seriesGroups={seriesGroups}
                />
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));