Your search did not match any results.
Charts

Doughnut Selection

API Reference
This demo illustrates use of the Doughnut series chart type and selection of individual ‘slices’ within the chart.
Copy to Codepen
Apply
Reset
$(function(){ $("#pie").dxPieChart({ type: "doughnut", dataSource: dataSource, palette: "Soft Pastel", title: "Olympic Medals in 2008", legend: { horizontalAlignment: "right", verticalAlignment: "top", margin: 0 }, onPointClick: function(arg) { arg.target.select(); }, "export": { enabled: true }, series: [{ argumentField: "country", valueField: "medals", hoverStyle: { color: "#ffd700" } }] }); });
<!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> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/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; width: 100%; }
var dataSource = [{ country: "USA", medals: 110 }, { country: "China", medals: 100 }, { country: "Russia", medals: 72 }, { country: "Britain", medals: 47 }, { country: "Australia", medals: 46 }, { country: "Germany", medals: 41 }, { country: "France", medals: 40 }, { country: "South Korea", medals: 31 }];