var options__candidate = {
series: [
{
name: "candidate",
data: [100, 200, 300, 400, 300, 500, 400],
},
],
chart: {
height: 400,
width: "100%",
type: "area",
id: 'weekly',
toolbar: {
show: false,
},
animations: {
enabled: true,
easing: 'easeinout',
speed: 800,
animateGradually: {
enabled: true,
delay: 150
},
dynamicAnimation: {
enabled: true,
speed: 350
}
},
colors: [],
fontFamily: '"Plus Jakarta Sans", sans-serif',
},
grid: {
show: true,
borderColor: "#7D8087",
strokeDashArray: 3,
position: "back",
yaxis: {
lines: {
show: true,
},
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
},
xaxis: {
type: "day",
categories: [
"Sat",
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
],
labels:{
show: true,
offsetY: 2,
style:{
fontSize: '14px',
fontWeight: 500,
cssClass: 'apexcharts-xaxis-label',
},
},
},
yaxis: {
labels:{
show: true,
style:{
fontSize: '14px',
fontWeight: 500,
cssClass: 'apexcharts-xaxis-label',
},
}
},
tooltip: {
enabled: true,
x: {
format: "dd/MM/yy",
},
},
fill: {
type: "gradient",
gradient: {
opacityFrom: 1,
opacityTo: 0,
stops: [0, 46, 100],
type: "vertical",
colorStops:[
{
offset: 0,
color: "#FEF2EB",
opacity: 1
},
{
offset: 50,
color: "#F1F1F1",
opacity: 0.5
},
{
offset: 100,
color: "#E4E0EA",
opacity: 0.9
}
],
},
},
responsive: [
{
breakpoint: 1800,
options: {
chart: {
height: "550",
width: "100%",
},
},
},
{
breakpoint: 1400,
options: {
chart: {
height: "400",
width: "100%",
},
},
},
],
};
var chart = new ApexCharts(
document.querySelector("#spline__chart__candidate"), options__candidate);
chart.render();