lavkach3

1
document.addEventListener("DOMContentLoaded", function () {
2
  // Basic Radar Chart -------> RADAR CHART
3
  var options_basic = {
4
    series: [
5
      {
6
        name: "Series 1",
7
        data: [80, 50, 30, 40, 100, 20],
8
      },
9
    ],
10
    chart: {
11
      fontFamily: "inherit",
12
      height: 350,
13
      type: "radar",
14
      toolbar: {
15
        show: false,
16
      },
17
    },
18
    colors: ["#615dff"],
19
    xaxis: {
20
      categories: ["January", "February", "March", "April", "May", "June"],
21
    },
22
    tooltip: {
23
      theme: "dark",
24
    },
25
  };
26

27
  var chart_radar_basic = new ApexCharts(
28
    document.querySelector("#chart-radar-basic"),
29
    options_basic
30
  );
31
  chart_radar_basic.render();
32

33
  // Multiple Series Radar Chart -------> RADAR CHART
34
  var options_multiple = {
35
    series: [
36
      {
37
        name: "Series 1",
38
        data: [80, 50, 30, 40, 100, 20],
39
      },
40
      {
41
        name: "Series 2",
42
        data: [20, 30, 40, 80, 20, 80],
43
      },
44
      {
45
        name: "Series 3",
46
        data: [44, 76, 78, 13, 43, 10],
47
      },
48
    ],
49
    chart: {
50
      fontFamily: "inherit",
51
      height: 350,
52
      type: "radar",
53
      toolbar: {
54
        show: false,
55
      },
56

57
      dropShadow: {
58
        enabled: true,
59
        blur: 1,
60
        left: 1,
61
        top: 1,
62
      },
63
    },
64
    colors: ["#615dff", "#3dd9eb", "#ffae1f"],
65
    stroke: {
66
      width: 2,
67
    },
68
    fill: {
69
      opacity: 0.1,
70
    },
71
    markers: {
72
      size: 0,
73
    },
74
    xaxis: {
75
      categories: ["2011", "2012", "2013", "2014", "2015", "2016"],
76
    },
77
    legend: {
78
      labels: {
79
        colors: ["#a1aab2"],
80
      },
81
    },
82
  };
83

84
  var chart_radar_multiple_series = new ApexCharts(
85
    document.querySelector("#chart-radar-multiple-series"),
86
    options_multiple
87
  );
88
  chart_radar_multiple_series.render();
89

90
  // Polygon-fill Radar Chart -------> RADAR CHART
91
  var options_polygon = {
92
    series: [
93
      {
94
        name: "Series 1",
95
        data: [20, 100, 40, 30, 50, 80, 33],
96
      },
97
    ],
98
    chart: {
99
      fontFamily: "inherit",
100
      height: 350,
101
      type: "radar",
102
      toolbar: {
103
        show: false,
104
      },
105
    },
106
    dataLabels: {
107
      enabled: true,
108
    },
109
    plotOptions: {
110
      radar: {
111
        size: 140,
112
        polygons: {
113
          strokeColors: "var(--bs-border-color)",
114
          fill: {
115
            colors: ["var(--bs-light)", "var(--bs-body-bg)"],
116
          },
117
        },
118
      },
119
    },
120
    colors: ["#615dff"],
121
    markers: {
122
      size: 4,
123
      colors: ["#fff"],
124
      strokeColor: "#615dff",
125
      strokeWidth: 2,
126
    },
127
    tooltip: {
128
      y: {
129
        formatter: function (val) {
130
          return val;
131
        },
132
      },
133
      theme: "dark",
134
    },
135
    xaxis: {
136
      categories: [
137
        "Sunday",
138
        "Monday",
139
        "Tuesday",
140
        "Wednesday",
141
        "Thursday",
142
        "Friday",
143
        "Saturday",
144
      ],
145
    },
146
    yaxis: {
147
      tickAmount: 7,
148
      labels: {
149
        formatter: function (val, i) {
150
          if (i % 2 === 0) {
151
            return val;
152
          } else {
153
            return "";
154
          }
155
        },
156
      },
157
    },
158
  };
159

160
  var chart_radar_polygon_fill = new ApexCharts(
161
    document.querySelector("#chart-radar-polygon-fill"),
162
    options_polygon
163
  );
164
  chart_radar_polygon_fill.render();
165
});
166