Setting up the chart
All I did was make the hexadecimal colors and the chart list dynamic
Last updated
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
var options = {
grid: {
borderColor: "#E5E7EB",
strokeDashArray: 7,
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
}
},
colors: ["#50CD89"],
series: [
{
name: "Sales",
data: [
{ x: "04/01/2023 01:00 pm", y: "18000" },
{ x: "04/02/2023 01:00 pm", y: "18000" },
{ x: "04/03/2023 01:00 pm", y: "20000" },
{ x: "04/04/2023 01:00 pm", y: "20000" },
{ x: "04/05/2023 01:00 pm", y: "18000" },
{ x: "04/06/2023 01:00 pm", y: "18000" },
{ x: "04/07/2023 01:00 pm", y: "22000" },
{ x: "04/08/2023 01:00 pm", y: "22000" },
{ x: "04/09/2023 01:00 pm", y: "20000" },
{ x: "04/10/2023 01:00 pm", y: "20000" },
{ x: "04/11/2023 01:00 pm", y: "18000" },
{ x: "04/12/2023 01:00 pm", y: "18000" },
{ x: "04/13/2023 01:00 pm", y: "20000" },
{ x: "04/14/2023 01:00 pm", y: "20000" },
{ x: "04/15/2023 01:00 pm", y: "18000" },
{ x: "04/16/2023 01:00 pm", y: "18000" },
{ x: "04/17/2023 01:00 pm", y: "20000" },
{ x: "04/18/2023 01:00 pm", y: "20000" },
{ x: "04/19/2023 01:00 pm", y: "22000" }
]
}
],
chart: {
toolbar: {
show: false
},
type: "area",
stacked: false,
height: 260,
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
markers: {
size: 0
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100]
}
},
yaxis: {
labels: {
style: {
colors: "#9CA3AF"
},
offsetX: 0,
formatter: function (val) {
return "$" + val;
}
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
xaxis: {
type: "datetime",
labels: {
rotate: -15,
rotateAlways: true,
style: {
colors: "#9CA3AF"
}
}
},
tooltip: {
shared: true
},
legend: {
position: "top",
horizontalAlign: "right",
offsetX: -10
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
};
</script>
</head>
<body>
<div id="chart" style="width: 95%;"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</body>
</html>
{x: '', y: ''}