If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React from 'react';
import PieChart, {
Legend,
Series,
Tooltip,
Format,
Label,
Connector,
Export,
} from 'devextreme-react/pie-chart';
import { populationByRegions } from './data.ts';
function customizeTooltip(arg: { valueText: string; percent: number; }) {
return {
text: `${arg.valueText} - ${(arg.percent * 100).toFixed(2)}%`,
};
}
function App() {
return (
<PieChart
id="pie"
type="doughnut"
title="The Population of Continents and Regions"
palette="Soft Pastel"
dataSource={populationByRegions}
>
<Series argumentField="region">
<Label visible={true} format="millions">
<Connector visible={true} />
</Label>
</Series>
<Export enabled={true} />
<Legend margin={0} horizontalAlignment="right" verticalAlignment="top" />
<Tooltip enabled={true} customizeTooltip={customizeTooltip}>
<Format type="millions" />
</Tooltip>
</PieChart>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import PieChart, {
Legend,
Series,
Tooltip,
Format,
Label,
Connector,
Export,
} from 'devextreme-react/pie-chart';
import { populationByRegions } from './data.js';
function customizeTooltip(arg) {
return {
text: `${arg.valueText} - ${(arg.percent * 100).toFixed(2)}%`,
};
}
function App() {
return (
<PieChart
id="pie"
type="doughnut"
title="The Population of Continents and Regions"
palette="Soft Pastel"
dataSource={populationByRegions}
>
<Series argumentField="region">
<Label
visible={true}
format="millions"
>
<Connector visible={true} />
</Label>
</Series>
<Export enabled={true} />
<Legend
margin={0}
horizontalAlignment="right"
verticalAlignment="top"
/>
<Tooltip
enabled={true}
customizeTooltip={customizeTooltip}
>
<Format type="millions" />
</Tooltip>
</PieChart>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
export const populationByRegions = [{
region: 'Asia',
val: 4119626293,
}, {
region: 'Africa',
val: 1012956064,
}, {
region: 'Northern America',
val: 344124520,
}, {
region: 'Latin America and the Caribbean',
val: 590946440,
}, {
region: 'Europe',
val: 727082222,
}, {
region: 'Oceania',
val: 35104756,
}];
xxxxxxxxxx
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// 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',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
export const populationByRegions = [
{
region: 'Asia',
val: 4119626293,
},
{
region: 'Africa',
val: 1012956064,
},
{
region: 'Northern America',
val: 344124520,
},
{
region: 'Latin America and the Caribbean',
val: 590946440,
},
{
region: 'Europe',
val: 727082222,
},
{
region: 'Oceania',
val: 35104756,
},
];
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
#pie {
height: 440px;
}
Bind to Data
You can bind the component to one of the following data sources:
In this demo, the PieChart is populated with data taken from a local JavaScript array.
Configure Series
A series defines the look of your chart. The PieChart component includes the Pie and Doughnut series types. To use the Doughnut type, set the type property to "doughnut".
You need to bind the series to data. Set the argumentField and valueField properties to data fields that contain arguments and values for your series. You can specify these properties in an object in the series array or include it in the commonSeriesSettings object. In the latter case, your setting applies to all chart series.
Series points can have labels that display point values. Use the label object to configure them. Enable the label.visible property to show the labels. If you want to format values that labels display, specify the label.format property. You can also connect labels with their series points. To do this, enable the label.connector.visible property. As with the argumentField and valueField properties, you can specify label settings for an individual series (in the series array) or for all series (in the commonSeriesSettings object).
Enable Tooltips
When you hover the mouse pointer over a series point or its label, you can see a tooltip with information about the series point.
To configure a tooltip, you need to specify its properties in the tooltip object. For example, to enable tooltips, assign true to the enabled property of this object.
A tooltip displays information stored in the point value. If you want to customize a specific tooltip, assign a function to the tooltip.customizeTooltip property.
You can also specify the format of the tooltip values to be displayed. To do this, assign the format you need to the tooltip.format property.
Export Chart to Image
To allow a user to print the chart or export it to a PNG, JPEG, or SVG file, set the export.enabled property to true. This setting adds a button that opens a drop-down menu with export and print commands. In this demo, you can find this button in the upper-right corner.