React Charts - Doughnut

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.

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!

TS JS

Backend API

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;

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;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

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, }];

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

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, }, ];

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/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.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

#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.