<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-body {
background-color: #FBFCFE;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'radar',
backgroundColor: '#FBFCFE',
plot: {
activeArea: true,
aspect: 'area',
backgroundColor: '#FBFCFE',
},
plotarea: {
margin: 'dynamic',
},
scaleK: {
values: '0:330:30',
/* To set the chart shape to circular. */
aspect: 'circle',
format: '%v°',
guide: {
lineColor: '#1E5D9E',
lineStyle: 'solid',
},
item: {
padding: '5px',
fontColor: '#1E5D9E',
fontFamily: 'Montserrat',
},
},
scaleV: {
values: '0:100:25',
guide: {
lineColor: '#D7D8D9',
lineStyle: 'solid',
},
labels: ['', '', '', '', ''],
refLine: {
lineColor: 'none',
},
},
series: [{
values: [59, 30, 65, 34, 40, 33, 31, 90, 81, 70, 100, 28],
backgroundColor: '#00BAF2',
lineColor: '#00BAF2',
marker: {
backgroundColor: '#00BAF2',
lineColor: '#00BAF2',
},
},
{
values: [30, 100, 90, 99, 59, 34, 5, 3, 12, 15, 16, 75, 34],
backgroundColor: '#E80C60',
lineColor: '#E80C60',
marker: {
backgroundColor: '#E80C60',
lineColor: '#E80C60',
},
},
{
values: [34, 20, 30, 40, 0, 0, 0, 0, 0, 0, 30, 100],
backgroundColor: '#9B26AF',
lineColor: '#9B26AF',
marker: {
backgroundColor: '#9B26AF',
lineColor: '#9B26AF',
},
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
type: 'radar',
backgroundColor: '#FBFCFE',
plot: {
activeArea: true,
aspect: 'area',
backgroundColor: '#FBFCFE',
},
plotarea: {
margin: 'dynamic',
},
scaleK: {
values: '0:330:30',
/* To set the chart shape to circular. */
aspect: 'circle',
format: '%v°',
guide: {
lineColor: '#1E5D9E',
lineStyle: 'solid',
},
item: {
padding: '5px',
fontColor: '#1E5D9E',
fontFamily: 'Montserrat',
},
},
scaleV: {
values: '0:100:25',
guide: {
lineColor: '#D7D8D9',
lineStyle: 'solid',
},
labels: ['', '', '', '', ''],
refLine: {
lineColor: 'none',
},
},
series: [
{
values: [59, 30, 65, 34, 40, 33, 31, 90, 81, 70, 100, 28],
backgroundColor: '#00BAF2',
lineColor: '#00BAF2',
marker: {
backgroundColor: '#00BAF2',
lineColor: '#00BAF2',
},
},
{
values: [30, 100, 90, 99, 59, 34, 5, 3, 12, 15, 16, 75, 34],
backgroundColor: '#E80C60',
lineColor: '#E80C60',
marker: {
backgroundColor: '#E80C60',
lineColor: '#E80C60',
},
},
{
values: [34, 20, 30, 40, 0, 0, 0, 0, 0, 0, 30, 100],
backgroundColor: '#9B26AF',
lineColor: '#9B26AF',
marker: {
backgroundColor: '#9B26AF',
lineColor: '#9B26AF',
},
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
