Doughnut

Documentation

The doughnut chart is a variation of the pie chart. It displays data as a circle divided into portions (slices) with a space in the center. To create a doughnut chart, use the DevExtreme PieChart component. In this demo, you can see how to initialize and configure it.

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.

See more Hide details

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.

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC

Backend API

Copy to CodePen

Apply

Reset

$(() => { $('#pie').dxPieChart({ type: 'doughnut', palette: 'Soft Pastel', dataSource, title: 'The Population of Continents and Regions', tooltip: { enabled: true, format: 'millions', customizeTooltip(arg) { return { text: `${arg.valueText} - ${(arg.percent * 100).toFixed(2)}%`, }; }, }, legend: { horizontalAlignment: 'right', verticalAlignment: 'top', margin: 0, }, export: { enabled: true, }, series: [{ argumentField: 'region', label: { visible: true, format: 'millions', connector: { visible: true, }, }, }], }); });

<!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/22.2.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/22.2.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; }

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