<div id="chart"></div>
#chart {
max-width: 650px;
margin: 1rem;
}
body {
background: #262626;
}
let options = {
chart: {
height: 380,
type: "line",
foreColor: '#6D6D6D'
},
series: [
{
name: "Temperature",
data: [15, 20, 25, 29, 33, 36, 37, 32, 27, 23]
}
],
fill: {
type: "gradient",
gradient: {
type: 'vertical',
shadeIntensity: 1,
opacityFrom: 1,
opacityTo: 1,
colorStops: [
{
offset: 10,
color: "#fc440b",
opacity: 1
},
{
offset: 55,
color: "#ffce63",
opacity: 1
},
{
offset: 90,
color: "#0a95f9",
opacity: 1
}
]
}
},
grid: {
borderColor: '#6D6D6D'
},
stroke: {
curve: 'smooth'
},
yaxis: {
min: 0,
max: 45
},
xaxis: {
type: 'category',
tickAmount: 8,
categories: [
['4 AM'],
['6 AM'],
['8 AM'],
['10 AM'],
['12 PM'],
['2 PM'],
['4 PM'],
['6 PM'],
['8 PM'],
['10 PM']
],
labels: {
show: true
}
}
};
let chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
This Pen doesn't use any external CSS resources.