$(function(){
$("#pie").dxPieChart({
palette: "ocean",
dataSource: 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: function() {
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/20.2.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.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;
}
#pie * {
margin: 0 auto;
}
var dataSource = [
{
Country: "Brazil",
Export: 243,
Import: 233
}, {
Country: "Russia",
Export: 529,
Import: 335
}, {
Country: "India",
Export: 293,
Import: 489
}, {
Country: "China",
Export: 2049,
Import: 1818
}, {
Country: "Japan",
Export: 799,
Import: 886
}, {
Country: "USA",
Export: 1547,
Import: 2335
}, {
Country: "Canada",
Export: 455,
Import: 475
}, {
Country: "France",
Export: 569,
Import: 674
}, {
Country: "England",
Export: 468,
Import: 680
}, {
Country: "Germany",
Export: 1407,
Import: 1167
}
];