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",
primaryHeader: {
text: "Incidents Percentage"
},
exportOptions: {
image: false,
print: false
},
axisY: [{
title: {
text: "Percent Values",
style: {
color: '#4DB0F5'
}
},
axisTickText: {
style: {
color: '#4DB0F5'
}
}
}],
chartLegend: {
align: "center",
verticalAlign: "top"
},
dataSeries: [{
seriesType: 'polarline',
collectionAlias: 'Households',
data: [1.264, 0.473, 2.184, 0.667, 3.177, 0.189, 0.120, 0.183, 0.138, 0.160, 0.176, 0.178]
}, {
seriesType: 'polarline',
collectionAlias: 'Industry',
data: [0.203, 0.305, 0.512, 0.111, 0.202, 1.099, 1.110, 2.113, 1.127, 2.119, 1.123, 3.117]
}]
});
});
</script>
</body>