jinql
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella
1
0
Fork 0
Code Issues Releases Wiki Activity

ASEA2-12 created apexchart polar area chart

pull/941/head
Janak Pandya 2023-05-08 13:57:57 +01:00
parent 98463a64d8
commit 234d2acf14
1 changed files with 68 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
production/apexcharts.html
View File

@ -422,6 +422,32 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6 col-sm-6 ">
<div class="x_panel">
<div class="x_title">
<h2>Polar area chart</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Settings 1</a>
<a class="dropdown-item" href="#">Settings 2</a>
</div>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="polarareaChart">
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -664,6 +690,46 @@
}; };
polarareachartoptions = {
series: [42, 47, 52, 58, 65],
colors: ["#003c4e"],
chart: {
width: 380,
type: 'polarArea'
},
labels: ['Rose A', 'Rose B', 'Rose C', 'Rose D', 'Rose E'],
fill: {
opacity: 1
},
stroke: {
width: 1,
colors: undefined
},
yaxis: {
show: false
},
legend: {
position: 'bottom'
},
plotOptions: {
polarArea: {
rings: {
strokeWidth: 0
},
spokes: {
strokeWidth: 0
},
}
},
theme: {
monochrome: {
enabled: true,
shadeTo: 'light',
shadeIntensity: 0.6
}
}
};
@ -672,12 +738,14 @@
var columnchart = new ApexCharts(document.querySelector("#columnChart"), columnchartoptions); var columnchart = new ApexCharts(document.querySelector("#columnChart"), columnchartoptions);
var barchart = new ApexCharts(document.querySelector("#barChart"), barchartoptions); var barchart = new ApexCharts(document.querySelector("#barChart"), barchartoptions);
var piechart = new ApexCharts(document.querySelector("#pieChart"), piechartoptions); var piechart = new ApexCharts(document.querySelector("#pieChart"), piechartoptions);
var polarareachart = new ApexCharts(document.querySelector("#polarareaChart"), polarareachartoptions);
linechart.render(); linechart.render();
areachart.render(); areachart.render();
columnchart.render(); columnchart.render();
barchart.render(); barchart.render();
piechart.render(); piechart.render();
polarareachart.render();
</script> </script>