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",
axisX: {
categoricalValues: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
axisY: {
max: 2000000
},
primaryHeader: {
text: "Site usage statistics"
},
chartLegend: {
align: "center",
verticalAlign: "top"
},
dataSeries: [{
seriesType: "polarbar",
collectionAlias: "Total Visits",
data: [565000, 630400, 743000, 910200, 1170200, 1383000, 1333000, 1777000, 1355000, 1002000, 1456000, 1765000]
}]
});
});
</script>
</body>