Your search did not match any results.
Charts

Doughnut

Documentation
This demo illustrates the PieChart widget with the doughnut series type, which is often used when comparing the percentage values of different point arguments within a series.
Copy to Codepen
Apply
Reset
window.onload = function() { var viewModel = { chartOptions: { type: "doughnut", palette: "Soft Pastel", dataSource: dataSource, title: "The Population of Continents and Regions", tooltip: { enabled: true, format: "millions", customizeTooltip: function (arg) { var percentText = Globalize.formatNumber(arg.percent, { style: "percent", minimumFractionDigits: 2, maximumFractionDigits: 2 }); return { text: arg.valueText + " - " + percentText }; } }, legend: { horizontalAlignment: "right", verticalAlignment: "top", margin: 0 }, "export": { enabled: true }, series: [{ argumentField: "region", label: { visible: true, format: "millions", connector: { visible: true } } }] } }; ko.applyBindings(viewModel, document.getElementById("chart-demo")); };
<!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="js/jquery-3.1.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.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="chart-demo"> <div id="pie" data-bind="dxPieChart: chartOptions"></div> </div> </div> </body> </html>
#pie { height: 440px; }
var 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 }];