If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React from 'react';
import PieChart, {
Series,
Label,
Connector,
Size,
Export,
PieChartTypes,
} from 'devextreme-react/pie-chart';
import { areas } from './data.ts';
function pointClickHandler(e: PieChartTypes.PointClickEvent) {
toggleVisibility(e.target);
}
function legendClickHandler(e: PieChartTypes.LegendClickEvent) {
const arg = e.target;
const item = e.component.getAllSeries()[0].getPointsByArg(arg)[0];
toggleVisibility(item);
}
function toggleVisibility(item) {
item.isVisible() ? item.hide() : item.show();
}
function App() {
return (
<PieChart
id="pie"
dataSource={areas}
palette="Bright"
title="Area of Countries"
onPointClick={pointClickHandler}
onLegendClick={legendClickHandler}
>
<Series argumentField="country" valueField="area">
<Label visible={true}>
<Connector visible={true} width={1} />
</Label>
</Series>
<Size width={500} />
<Export enabled={true} />
</PieChart>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import PieChart, {
Series, Label, Connector, Size, Export,
} from 'devextreme-react/pie-chart';
import { areas } from './data.js';
function pointClickHandler(e) {
toggleVisibility(e.target);
}
function legendClickHandler(e) {
const arg = e.target;
const item = e.component.getAllSeries()[0].getPointsByArg(arg)[0];
toggleVisibility(item);
}
function toggleVisibility(item) {
item.isVisible() ? item.hide() : item.show();
}
function App() {
return (
<PieChart
id="pie"
dataSource={areas}
palette="Bright"
title="Area of Countries"
onPointClick={pointClickHandler}
onLegendClick={legendClickHandler}
>
<Series
argumentField="country"
valueField="area"
>
<Label visible={true}>
<Connector
visible={true}
width={1}
/>
</Label>
</Series>
<Size width={500} />
<Export enabled={true} />
</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 areas = [{
country: 'Russia',
area: 12,
}, {
country: 'Canada',
area: 7,
}, {
country: 'USA',
area: 7,
}, {
country: 'China',
area: 7,
}, {
country: 'Brazil',
area: 6,
}, {
country: 'Australia',
area: 5,
}, {
country: 'India',
area: 2,
}, {
country: 'Others',
area: 55,
}];
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 areas = [
{
country: 'Russia',
area: 12,
},
{
country: 'Canada',
area: 7,
},
{
country: 'USA',
area: 7,
},
{
country: 'China',
area: 7,
},
{
country: 'Brazil',
area: 6,
},
{
country: 'Australia',
area: 5,
},
{
country: 'India',
area: 2,
},
{
country: 'Others',
area: 55,
},
];
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;
}
#pie * {
margin: 0 auto;
}
Bind PieChart to Data
This demo uses an array as a PieChart data source. To bind the PieChart to data, pass the array to the PieChart's dataSource property.
To display data, specify the series nested options - argumentField and valueField - with the corresponding object fields (arguments and values) in the array.
Specify Title and Labels
Use the title property to specify and configure the PieChart's title.
You can accompany each series point with a label that displays the point's value or custom data. To make point labels visible, assign true
to the series.label.visible property. With this configuration, the component displays point labels detached from their respective series points. To make the connection between labels and points visible, set the label.connector.visible property to true
.
Process Point and Legend Clicks
To process point and legend clicks, use the onPointClick and onLegendClick functions. This demo uses these event handlers to toggle point visibility.
Enable PieChart Export
Assign true
to the export.enabled property to enable PieChart export.
Use our DevExpress BI Dashboard to embed interactive business intelligence into your next web app.
The Web Dashboard is a data analysis UI component that you can embed into your ASP.NET Core or Angular, React, and Vue applications with .NET backend. Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an automatically-arranged layout.
The set of components allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly on the web client (includes adaptive layouts for tablet & mobile).
The Web Dashboard is available as a part of a Universal subscription.