Insert it in <head>
<!-- Choose one for Light Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/light/all.min.css" />
<!-- Choose one for Dark Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/dark/all.min.css" />
<script type="text/javascript" src="https://i-as.dev/devui/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://i-as.dev/devui/js/devui-all.min.js"></script>
Use Components
<body class="theme-light">
<div id="chart"></div>
<script type="text/javascript">
$(function () {
$("#chart").devuiChart({
theme: "light",
exportOptions: {
image: false,
print: false
},
seriesSettings: {
polarbar: {
stackMode: "percent"
}
},
axisX: {
categoricalValues: ["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012"]
},
primaryHeader: {
text: "NATURAL DIAMOND: WORLD PRODUCTION"
},
chartLegend: {
align: "center",
verticalAlign: "top"
},
dataSeries: [{
seriesType: "polarbar",
collectionAlias: "Australia",
data: [30000, 29000, 27000, 25000, 22000, 21915,18960,15397,10700,9900, 8345, 7689]
}, {
seriesType: "polarbar",
collectionAlias: "Botswana",
data: [10000, 9000, 8000, 8000, 8000, 8000, 8000, 8000, 7800, 7700, 7500, 7400]
}, {
seriesType: "polarbar",
collectionAlias: "Russia",
data: [35000, 34000, 33000, 30000, 27000, 23100, 22800, 21700, 20800, 20100, 19800, 17700]
}]
});
});
</script>
</body>v