lavkach3

1
document.addEventListener("DOMContentLoaded", function () {
2
  // Simple Pie Chart -------> PIE CHART
3
  var options_simple = {
4
    series: [44, 55, 13, 43, 22],
5
    chart: {
6
      fontFamily: "inherit",
7
      width: 380,
8
      type: "pie",
9
    },
10
    colors: [
11
      "var(--bs-primary)",
12
      "var(--bs-secondary)",
13
      "#ffae1f",
14
      "#fa896b",
15
      "#39b69a",
16
    ],
17
    labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
18
    responsive: [
19
      {
20
        breakpoint: 480,
21
        options: {
22
          chart: {
23
            width: 200,
24
          },
25
          legend: {
26
            position: "bottom",
27
          },
28
        },
29
      },
30
    ],
31
    legend: {
32
      labels: {
33
       colors:  "#a1aab2",
34
      },
35
    },
36
  };
37

38
  var chart_pie_simple = new ApexCharts(
39
    document.querySelector("#chart-pie-simple"),
40
    options_simple
41
  );
42
  chart_pie_simple.render();
43

44
  // Donut Pie Chart -------> PIE CHART
45
  var options_donut = {
46
    series: [44, 55, 41, 17, 15],
47
    chart: {
48
      fontFamily: "inherit",
49
      type: "donut",
50
      width: 385,
51
    },
52
    colors: [
53
      "var(--bs-primary)",
54
      "var(--bs-secondary)",
55
      "#ffae1f",
56
      "#fa896b",
57
      "#39b69a",
58
    ],
59
    responsive: [
60
      {
61
        breakpoint: 480,
62
        options: {
63
          chart: {
64
            width: 200,
65
          },
66
          legend: {
67
            position: "bottom",
68
          },
69
        },
70
      },
71
    ],
72
    legend: {
73
      labels: {
74
       colors:  "#a1aab2",
75
      },
76
    },
77
  };
78

79
  var chart_pie_donut = new ApexCharts(
80
    document.querySelector("#chart-pie-donut"),
81
    options_donut
82
  );
83
  chart_pie_donut.render();
84

85
  // Monochrome Pie Chart -------> PIE CHART
86
  var options_monochrome = {
87
    series: [25, 15, 44, 55, 41, 17],
88
    chart: {
89
      fontFamily: "inherit",
90
      width: "350",
91
      type: "pie",
92
    },
93
    labels: [
94
      "Monday",
95
      "Tuesday",
96
      "Wednesday",
97
      "Thursday",
98
      "Friday",
99
      "Saturday",
100
    ],
101
    theme: {
102
      monochrome: {
103
        enabled: true,
104
      },
105
    },
106
    plotOptions: {
107
      pie: {
108
        color: ["#3dd9eb"],
109
        dataLabels: {
110
          offset: -5,
111
        },
112
      },
113
    },
114
    dataLabels: {
115
      formatter(val, opts) {
116
        const name = opts.w.globals.labels[opts.seriesIndex];
117
        return [name, val.toFixed(1) + "%"];
118
      },
119
    },
120
    legend: {
121
      show: false,
122
    },
123
  };
124

125
  var chart_pie_monochrome = new ApexCharts(
126
    document.querySelector("#chart-pie-monochrome"),
127
    options_monochrome
128
  );
129
  chart_pie_monochrome.render();
130
});
131