apex.pie.init.js
2.96 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
document.addEventListener("DOMContentLoaded", function () {
// Simple Pie Chart -------> PIE CHART
var options_simple = {
series: [44, 55, 13, 43, 22],
chart: {
fontFamily: "inherit",
width: 380,
type: "pie",
foreColor: "#adb0bb",
},
colors: ["var(--color-primary)", "var(--color-primary)", "#ffae1f", "#fa896b", "#39b69a"],
labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200,
},
legend: {
position: "bottom",
},
},
},],
legend: {
labels: {
colors: ["#a1aab2"],
},
},
};
var chart_pie_simple = new ApexCharts(
document.querySelector("#chart-pie-simple"),
options_simple
);
chart_pie_simple.render();
// Donut Pie Chart -------> PIE CHART
var options_donut = {
series: [44, 55, 41, 17, 15],
chart: {
fontFamily: "inherit",
type: "donut",
width: 385,
foreColor: "#adb0bb",
},
colors: ["var(--color-primary)", "var(--color-primary)", "#ffae1f", "#fa896b", "#39b69a"],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200,
},
legend: {
position: "bottom",
},
},
},],
legend: {
labels: {
colors: ["#a1aab2"],
},
},
};
var chart_pie_donut = new ApexCharts(
document.querySelector("#chart-pie-donut"),
options_donut
);
chart_pie_donut.render();
// Monochrome Pie Chart -------> PIE CHART
var options_monochrome = {
series: [25, 15, 44, 55, 41, 17],
chart: {
fontFamily: "inherit",
width: "350",
type: "pie",
},
labels: [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
],
theme: {
monochrome: {
enabled: true,
},
},
plotOptions: {
pie: {
color: ["#3dd9eb"],
dataLabels: {
offset: -5,
},
},
},
dataLabels: {
formatter(val, opts) {
const name = opts.w.globals.labels[opts.seriesIndex];
return [name, val.toFixed(1) + "%"];
},
},
legend: {
show: false,
},
};
var chart_pie_monochrome = new ApexCharts(
document.querySelector("#chart-pie-monochrome"),
options_monochrome
);
chart_pie_monochrome.render();
});