38 lines
1.1 KiB
JSON
Executable File
38 lines
1.1 KiB
JSON
Executable File
<!-- required files -->
|
|
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
|
|
|
|
<div id="apex-line-chart"></div>
|
|
|
|
<script>
|
|
var options = {
|
|
chart: { height: 350, type: 'line', toolbar: { show: false } },
|
|
title: { text: 'Average High & Low Temperature', align: 'center' },
|
|
colors: [app.color.blue, app.color.success],
|
|
dataLabels: { enabled: true, background: { borderWidth: 0 } },
|
|
stroke: { curve: 'smooth', width: 3 },
|
|
series: [
|
|
{ name: 'High - 2024', data: [28, 29, 33, 36, 32, 32, 33] },
|
|
{ name: 'Low - 2024', data: [12, 11, 14, 18, 17, 13, 13] }
|
|
],
|
|
grid: { row: { colors: ['rgba('+ app.color.componentColorRgb + ', .1)', 'transparent'], opacity: 0.5 } },
|
|
markers: { size: 4 },
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
|
},
|
|
yaxis: { min: 5, max: 40 },
|
|
legend: {
|
|
show: true,
|
|
position: 'top',
|
|
offsetY: -10,
|
|
horizontalAlign: 'right',
|
|
floating: true,
|
|
}
|
|
};
|
|
|
|
var chart = new ApexCharts(
|
|
document.querySelector('#apex-line-chart'),
|
|
options
|
|
);
|
|
|
|
chart.render();
|
|
</script> |