Skip to content

Instantly share code, notes, and snippets.

@mrash

mrash/ap_pie.html

Last active November 24, 2024 23:11
Show Gist options
  • Save mrash/f4131793434eb1a26bca1d8c84c27b53 to your computer and use it in GitHub Desktop.
Save mrash/f4131793434eb1a26bca1d8c84c27b53 to your computer and use it in GitHub Desktop.
Download ZIP
Apexcharts 4.0.0 introduces chart.render() issue.
Raw
ap_pie.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
</head>
<style>
.underline {
text-decoration: underline;
}
</style>
<body>
<table>
<tr>
<td>
<div id="Graph1_id"></div>
<!-- script src="../../apexcharts.js-3.54.1/dist/apexcharts.js"></script -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
var options = {
chart: {
height: 350,
type: 'area',
width: 800,
stacked: false,
},
dataLabels: {
enabled: false
},
stroke: {
width: 1,
curve: 'straight'
},
series: [{
name: 'prcnts',
data: [
{ x: '01 Jan 2011', y: 5.57 },
{ x: '01 Jan 2012', y: 5.80 },
{ x: '01 Jan 2013', y: 3.91 },
{ x: '01 Jan 2014', y: 7.82 },
{ x: '01 Jan 2015', y: 2.47 },
{ x: '01 Jan 2016', y: 4.08 },
{ x: '01 Jan 2017', y: 5.16 },
{ x: '01 Jan 2018', y: 1.33 },
{ x: '01 Jan 2019', y: 8.98 },
{ x: '01 Jan 2020', y: 8.77 },
{ x: '01 Jan 2021', y: 3.49 },
{ x: '01 Jan 2022', y: 1.70 },
{ x: '01 Jan 2023', y: 8.14 },
{ x: '01 Jan 2024', y: 7.34 },
{ x: '01 Jan 2025', y: 4.14 }
]
}],
title: {
text: 'Percentages [2011 - 2025]',
align: 'left',
style: {
fontSize: '14px'
},
offsetY: 5,
},
xaxis: {
type: 'datetime',
axisBorder: {
show: false
},
axisTicks: {
show: true,
borderType: 'dotted',
}
},
yaxis: {
floating: false,
labels: {
style: {
color: '#8e8da4',
},
offsetY: 0,
offsetX: 0,
formatter: function(val) {
return val + "%"
}
},
axisBorder: {
show: false,
},
axisTicks: {
show: false
}
},
fill: {
opacity: .5,
type: 'gradient'
},
tooltip: {
x: {
format: "yyyy",
},
fixed: {
enabled: false,
position: 'topRight'
},
y: {
formatter: function(val) {
return val + "%"
}
}
},
grid: {
borderColor: '#E0E0E0',
strokeDashArray: 3,
position: 'back',
xaxis: {
lines: {
show: true,
}
},
yaxis: {
lines: {
show: true,
}
},
},
}
var chart = new ApexCharts(
document.querySelector("#Graph1_id"),
options
);
chart.render();
</script>
</td>
<td>
<div id="Graph2_id"></div>
<!-- script src="../../apexcharts.js-3.54.1/dist/apexcharts.js"></script -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
var options = {
theme: {
palette: 'palette6'
},
chart: {
width: 430,
type: 'donut',
},
series: [1401, 1111, 872, 684, 96, 52, 15, 10, 0],
labels: ["Val1", "Val2", "Val3", "Val4", "Val5", "Val6", "Val7", "Val8", "Val9"],
title: {
text: "Pie Chart 2024",
offsetY: 7,
},
legend: {
horizontalAlign: 'left'
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
}
var chart = new ApexCharts(
document.querySelector("#Graph2_id"),
options
);
chart.render();
</script>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment