Skip to content

Instantly share code, notes, and snippets.

@ultramenid

ultramenid/gist:1437e79f1c98ad467ccfbaeb970d8143

Created August 30, 2021 17:22
Show Gist options
  • Save ultramenid/1437e79f1c98ad467ccfbaeb970d8143 to your computer and use it in GitHub Desktop.
Save ultramenid/1437e79f1c98ad467ccfbaeb970d8143 to your computer and use it in GitHub Desktop.
Download ZIP
Apexcharts Sync - Syncing charts
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Carts</title>
</head>
<body class="antialiased" style="background-color: black">
<div id="synced-charts" style="display: flex; width: 100%;">
<div id="chart" ></div>
<div id="chart1" ></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
var options = {
series: [{
name: 'TEAM A',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
name: 'TEAM B',
type: 'area',
data: [27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27]
}],
chart: {
id: 'tw',
group: 'social',
width: 650,
height: 650,
type: 'line',
stacked: false,
toolbar: {
show: true,
offsetX: 0,
offsetY: 0,
tools: {
download: true,
selection: false,
reset: false,
zoom: false,
zoomin: false,
zoomout: false,
pan: false
},
}
},
stroke: {
width: [0, 2, 5],
curve: 'smooth'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
fill: {
opacity: [0.85, 0.25, 1],
gradient: {
inverseColors: false,
shade: 'light',
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55,
stops: [0, 100, 100, 100]
}
},
labels: ['01/01/2003', '02/01/2003', '03/01/2003', '04/01/2003', '05/01/2003', '06/01/2003', '07/01/2003',
'08/01/2003', '09/01/2003', '10/01/2003', '11/01/2003'
],
markers: {
size: 0
},
xaxis: {
type: 'category'
},
yaxis: {
title: {
text: 'Points',
},
labels: {
minWidth: 40
},
min: 0
},
tooltip: {
shared: true,
intersect: false,
theme: "dark",
y: {
formatter: function (y) {
if (typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
},
}
};
var options1 = {
series: [{
name: 'TEAM A',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
name: 'TEAM B',
type: 'area',
data: [27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27]
}],
chart: {
events: {
click: function( event, chartContext, config) {
// The last parameter config contains additional information like `seriesIndex` and `dataPointIndex` for cartesian charts
// config.dataPointIndex;
console.log(config.dataPointIndex)
}
},
width: 650,
id: 'yt',
group: 'social',
height: 650,
type: 'line',
stacked: false,
toolbar: {
show: true,
offsetX: 0,
offsetY: 0,
tools: {
download: true,
selection: false,
reset: false,
zoom: false,
zoomin: false,
zoomout: false,
pan: false
},
}
},
stroke: {
width: [0, 2, 5],
curve: 'smooth'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
fill: {
opacity: [0.85, 0.25, 1],
gradient: {
inverseColors: false,
shade: 'light',
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55,
stops: [0, 100, 100, 100]
}
},
labels: ['01/01/2003', '02/01/2003', '03/01/2003', '04/01/2003', '05/01/2003', '06/01/2003', '07/01/2003',
'08/01/2003', '09/01/2003', '10/01/2003', '11/01/2003'
],
markers: {
size: 0
},
xaxis: {
type: 'category'
},
yaxis: {
title: {
text: 'Points',
},
labels: {
minWidth: 40
},
min: 0
},
tooltip: {
shared: true,
intersect: false,
theme: "dark",
y: {
formatter: function (y) {
if (typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
},
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
var chart1 = new ApexCharts(document.querySelector("#chart1"), options1);
chart.render();
chart1.render();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment