685 lines
18 KiB
JavaScript
685 lines
18 KiB
JavaScript
|
// ================================ Bars Up Down (Earning Statistics) chart Start ================================
|
||
|
|
var options = {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "Income",
|
||
|
|
data: [44, 42, 57, 86, 58, 55, 70, 44, 42, 57, 86, 58, 55, 70],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "Expenses",
|
||
|
|
data: [-34, -22, -37, -56, -21, -35, -60, -34, -22, -37, -56, -21, -35, -60],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
chart: {
|
||
|
|
stacked: true,
|
||
|
|
type: "bar",
|
||
|
|
height: 263,
|
||
|
|
fontFamily: "Poppins, sans-serif",
|
||
|
|
toolbar: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
colors: ["#487FFF", "#EF4A00"],
|
||
|
|
plotOptions: {
|
||
|
|
bar: {
|
||
|
|
columnWidth: "8",
|
||
|
|
borderRadius: [2],
|
||
|
|
borderRadiusWhenStacked: "all",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
width: [5, 5]
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false,
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: true,
|
||
|
|
position: "top",
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
show: false,
|
||
|
|
title: {
|
||
|
|
text: undefined,
|
||
|
|
},
|
||
|
|
labels: {
|
||
|
|
formatter: function (y)
|
||
|
|
{
|
||
|
|
return y.toFixed(0) + "";
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
show: false,
|
||
|
|
type: "week",
|
||
|
|
categories: [
|
||
|
|
"Mon",
|
||
|
|
"Tue",
|
||
|
|
"Wed",
|
||
|
|
"Thu",
|
||
|
|
"Fri",
|
||
|
|
"Sat",
|
||
|
|
"Sun",
|
||
|
|
],
|
||
|
|
axisBorder: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisTicks: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
labels: {
|
||
|
|
show: true,
|
||
|
|
style: {
|
||
|
|
colors: "#d4d7d9",
|
||
|
|
fontSize: "10px",
|
||
|
|
fontWeight: 500,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
enabled: true,
|
||
|
|
shared: true,
|
||
|
|
intersect: false,
|
||
|
|
theme: "dark",
|
||
|
|
x: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
var chart = new ApexCharts(document.querySelector("#upDownBarchart"), options);
|
||
|
|
chart.render();
|
||
|
|
// ================================ Bars Up Down (Earning Statistics) chart End ================================
|
||
|
|
|
||
|
|
// ================================ Semi Circle Gauge (Daily Conversion) chart Start ================================
|
||
|
|
var options = {
|
||
|
|
series: [75],
|
||
|
|
chart: {
|
||
|
|
height: 165,
|
||
|
|
width: 120,
|
||
|
|
type: 'radialBar',
|
||
|
|
sparkline: {
|
||
|
|
enabled: false // Remove whitespace
|
||
|
|
},
|
||
|
|
toolbar: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
padding: {
|
||
|
|
left: -32,
|
||
|
|
right: -32,
|
||
|
|
top: -32,
|
||
|
|
bottom: -32
|
||
|
|
},
|
||
|
|
margin: {
|
||
|
|
left: -32,
|
||
|
|
right: -32,
|
||
|
|
top: -32,
|
||
|
|
bottom: -32
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
radialBar: {
|
||
|
|
offsetY: -24,
|
||
|
|
offsetX: -14,
|
||
|
|
startAngle: -90,
|
||
|
|
endAngle: 90,
|
||
|
|
track: {
|
||
|
|
background: "#E3E6E9",
|
||
|
|
// strokeWidth: 32,
|
||
|
|
dropShadow: {
|
||
|
|
enabled: false,
|
||
|
|
top: 2,
|
||
|
|
left: 0,
|
||
|
|
color: '#999',
|
||
|
|
opacity: 1,
|
||
|
|
blur: 2
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
show: false,
|
||
|
|
name: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
offsetY: -2,
|
||
|
|
fontSize: '22px'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
colors: ['#9DBAFF'],
|
||
|
|
gradient: {
|
||
|
|
shade: 'dark',
|
||
|
|
type: 'horizontal',
|
||
|
|
shadeIntensity: 0.5,
|
||
|
|
gradientToColors: ['#487FFF'],
|
||
|
|
inverseColors: true,
|
||
|
|
opacityFrom: 1,
|
||
|
|
opacityTo: 1,
|
||
|
|
stops: [0, 100]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
lineCap: 'round',
|
||
|
|
},
|
||
|
|
labels: ['Percent'],
|
||
|
|
};
|
||
|
|
|
||
|
|
var chart = new ApexCharts(document.querySelector("#semiCircleGauge"), options);
|
||
|
|
chart.render();
|
||
|
|
|
||
|
|
|
||
|
|
// var options = {
|
||
|
|
// series: [76],
|
||
|
|
// chart: {
|
||
|
|
// type: 'radialBar',
|
||
|
|
// offsetY: -20,
|
||
|
|
// sparkline: {
|
||
|
|
// enabled: true
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// plotOptions: {
|
||
|
|
// radialBar: {
|
||
|
|
// startAngle: -90,
|
||
|
|
// endAngle: 90,
|
||
|
|
// track: {
|
||
|
|
// background: "#e7e7e7",
|
||
|
|
// strokeWidth: '97%',
|
||
|
|
// margin: 5, // margin is in pixels
|
||
|
|
// dropShadow: {
|
||
|
|
// enabled: true,
|
||
|
|
// top: 2,
|
||
|
|
// left: 0,
|
||
|
|
// color: '#999',
|
||
|
|
// opacity: 1,
|
||
|
|
// blur: 2
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// dataLabels: {
|
||
|
|
// name: {
|
||
|
|
// show: false
|
||
|
|
// },
|
||
|
|
// value: {
|
||
|
|
// offsetY: -2,
|
||
|
|
// fontSize: '22px'
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// grid: {
|
||
|
|
// padding: {
|
||
|
|
// top: -10
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// fill: {
|
||
|
|
// type: 'gradient',
|
||
|
|
// gradient: {
|
||
|
|
// shade: 'light',
|
||
|
|
// shadeIntensity: 0.4,
|
||
|
|
// inverseColors: false,
|
||
|
|
// opacityFrom: 1,
|
||
|
|
// opacityTo: 1,
|
||
|
|
// stops: [0, 50, 53, 91]
|
||
|
|
// },
|
||
|
|
// },
|
||
|
|
// labels: ['Average Results'],
|
||
|
|
// };
|
||
|
|
|
||
|
|
// var chart = new ApexCharts(document.querySelector("#semiCircleGauge"), options);
|
||
|
|
// chart.render();
|
||
|
|
|
||
|
|
// ================================ Semi Circle Gauge (Daily Conversion) chart End ================================
|
||
|
|
|
||
|
|
// ================================ Area chart Start ================================
|
||
|
|
function createChart(chartId, chartColor) {
|
||
|
|
|
||
|
|
let currentYear = new Date().getFullYear();
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'series1',
|
||
|
|
data: [0, 10, 8, 25, 15, 26, 13, 35, 15, 39, 16, 46, 42],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
chart: {
|
||
|
|
type: 'area',
|
||
|
|
width: 164,
|
||
|
|
height: 72,
|
||
|
|
|
||
|
|
sparkline: {
|
||
|
|
enabled: true // Remove whitespace
|
||
|
|
},
|
||
|
|
|
||
|
|
toolbar: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
padding: {
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
top: 0,
|
||
|
|
bottom: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
curve: 'smooth',
|
||
|
|
width: 2,
|
||
|
|
colors: [chartColor],
|
||
|
|
lineCap: 'round'
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
show: true,
|
||
|
|
borderColor: 'transparent',
|
||
|
|
strokeDashArray: 0,
|
||
|
|
position: 'back',
|
||
|
|
xaxis: {
|
||
|
|
lines: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
lines: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
row: {
|
||
|
|
colors: undefined,
|
||
|
|
opacity: 0.5
|
||
|
|
},
|
||
|
|
column: {
|
||
|
|
colors: undefined,
|
||
|
|
opacity: 0.5
|
||
|
|
},
|
||
|
|
padding: {
|
||
|
|
top: -3,
|
||
|
|
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: .8, // Starting opacity
|
||
|
|
opacityTo: 0.3, // Ending opacity
|
||
|
|
stops: [0, 100],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
// Customize the circle marker color on hover
|
||
|
|
markers: {
|
||
|
|
colors: [chartColor],
|
||
|
|
strokeWidth: 2,
|
||
|
|
size: 0,
|
||
|
|
hover: {
|
||
|
|
size: 8
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
labels: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
categories: [`Jan ${currentYear}`, `Feb ${currentYear}`, `Mar ${currentYear}`, `Apr ${currentYear}`, `May ${currentYear}`, `Jun ${currentYear}`, `Jul ${currentYear}`, `Aug ${currentYear}`, `Sep ${currentYear}`, `Oct ${currentYear}`, `Nov ${currentYear}`, `Dec ${currentYear}`],
|
||
|
|
tooltip: {
|
||
|
|
enabled: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
labels: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
x: {
|
||
|
|
format: 'dd/MM/yy HH:mm'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
var chart = new ApexCharts(document.querySelector(`#${chartId}`), options);
|
||
|
|
chart.render();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Call the function for each chart with the desired ID and color
|
||
|
|
createChart('areaChart', '#FF9F29');
|
||
|
|
// ================================ Area chart End ================================
|
||
|
|
|
||
|
|
// ================================ Bar chart (Today Income0 Start ================================
|
||
|
|
var options = {
|
||
|
|
series: [{
|
||
|
|
name: "Sales",
|
||
|
|
data: [{
|
||
|
|
x: 'Mon',
|
||
|
|
y: 20,
|
||
|
|
}, {
|
||
|
|
x: 'Tue',
|
||
|
|
y: 40,
|
||
|
|
}, {
|
||
|
|
x: 'Wed',
|
||
|
|
y: 20,
|
||
|
|
}, {
|
||
|
|
x: 'Thur',
|
||
|
|
y: 30,
|
||
|
|
}, {
|
||
|
|
x: 'Fri',
|
||
|
|
y: 40,
|
||
|
|
}, {
|
||
|
|
x: 'Sat',
|
||
|
|
y: 35,
|
||
|
|
}]
|
||
|
|
}],
|
||
|
|
chart: {
|
||
|
|
type: 'bar',
|
||
|
|
width: 164,
|
||
|
|
height: 80,
|
||
|
|
sparkline: {
|
||
|
|
enabled: true // Remove whitespace
|
||
|
|
},
|
||
|
|
toolbar: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
bar: {
|
||
|
|
borderRadius: 6,
|
||
|
|
horizontal: false,
|
||
|
|
columnWidth: 14,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
states: {
|
||
|
|
hover: {
|
||
|
|
filter: {
|
||
|
|
type: 'none'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: 'gradient',
|
||
|
|
colors: ['#E3E6E9'], // 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: ['#E3E6E9'], // Bottom gradient color (with transparency)
|
||
|
|
inverseColors: false, // Do not invert colors
|
||
|
|
opacityFrom: 1, // Starting opacity
|
||
|
|
opacityTo: 1, // Ending opacity
|
||
|
|
stops: [0, 100],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
show: false,
|
||
|
|
borderColor: '#D1D5DB',
|
||
|
|
strokeDashArray: 1, // Use a number for dashed style
|
||
|
|
position: 'back',
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
labels: {
|
||
|
|
show: false // Hide y-axis labels
|
||
|
|
},
|
||
|
|
type: 'category',
|
||
|
|
categories: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat']
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
labels: {
|
||
|
|
show: false,
|
||
|
|
formatter: function (value) {
|
||
|
|
return (value / 1000).toFixed(0) + 'k';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
y: {
|
||
|
|
formatter: function (value) {
|
||
|
|
return value / 1000 + 'k';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var chart = new ApexCharts(document.querySelector("#dailyIconBarChart"), options);
|
||
|
|
chart.render();
|
||
|
|
// ================================ Bar chart (Today Income0 End ================================
|
||
|
|
|
||
|
|
// ================================ My Portfolio Donut chart Start ================================
|
||
|
|
var options = {
|
||
|
|
series: [70, 30],
|
||
|
|
colors: ['#FF9F29', '#487FFF'],
|
||
|
|
labels: ['Female', 'Male'] ,
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
chart: {
|
||
|
|
type: 'donut',
|
||
|
|
height: 230,
|
||
|
|
sparkline: {
|
||
|
|
enabled: true // Remove whitespace
|
||
|
|
},
|
||
|
|
margin: {
|
||
|
|
top: 0,
|
||
|
|
right: 0,
|
||
|
|
bottom: 0,
|
||
|
|
left: 0
|
||
|
|
},
|
||
|
|
padding: {
|
||
|
|
top: 0,
|
||
|
|
right: 0,
|
||
|
|
bottom: 0,
|
||
|
|
left: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
width: 0,
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
responsive: [{
|
||
|
|
breakpoint: 480,
|
||
|
|
options: {
|
||
|
|
chart: {
|
||
|
|
width: 200
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
position: 'bottom'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
};
|
||
|
|
|
||
|
|
var chart = new ApexCharts(document.querySelector("#statisticsDonutChart"), options);
|
||
|
|
chart.render();
|
||
|
|
// ================================ My Portfolio Donut chart End ================================
|
||
|
|
|
||
|
|
// ================================ J Vector Map Start ================================
|
||
|
|
$('#world-map').vectorMap(
|
||
|
|
{
|
||
|
|
map: 'world_mill_en',
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
borderColor: '#fff',
|
||
|
|
borderOpacity: 0.25,
|
||
|
|
borderWidth: 0,
|
||
|
|
color: '#000000',
|
||
|
|
regionStyle : {
|
||
|
|
initial : {
|
||
|
|
fill : '#D1D5DB'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
markerStyle: {
|
||
|
|
initial: {
|
||
|
|
r: 5,
|
||
|
|
'fill': '#fff',
|
||
|
|
'fill-opacity':1,
|
||
|
|
'stroke': '#000',
|
||
|
|
'stroke-width' : 1,
|
||
|
|
'stroke-opacity': 0.4
|
||
|
|
},
|
||
|
|
},
|
||
|
|
markers : [{
|
||
|
|
latLng : [35.8617, 104.1954],
|
||
|
|
name : 'China : 250'
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
latLng : [25.2744, 133.7751],
|
||
|
|
name : 'AustrCalia : 250'
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
latLng : [36.77, -119.41],
|
||
|
|
name : 'USA : 82%'
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
latLng : [55.37, -3.41],
|
||
|
|
name : 'UK : 250'
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
latLng : [25.20, 55.27],
|
||
|
|
name : 'UAE : 250'
|
||
|
|
}],
|
||
|
|
|
||
|
|
series: {
|
||
|
|
regions: [{
|
||
|
|
values: {
|
||
|
|
"US": '#487FFF ',
|
||
|
|
"SA": '#487FFF',
|
||
|
|
"AU": '#487FFF',
|
||
|
|
"CN": '#487FFF',
|
||
|
|
"GB": '#487FFF',
|
||
|
|
},
|
||
|
|
attribute: 'fill'
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
hoverOpacity: null,
|
||
|
|
normalizeFunction: 'linear',
|
||
|
|
zoomOnScroll: false,
|
||
|
|
scaleColors: ['#000000', '#000000'],
|
||
|
|
selectedColor: '#000000',
|
||
|
|
selectedRegions: [],
|
||
|
|
enableZoom: false,
|
||
|
|
hoverColor: '#fff',
|
||
|
|
});
|
||
|
|
// ================================ J Vector Map End ================================
|
||
|
|
|
||
|
|
// ================================ Total Transaction line chart Start ================================
|
||
|
|
var options = {
|
||
|
|
series: [{
|
||
|
|
name: "This month",
|
||
|
|
data: [4, 16, 12, 28, 22, 38, 23]
|
||
|
|
}],
|
||
|
|
chart: {
|
||
|
|
height: 290,
|
||
|
|
type: 'line',
|
||
|
|
toolbar: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
zoom: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
dropShadow: {
|
||
|
|
enabled: true,
|
||
|
|
top: 6,
|
||
|
|
left: 0,
|
||
|
|
blur: 4,
|
||
|
|
color: "#000",
|
||
|
|
opacity: 0.1,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
stroke: {
|
||
|
|
curve: 'smooth',
|
||
|
|
width: 3
|
||
|
|
},
|
||
|
|
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: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'],
|
||
|
|
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: '#B1B9C4',
|
||
|
|
gradient: {
|
||
|
|
colorFrom: '#D8E3F0',
|
||
|
|
colorTo: '#BED1E6',
|
||
|
|
stops: [0, 100],
|
||
|
|
opacityFrom: 0.4,
|
||
|
|
opacityTo: 0.5,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var chart = new ApexCharts(document.querySelector("#transactionLineChart"), options);
|
||
|
|
chart.render();
|
||
|
|
// ================================ Total Transaction line chart End ================================
|