37 lines
1.2 KiB
JSON
Executable File
37 lines
1.2 KiB
JSON
Executable File
<!-- required files -->
|
|
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
|
|
|
|
<div id="apex-radar-chart"></div>
|
|
|
|
<script>
|
|
var chart = new ApexCharts(
|
|
document.querySelector('#apex-radar-chart'), {
|
|
chart: { height: 320, type: 'radar' },
|
|
series: [{ name: 'Series 1', data: [20, 100, 40, 30, 50, 80, 33] }],
|
|
labels: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
|
plotOptions: {
|
|
radar: {
|
|
size: 140,
|
|
strokeColor: 'rgba('+ app.color.componentColorRgb + ', .25)',
|
|
fill: {
|
|
colors: ['rgba('+ app.color.componentColorRgb + ', .05)', 'rgba('+ app.color.componentColorRgb + ', .15)']
|
|
}
|
|
}
|
|
},
|
|
title: { text: 'Radar with Polygon Fill' },
|
|
colors: [app.color.blue],
|
|
markers: { size: 4, colors: [app.color.componentBg], strokeColor: app.color.blue, strokeWidth: 2 },
|
|
tooltip: { y: { formatter: function(val) { return val } } },
|
|
yaxis: {
|
|
tickAmount: 7,
|
|
labels: {
|
|
formatter: function(val, i) {
|
|
return (i % 2 === 0) ? val : '';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
chart.render();
|
|
</script> |