update
This commit is contained in:
@@ -0,0 +1,939 @@
|
||||
// radial chart js
|
||||
function radialCommonOption(data) {
|
||||
return {
|
||||
series: data.radialYseries,
|
||||
chart: {
|
||||
height: 130,
|
||||
type: 'radialBar',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 3,
|
||||
left: 0,
|
||||
blur: 10,
|
||||
color: data.dropshadowColor,
|
||||
opacity: 0.35
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '60%',
|
||||
},
|
||||
track: {
|
||||
strokeWidth: '60%',
|
||||
opacity: 1,
|
||||
margin: 5,
|
||||
},
|
||||
dataLabels: {
|
||||
showOn: "always",
|
||||
value: {
|
||||
color: "var(--body-font-color)",
|
||||
fontSize: "14px",
|
||||
show: true,
|
||||
offsetY: -10,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: data.color,
|
||||
stroke: {
|
||||
lineCap: "round",
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1500,
|
||||
options:{
|
||||
chart: {
|
||||
height: 130,
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
const radial1 = {
|
||||
color: ["var(--theme-deafult)"],
|
||||
dropshadowColor:"var(--theme-deafult)",
|
||||
radialYseries: [78],
|
||||
};
|
||||
|
||||
const radialchart1 = document.querySelector('#radial-facebook');
|
||||
if (radialchart1) {
|
||||
var radialprogessChart1 = new ApexCharts(radialchart1, radialCommonOption(radial1));
|
||||
radialprogessChart1.render();
|
||||
}
|
||||
|
||||
// radial 2
|
||||
const radial2 = {
|
||||
color: ["#FFA941"],
|
||||
dropshadowColor:"#FFA941",
|
||||
radialYseries: [70],
|
||||
};
|
||||
|
||||
const radialchart2 = document.querySelector('#radial-instagram');
|
||||
if (radialchart2) {
|
||||
var radialprogessChart2 = new ApexCharts(radialchart2, radialCommonOption(radial2));
|
||||
radialprogessChart2.render();
|
||||
}
|
||||
|
||||
// radial 3
|
||||
const radial3 = {
|
||||
color: ["#57B9F6"],
|
||||
dropshadowColor:"#57B9F6",
|
||||
radialYseries: [50],
|
||||
};
|
||||
|
||||
const radialchart3 = document.querySelector('#radial-twitter');
|
||||
if (radialchart3) {
|
||||
var radialprogessChart3 = new ApexCharts(radialchart3, radialCommonOption(radial3));
|
||||
radialprogessChart3.render();
|
||||
}
|
||||
|
||||
// follower gender chart
|
||||
var followeroptions = {
|
||||
series: [70, 60],
|
||||
chart: {
|
||||
width: 325,
|
||||
height: 325,
|
||||
type: 'radialBar',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 5,
|
||||
left: 8,
|
||||
blur: 8,
|
||||
color: 'var(--theme-deafult)',
|
||||
opacity: 0.2
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
margin: 5,
|
||||
size: '70%',
|
||||
image: '../assets/images/dashboard-5/follower.png',
|
||||
imageWidth: 50,
|
||||
imageHeight: 50,
|
||||
imageClipped: false,
|
||||
},
|
||||
track: {
|
||||
background: 'transparent',
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: [ "var(--theme-deafult)", "#FFA941"],
|
||||
labels: ['Male', 'Female'],
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: "right",
|
||||
horizontalAlign: 'center',
|
||||
offsetY: -15,
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Rubik, sans-serif',
|
||||
fontWeight: 500,
|
||||
labels: {
|
||||
colors: "var(--chart-text-color)",
|
||||
},
|
||||
markers: {
|
||||
width: 6,
|
||||
height: 6,
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 718,
|
||||
options:{
|
||||
chart: {
|
||||
width: "100%",
|
||||
height: 230,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
var followerchart = new ApexCharts(document.querySelector("#followerchart"), followeroptions);
|
||||
followerchart.render();
|
||||
|
||||
// intagram subscriber chart
|
||||
var optionssubscriber = {
|
||||
series: [{
|
||||
name: 'growth',
|
||||
type: 'line',
|
||||
data: [12, 10, 25, 12, 30, 10, 55, 45, 60]
|
||||
},
|
||||
{
|
||||
name: 'growth',
|
||||
type: 'line',
|
||||
data: [10, 15, 20, 18, 38, 25, 55, 35,60]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 265,
|
||||
type: 'line',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 8,
|
||||
left: 0,
|
||||
blur: 2,
|
||||
color: ["#FFA941","#7366FF"],
|
||||
opacity: 0.1
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: 'var(--chart-border)',
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: ["#FFA941","#7366FF"],
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth',
|
||||
opacity: 1,
|
||||
},
|
||||
markers: {
|
||||
discrete: [{
|
||||
seriesIndex: 1,
|
||||
dataPointIndex: 4,
|
||||
fillColor: '#7064F5',
|
||||
strokeColor: 'var(--white)',
|
||||
size: 6,
|
||||
}
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
shared: false,
|
||||
intersect: false,
|
||||
marker: {
|
||||
width: 5,
|
||||
height: 5,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'category',
|
||||
categories: ['Sep 5', 'Sep 8', 'Sep 12', 'Sep 16', 'Sep 18', 'Sep 17', 'Sep 23', 'Sep 26', 'Sep 30'],
|
||||
tickAmount: 12,
|
||||
crosshairs: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: "var(--chart-text-color)",
|
||||
fontSize: '12px',
|
||||
fontFamily: 'Rubik, sans-serif',
|
||||
fontWeight: 400,
|
||||
}
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
type: "horizontal",
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.95,
|
||||
opacityTo: 1,
|
||||
stops: [0, 90,100]
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: 10,
|
||||
max: 60,
|
||||
tickAmount: 5,
|
||||
labels: {
|
||||
style: {
|
||||
colors: "var(--chart-text-color)",
|
||||
fontSize: '12px',
|
||||
fontFamily: 'Rubik, sans-serif',
|
||||
fontWeight: 400,
|
||||
}
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1694,
|
||||
options:{
|
||||
chart: {
|
||||
height: 240,
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1661,
|
||||
options:{
|
||||
chart: {
|
||||
height: 265,
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1412,
|
||||
options:{
|
||||
chart: {
|
||||
height: 240,
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1200,
|
||||
options:{
|
||||
chart: {
|
||||
height: 260,
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1040,
|
||||
options:{
|
||||
chart: {
|
||||
height: 240,
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 992,
|
||||
options:{
|
||||
chart: {
|
||||
height: 255,
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
var subscriberchart = new ApexCharts(document.querySelector("#subscriber-chart"), optionssubscriber);
|
||||
subscriberchart.render();
|
||||
|
||||
// click chart
|
||||
var optionsphotoclick = {
|
||||
series: [{
|
||||
name: "photo",
|
||||
data: [10, 12, 41, 36, 60, 58],
|
||||
}],
|
||||
chart: {
|
||||
width: 125,
|
||||
height: 150,
|
||||
type: 'line',
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 8,
|
||||
left: 0,
|
||||
blur: 3,
|
||||
color: "#54BA4A",
|
||||
opacity: 0.2
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
hover: {
|
||||
size: 3,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2,
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
z: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
annotations: {
|
||||
points: [{
|
||||
x: 90,
|
||||
y: 58,
|
||||
marker: {
|
||||
size: 4,
|
||||
fillColor: '#54BA4A',
|
||||
strokeColor: 'var(--white)',
|
||||
radius: 2,
|
||||
},
|
||||
}]
|
||||
},
|
||||
colors: ["#54BA4A"],
|
||||
fill: {
|
||||
opacity: 1,
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
type: "vertical",
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.95,
|
||||
opacityTo: 1,
|
||||
// stops: [0,100]
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#54BA4A",
|
||||
opacity: 0.1
|
||||
},
|
||||
{
|
||||
offset: 30,
|
||||
color: "#54BA4A",
|
||||
opacity: 0.8
|
||||
},
|
||||
{
|
||||
offset: 80,
|
||||
color: "#54BA4A",
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 100,
|
||||
color: "#54BA4A",
|
||||
opacity: 0.1
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1694,
|
||||
options:{
|
||||
chart: {
|
||||
width: 100,
|
||||
},
|
||||
annotations: {
|
||||
points: [{
|
||||
x: 75,
|
||||
y: 58,
|
||||
marker: {
|
||||
size: 4,
|
||||
fillColor: '#54BA4A',
|
||||
strokeColor: 'var(--white)',
|
||||
radius: 2,
|
||||
},
|
||||
}]
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1661,
|
||||
options:{
|
||||
chart: {
|
||||
width: 120,
|
||||
},
|
||||
annotations: {
|
||||
points: [{
|
||||
x: 90,
|
||||
y: 58,
|
||||
marker: {
|
||||
size: 4,
|
||||
fillColor: '#54BA4A',
|
||||
strokeColor: 'var(--white)',
|
||||
radius: 2,
|
||||
},
|
||||
}]
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1378,
|
||||
options:{
|
||||
chart: {
|
||||
width: 100,
|
||||
},
|
||||
annotations: {
|
||||
points: [{
|
||||
x: 75,
|
||||
y: 58,
|
||||
marker: {
|
||||
size: 4,
|
||||
fillColor: '#54BA4A',
|
||||
strokeColor: 'var(--white)',
|
||||
radius: 2,
|
||||
},
|
||||
}]
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1288,
|
||||
options:{
|
||||
chart: {
|
||||
width: 80,
|
||||
},
|
||||
annotations: {
|
||||
points: [{
|
||||
x: 50,
|
||||
y: 58,
|
||||
marker: {
|
||||
size: 4,
|
||||
fillColor: '#54BA4A',
|
||||
strokeColor: 'var(--white)',
|
||||
radius: 2,
|
||||
},
|
||||
}]
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1200,
|
||||
options:{
|
||||
chart: {
|
||||
width: 110,
|
||||
},
|
||||
annotations: {
|
||||
points: [{
|
||||
x: 85,
|
||||
y: 58,
|
||||
marker: {
|
||||
size: 4,
|
||||
fillColor: '#54BA4A',
|
||||
strokeColor: 'var(--white)',
|
||||
radius: 2,
|
||||
},
|
||||
}]
|
||||
},
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
var photochart = new ApexCharts(document.querySelector("#photo-click"), optionsphotoclick);
|
||||
photochart.render();
|
||||
|
||||
// link chart
|
||||
var optionslinkclick = {
|
||||
series: [{
|
||||
name: "photo",
|
||||
data: [10, 12, 41, 36, 60, 58],
|
||||
}],
|
||||
chart: {
|
||||
width: 125,
|
||||
height: 150,
|
||||
type: 'line',
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 8,
|
||||
left: 0,
|
||||
blur: 3,
|
||||
color: "var(--theme-secondary)",
|
||||
opacity: 0.2
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2,
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
z: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: ["var(--theme-secondary)"],
|
||||
annotations: {
|
||||
points: [{
|
||||
x: 90,
|
||||
y: 58,
|
||||
marker: {
|
||||
size: 4,
|
||||
fillColor: 'var(--theme-secondary)',
|
||||
strokeColor: 'var(--white)',
|
||||
radius: 2,
|
||||
},
|
||||
}]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
type: "vertical",
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.95,
|
||||
opacityTo: 1,
|
||||
// stops: [0,100]
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "var(--theme-secondary)",
|
||||
opacity: 0.1
|
||||
},
|
||||
{
|
||||
offset: 30,
|
||||
color: "var(--theme-secondary)",
|
||||
opacity: 0.8
|
||||
},
|
||||
{
|
||||
offset: 80,
|
||||
color: "var(--theme-secondary)",
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 100,
|
||||
color: "var(--theme-secondary)",
|
||||
opacity: 0.1
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1694,
|
||||
options:{
|
||||
chart: {
|
||||
width: 100,
|
||||
},
|
||||
annotations: {
|
||||
points: [{
|
||||
x: 75,
|
||||
y: 58,
|
||||
marker: {
|
||||
size: 4,
|
||||
fillColor: 'var(--theme-secondary)',
|
||||
strokeColor: 'var(--white)',
|
||||
radius: 2,
|
||||
},
|
||||
}]
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1661,
|
||||
options:{
|
||||
chart: {
|
||||
width: 120,
|
||||
},
|
||||
annotations: {
|
||||
points: [{
|
||||
x: 90,
|
||||
y: 58,
|
||||
marker: {
|
||||
size: 4,
|
||||
fillColor: 'var(--theme-secondary)',
|
||||
strokeColor: 'var(--white)',
|
||||
radius: 2,
|
||||
},
|
||||
}]
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1378,
|
||||
options:{
|
||||
chart: {
|
||||
width: 100,
|
||||
},
|
||||
annotations: {
|
||||
points: [{
|
||||
x: 75,
|
||||
y: 58,
|
||||
marker: {
|
||||
size: 4,
|
||||
fillColor: 'var(--theme-secondary)',
|
||||
strokeColor: 'var(--white)',
|
||||
radius: 2,
|
||||
},
|
||||
}]
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1288,
|
||||
options:{
|
||||
chart: {
|
||||
width: 80,
|
||||
},
|
||||
annotations: {
|
||||
points: [{
|
||||
x: 50,
|
||||
y: 58,
|
||||
marker: {
|
||||
size: 4,
|
||||
fillColor: 'var(--theme-secondary)',
|
||||
strokeColor: 'var(--white)',
|
||||
radius: 2,
|
||||
},
|
||||
}]
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1200,
|
||||
options:{
|
||||
chart: {
|
||||
width: 110,
|
||||
},
|
||||
annotations: {
|
||||
points: [{
|
||||
x: 85,
|
||||
y: 58,
|
||||
marker: {
|
||||
size: 4,
|
||||
fillColor: 'var(--theme-secondary)',
|
||||
strokeColor: 'var(--white)',
|
||||
radius: 2,
|
||||
},
|
||||
}]
|
||||
},
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
var linkchart = new ApexCharts(document.querySelector("#link-click"), optionslinkclick);
|
||||
linkchart.render();
|
||||
|
||||
// view chart
|
||||
var optionsview = {
|
||||
series: [{
|
||||
name: "view",
|
||||
data: [20, 45, 30, 50],
|
||||
}],
|
||||
chart: {
|
||||
height: 305,
|
||||
type: 'line',
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 8,
|
||||
left: 0,
|
||||
blur: 3,
|
||||
color: "var(--theme-deafult)",
|
||||
opacity: 0.2
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 3,
|
||||
},
|
||||
grid: {
|
||||
row: {
|
||||
colors: ['var(--view-grid-bg)', 'transparent'],
|
||||
opacity: 0.5
|
||||
},
|
||||
column: {
|
||||
colors: ['var(--view-grid-bg)', 'transparent'],
|
||||
},
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
z: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: ["var(--theme-deafult)"],
|
||||
fill: {
|
||||
opacity: 1,
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
type: "vertical",
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.95,
|
||||
opacityTo: 1,
|
||||
// stops: [0,100]
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "var(--theme-deafult)",
|
||||
opacity: 0.05
|
||||
},
|
||||
{
|
||||
offset: 30,
|
||||
color: "var(--theme-deafult)",
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 80,
|
||||
color: "var(--theme-deafult)",
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 100,
|
||||
color: "var(--theme-deafult)",
|
||||
opacity: 0.1
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
annotations: {
|
||||
points: [{
|
||||
x: "Feb",
|
||||
y: 44,
|
||||
marker: {
|
||||
size: 15,
|
||||
fillColor: '#7366FF',
|
||||
strokeColor: 'var(--view-border-marker)',
|
||||
strokeWidth: 20,
|
||||
radius: 2,
|
||||
cssClass: 'apexcharts-custom-class'
|
||||
},
|
||||
}]
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr'],
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
options:{
|
||||
chart: {
|
||||
height: 200,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 481,
|
||||
options:{
|
||||
annotations: {
|
||||
points: [{
|
||||
x: "Feb",
|
||||
y: 44,
|
||||
marker: {
|
||||
size: 10,
|
||||
fillColor: '#7366FF',
|
||||
strokeColor: '#cfcdfc',
|
||||
strokeWidth: 7,
|
||||
radius: 2,
|
||||
cssClass: 'apexcharts-custom-class'
|
||||
},
|
||||
}]
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var viewchart = new ApexCharts(document.querySelector("#view"), optionsview);
|
||||
viewchart.render();
|
||||
Reference in New Issue
Block a user