DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Doughnut with Multiple Series

Documentation

This demo illustrates the ability of the PieChart to display multiple series on a single chart. Different series are displayed as rings inside one another.

Backend API
$(() => { $('#pie').dxPieChart({ palette: 'ocean', dataSource, type: 'doughnut', title: { text: 'Imports/Exports of Goods and Services', subtitle: { text: '(billion US$, 2012)', }, }, legend: { visible: true, }, innerRadius: 0.2, commonSeriesSettings: { label: { visible: false, }, }, tooltip: { enabled: true, format: 'currency', customizeTooltip() { return { text: `${this.argumentText}<br>${this.seriesName}: ${this.valueText}B` }; }, }, export: { enabled: true, }, series: [{ name: 'Export', argumentField: 'Country', valueField: 'Export', }, { name: 'Import', argumentField: 'Country', valueField: 'Import', }], }); });
<!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.2.5/css/dx.light.css" /> <script src="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: 'Brazil', Export: 241, Import: 225, }, { Country: 'Russia', Export: 536, Import: 284, }, { Country: 'India', Export: 317, Import: 453, }, { Country: 'China', Export: 1702, Import: 1717, }, { Country: 'Japan', Export: 699, Import: 800, }, { Country: 'USA', Export: 1448, Import: 2795, }, { Country: 'Canada', Export: 522, Import: 440, }, { Country: 'France', Export: 626, Import: 717, }, { Country: 'England', Export: 424, Import: 568, }, { Country: 'Germany', Export: 1403, Import: 1000, }];