Pie

Documentation

This example demonstrates the PieChart component that visualizes data as a circle divided into points (slices) to illustrate data proportions.

To get started with the DevExtreme PieChart component, refer to the following tutorial for step-by-step instructions: Getting Started with PieChart.

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.

Prev Demo

Next Demo

www.wikipedia.org

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

$(() => { $('#pie').dxPieChart({ size: { width: 500, }, palette: 'bright', dataSource, series: [ { argumentField: 'country', valueField: 'area', label: { visible: true, connector: { visible: true, width: 1, }, }, }, ], title: 'Area of Countries', export: { enabled: true, }, onPointClick(e) { const point = e.target; toggleVisibility(point); }, onLegendClick(e) { const arg = e.target; toggleVisibility(this.getAllSeries()[0].getPointsByArg(arg)[0]); }, }); function toggleVisibility(item) { if (item.isVisible()) { item.hide(); } else { item.show(); } } });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/23.1.6/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="pie"></div> </div> </body> </html>

#pie { height: 440px; } #pie * { margin: 0 auto; }

const dataSource = [{ 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, }];