Free Trial Buy
    Your search did not match any results.
    Pie Charts

    Pies with Equal Sizes

    Documentation

    When several PieChart components are displayed side by side, their pies may differ in size. To eliminate these differences, you can collect all PieCharts in a single size group by setting their sizeGroup property to identical values.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Copy to CodeSandBox
    Apply
    Reset
    import React from 'react'; import PieChart, { Series, Label, Legend } from 'devextreme-react/pie-chart'; import { countries, waterLandRatio } from './data.js'; const pieCharts = [{ title: 'Area of Countries', palette: 'Soft', dataSource: countries }, { title: 'Water/Land Ratio', palette: 'Soft Pastel', dataSource: waterLandRatio }]; function App() { const pies = pieCharts.map((options, i) => ( <PieChart className="pie" key={i} title={options.title} palette={options.palette} sizeGroup="piesGroup" dataSource={options.dataSource} > <Series argumentField="name" valueField="area"> <Label visible={true} format="percent" /> </Series> <Legend verticalAlignment="bottom" horizontalAlignment="center" itemTextPosition="right" rowCount={2} /> </PieChart> )); return ( <div className="pies-container"> {pies} </div> ); } export default App;
    import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
    <!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
    .pies-container { margin: auto; width: 800px; } .pies-container > .pie { width: 400px; float: left; }
    export const waterLandRatio = [{ name: 'Land', area: 0.29 }, { name: 'Water', area: 0.71 }]; export const countries = [{ name: 'Russia', area: 0.12 }, { name: 'Canada', area: 0.07 }, { name: 'USA', area: 0.07 }, { name: 'China', area: 0.07 }, { name: 'Brazil', area: 0.06 }, { name: 'Australia', area: 0.05 }, { name: 'India', area: 0.02 }, { name: 'Others', area: 0.55 }];
    System.config({ transpiler: 'plugin-babel', meta: { 'devextreme/localization.js': { "esModule": true }, }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16.14.0/umd/react.development.js', 'react-dom': 'npm:react-dom@16.14.0/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.26.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.6', 'devextreme-react': 'npm:devextreme-react@20.2.6', 'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.10.3/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.18/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.24/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.13/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.13/hooks/dist/hooks.js', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });