47 lines
2.0 KiB
JSON
Executable File
47 lines
2.0 KiB
JSON
Executable File
<!-- required files -->
|
|
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
|
|
|
|
<div id="apex-mixed-chart"></div>
|
|
|
|
<script>
|
|
var options = {
|
|
chart: { height: 350, type: 'line', stacked: false },
|
|
dataLabels: { enabled: false },
|
|
series: [
|
|
{ name: 'Income', type: 'column', data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6] },
|
|
{ name: 'Cashflow', type: 'column', data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5] },
|
|
{ name: 'Revenue', type: 'line', data: [20, 29, 37, 36, 44, 45, 50, 58] }
|
|
],
|
|
stroke: { width: [0, 0, 3] },
|
|
colors: [app.color.blue, app.color.success, app.color.orange],
|
|
title: { text: 'XYZ - Stock Analysis (2017 - 2024)', align: 'left', offsetX: 110 },
|
|
xaxis: { categories: [2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024] },
|
|
yaxis: [{
|
|
axisTicks: { show: true, color: 'rgba('+ app.color.componentColorRgb + ', .15)' },
|
|
axisBorder: { show: true, color: 'rgba('+ app.color.componentColorRgb + ', .15)' },
|
|
title: { text: "Income (thousand crores)", style: { color: app.color.componentColor } },
|
|
tooltip: { enabled: true }
|
|
},{
|
|
seriesName: 'Income',
|
|
opposite: true,
|
|
axisTicks: { show: true, color: 'rgba('+ app.color.componentColorRgb + ', .15)' },
|
|
axisBorder: { show: true, color: 'rgba('+ app.color.componentColorRgb + ', .15)' },
|
|
title: { text: "Operating Cashflow (thousand crores)", style: { color: app.color.componentColor } },
|
|
}, {
|
|
seriesName: 'Revenue',
|
|
opposite: true,
|
|
axisTicks: { show: true },
|
|
axisBorder: { show: true, color: app.color.orange },
|
|
title: { text: "Revenue (thousand crores)", style: { color: app.color.orange } }
|
|
}],
|
|
tooltip: { fixed: { enabled: true, position: 'topLeft', offsetY: 30, offsetX: 60 } },
|
|
legend: { horizontalAlign: 'left', offsetX: 40 }
|
|
};
|
|
|
|
var chart = new ApexCharts(
|
|
document.querySelector('#apex-mixed-chart'),
|
|
options
|
|
);
|
|
|
|
chart.render();
|
|
</script> |