37 lines
1.3 KiB
JSON
Executable File
37 lines
1.3 KiB
JSON
Executable File
<!-- required files -->
|
|
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
|
|
|
|
<div id="apex-column-chart"></div>
|
|
|
|
<script>
|
|
var options = {
|
|
chart: { height: 350, type: 'bar' },
|
|
title: { text: 'Profit & Margin Chart', align: 'center' },
|
|
plotOptions: { bar: { horizontal: false, columnWidth: '55%', endingShape: 'rounded' } },
|
|
dataLabels: { enabled: false },
|
|
stroke: { show: true, width: 2, colors: ['transparent'] },
|
|
colors: ['rgba('+ app.color.componentColorRgb + ', .5)', app.color.indigo, 'rgba('+ app.color.componentColorRgb + ', .25)'],
|
|
series: [
|
|
{ name: 'Net Profit', data: [44, 55, 57, 56, 61, 58, 63, 60, 66] },
|
|
{ name: 'Revenue', data: [76, 85, 101, 98, 87, 105, 91, 114, 94] },
|
|
{ name: 'Free Cash Flow', data: [35, 41, 36, 26, 45, 48, 52, 53, 41] }
|
|
],
|
|
xaxis: {
|
|
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
|
},
|
|
yaxis: { title: { text: '$ (thousands)' } },
|
|
fill: { opacity: 1 },
|
|
tooltip: {
|
|
y: {
|
|
formatter: function (val) { return "$ " + val + " thousands" }
|
|
}
|
|
}
|
|
};
|
|
|
|
var chart = new ApexCharts(
|
|
document.querySelector('#apex-column-chart'),
|
|
options
|
|
);
|
|
|
|
chart.render();
|
|
</script> |