// =========================== Default Line Chart Start ===============================
var options = {
series: [{
name: "This month",
data: [0, 48, 20, 24, 6, 33, 30, 48, 35, 18, 20, 5]
}],
chart: {
height: 264,
type: 'line',
toolbar: {
show: false
},
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
colors: ['#487FFF'],
width: 4
},
markers: {
size: 0,
strokeWidth: 3,
hover: {
size: 8
}
},
tooltip: {
enabled: true,
x: {
show: true,
},
y: {
show: false,
},
z: {
show: false,
}
},
grid: {
row: {
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
borderColor: '#D1D5DB',
strokeDashArray: 3,
},
yaxis: {
labels: {
formatter: function (value) {
return "$" + value + "k";
},
style: {
fontSize: "14px"
}
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tooltip: {
enabled: false
},
labels: {
formatter: function (value) {
return value;
},
style: {
fontSize: "14px"
}
},
axisBorder: {
show: false
},
// crosshairs: {
// show: true,
// width: 20,
// stroke: {
// width: 0
// },
// fill: {
// type: 'solid',
// color: '#487FFF40',
// // gradient: {
// // colorFrom: '#D8E3F0',
// // // colorTo: '#BED1E6',
// // stops: [0, 100],
// // opacityFrom: 0.4,
// // opacityTo: 0.5,
// // },
// }
// }
}
};
var chart = new ApexCharts(document.querySelector("#defaultLineChart"), options);
chart.render();
// =========================== Default Line Chart End ===============================
// =========================== Zoom able Line Chart End ===============================
function createChartTwo(chartId, chartColor) {
var options = {
series: [
{
name: 'This Day',
data: [12, 18, 12, 48, 18, 30, 18, 15, 88, 40, 65, 24, 48],
},
],
chart: {
type: 'area',
width: '100%',
height: 264,
sparkline: {
enabled: false // Remove whitespace
},
toolbar: {
show: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight',
width: 4,
colors: [chartColor],
lineCap: 'round'
},
grid: {
show: true,
borderColor: '#D1D5DB',
strokeDashArray: 3,
position: 'back',
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: true
}
},
row: {
colors: undefined,
opacity: 0.5
},
column: {
colors: undefined,
opacity: 0.5
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
},
fill: {
type: 'gradient',
colors: [chartColor], // Set the starting color (top color) here
gradient: {
shade: 'light', // Gradient shading type
type: 'vertical', // Gradient direction (vertical)
shadeIntensity: 0.5, // Intensity of the gradient shading
gradientToColors: [`${chartColor}00`], // Bottom gradient color (with transparency)
inverseColors: false, // Do not invert colors
opacityFrom: .6, // Starting opacity
opacityTo: 0.3, // Ending opacity
stops: [0, 100],
},
},
// Customize the circle marker color on hover
markers: {
colors: [chartColor],
strokeWidth: 3,
size: 0,
hover: {
size: 10
}
},
xaxis: {
labels: {
show: false
},
categories: [`Jan`, `Feb`, `Mar`, `Apr`, `May`, `Jun`, `Jul`, `Aug`, `Sep`, `Oct`, `Nov`, `Dec`],
tooltip: {
enabled: false,
},
tooltip: {
enabled: false
},
labels: {
formatter: function (value) {
return value;
},
style: {
fontSize: "14px"
}
},
},
yaxis: {
labels: {
formatter: function (value) {
return "$" + value + "k";
},
style: {
fontSize: "14px"
}
},
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector(`#${chartId}`), options);
chart.render();
}
createChartTwo('zoomAbleLineChart', '#487fff');
// =========================== Zoom able Line Chart End ===============================
// =========================== Line Chart With Data labels Start ===============================
var options = {
series: [{
name: "Desktops",
data: [5, 25, 35, 15, 21, 15, 35, 35, 51]
}],
chart: {
height: 264,
type: 'line',
colors: '#000',
zoom: {
enabled: false
},
toolbar: {
show: false
},
},
colors: ['#487FFF'], // Set the color of the series
dataLabels: {
enabled: true
},
stroke: {
curve: 'straight',
width: 4,
color: "#000"
},
markers: {
size: 0,
strokeWidth: 3,
hover: {
size: 8
}
},
grid: {
show: true,
borderColor: '#D1D5DB',
strokeDashArray: 3,
row: {
colors: ['#f3f3f3', 'transparent'],
opacity: 0,
},
},
// Customize the circle marker color on hover
markers: {
colors: '#487FFF',
strokeWidth: 3,
size: 0,
hover: {
size: 10
}
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
lines: {
show: false
}
},
yaxis: {
labels: {
formatter: function (value) {
return "$" + value + "k";
},
style: {
fontSize: "14px"
}
},
},
};
var chart = new ApexCharts(document.querySelector("#lineDataLabel"), options);
chart.render();
// =========================== Line Chart With Data labels End ===============================
// =========================== Double Line Chart Start ===============================
function createLineChart(chartId, chartColor) {
var options = {
series: [
{
name: 'This Day',
data: [8, 15, 9, 20, 10, 33, 13, 22, 8, 17, 10, 15],
},
{
name: 'Example',
data: [8, 24, 18, 40, 18, 48, 22, 38, 18, 30, 20, 28],
},
],
chart: {
type: 'line',
width: '100%',
height: 264,
sparkline: {
enabled: false // Remove whitespace
},
toolbar: {
show: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
colors: ['#487FFF', '#FF9F29'], // Set the color of the series
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 4,
colors: ["#FF9F29", chartColor],
lineCap: 'round',
},
grid: {
show: true,
borderColor: '#D1D5DB',
strokeDashArray: 3,
position: 'back',
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: true
}
},
row: {
colors: undefined,
opacity: 0.5
},
column: {
colors: undefined,
opacity: 0.5
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
},
// Customize the circle marker color on hover
markers: {
colors: ["#FF9F29", chartColor],
strokeWidth: 3,
size: 0,
hover: {
size: 10
}
},
xaxis: {
labels: {
show: false
},
categories: [`Jan`, `Feb`, `Mar`, `Apr`, `May`, `Jun`, `Jul`, `Aug`, `Sep`, `Oct`, `Nov`, `Dec`],
tooltip: {
enabled: false,
},
labels: {
formatter: function (value) {
return value;
},
style: {
fontSize: "14px"
}
},
},
yaxis: {
labels: {
formatter: function (value) {
return "$" + value + "k";
},
style: {
fontSize: "14px"
}
},
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
legend: {
show: false
}
};
var chart = new ApexCharts(document.querySelector(`#${chartId}`), options);
chart.render();
}
createLineChart('doubleLineChart', '#487fff');
// =========================== Double Line Chart End ===============================
// =========================== Step Line Chart Start ===============================
var options = {
series: [{
data: [16, 25, 38, 50, 32, 20, 42, 18, 4, 25, 12, 12],
name: "Example",
}],
chart: {
type: 'line',
height: 270,
toolbar: {
show: false
},
},
stroke: {
curve: 'stepline',
},
colors: ['#487FFF'], // Set the color of the series
dataLabels: {
enabled: false
},
markers: {
hover: {
sizeOffset: 4
}
},
grid: {
show: true,
borderColor: '#D1D5DB',
strokeDashArray: 3,
position: 'back',
},
xaxis: {
labels: {
show: false
},
categories: [`Jan`, `Feb`, `Mar`, `Apr`, `May`, `Jun`, `Jul`, `Aug`, `Sep`, `Oct`, `Nov`, `Dec`],
tooltip: {
enabled: false,
},
labels: {
formatter: function (value) {
return value;
},
style: {
fontSize: "14px"
}
},
},
yaxis: {
labels: {
formatter: function (value) {
return "$" + value + "k";
},
style: {
fontSize: "14px"
}
},
},
};
var chart = new ApexCharts(document.querySelector("#stepLineChart"), options);
chart.render();
// =========================== Step Line Chart End ===============================
// =========================== Gradient Line Chart Start ===============================
var options = {
series: [{
name: "This month",
data: [12, 6, 22, 18, 38, 16, 40, 8, 35, 18, 35, 22, 50]
}],
chart: {
height: 264,
type: 'line',
toolbar: {
show: false
},
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
colors: ['#FF9F29'], // Specify the line color here
width: 4
},
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
gradientToColors: [ '#0E53F4'],
shadeIntensity: 1,
type: 'horizontal',
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100, 100, 100]
},
},
markers: {
size: 0,
strokeWidth: 3,
hover: {
size: 8
}
},
tooltip: {
enabled: true,
x: {
show: true,
},
y: {
show: false,
},
z: {
show: false,
}
},
grid: {
row: {
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
borderColor: '#D1D5DB',
strokeDashArray: 3,
},
yaxis: {
labels: {
formatter: function (value) {
return "$" + value + "k";
},
style: {
fontSize: "14px"
}
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tooltip: {
enabled: false
},
labels: {
formatter: function (value) {
return value;
},
style: {
fontSize: "14px"
}
},
axisBorder: {
show: false
},
}
};
var chart = new ApexCharts(document.querySelector("#gradientLineChart"), options);
chart.render();
// =========================== Gradient Line Chart End ===============================