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

ASEA2-10 created apexchart bar chart

pull/941/head
Janak Pandya 2023-05-08 12:01:38 +01:00
parent 4aa2ec08db
commit 971259e212
1 changed files with 55 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
production/apexcharts.html
View File

@ -367,6 +367,31 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6 col-sm-6 ">
<div class="x_panel">
<div class="x_title">
<h2>Bar 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="barChart">
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -561,13 +586,43 @@
} }
}; };
var barchartoptions = {
series: [{
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
}],
chart: {
type: 'bar',
height: 350
},
colors: ["#00586c", "#00c49d"],
plotOptions: {
bar: {
borderRadius: 4,
horizontal: true,
}
},
dataLabels: {
enabled: false
},
xaxis: {
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
'United States', 'China', 'Germany'
],
}
};
var linechart = new ApexCharts(document.querySelector("#lineChart"), linechartoptions); var linechart = new ApexCharts(document.querySelector("#lineChart"), linechartoptions);
var areachart = new ApexCharts(document.querySelector("#areaChart"), areachartoptions); var areachart = new ApexCharts(document.querySelector("#areaChart"), areachartoptions);
var columnchart = new ApexCharts(document.querySelector("#columnChart"), columnchartoptions); var columnchart = new ApexCharts(document.querySelector("#columnChart"), columnchartoptions);
var barchart = new ApexCharts(document.querySelector("#barChart"), barchartoptions);
linechart.render(); linechart.render();
areachart.render(); areachart.render();
columnchart.render(); columnchart.render();
barchart.render();
</script> </script>