lavkach3

1
document.addEventListener("DOMContentLoaded", function () {
2
  // Basic Radial Bar Chart -------> RADIAL CHART
3
  var options_basic = {
4
    series: [70],
5
    chart: {
6
      fontFamily: "inherit",
7
      height: 350,
8
      type: "radialBar",
9
    },
10
    colors: ["#615dff"],
11
    plotOptions: {
12
      radialBar: {
13
        hollow: {
14
          size: "70%",
15
        },
16
        dataLabels: {
17
          value: {
18
            color: "#a1aab2",
19
            show: true,
20
          },
21
        },
22
      },
23
    },
24
    labels: ["Cricket"],
25
  };
26

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

33
  // Multiple Radial Bar Chart -------> RADIAL CHART
34
  var options_multiple = {
35
    series: [44, 55, 67, 83],
36
    chart: {
37
      fontFamily: "inherit",
38
      height: 350,
39
      type: "radialBar",
40
    },
41
    colors: ["#615dff", "#3dd9eb", "#ffae1f", "#fa896b"],
42
    plotOptions: {
43
      radialBar: {
44
        dataLabels: {
45
          name: {
46
            fontSize: "22px",
47
          },
48
          value: {
49
            fontSize: "16px",
50
            color: "#a1aab2",
51
          },
52
          total: {
53
            show: true,
54
            label: "Total",
55
            formatter: function (w) {
56
              // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
57
              return 249;
58
            },
59
          },
60
        },
61
      },
62
    },
63
    labels: ["Apples", "Oranges", "Bananas", "Berries"],
64
  };
65

66
  var chart_radial_multiple = new ApexCharts(
67
    document.querySelector("#chart-radial-multiple"),
68
    options_multiple
69
  );
70
  chart_radial_multiple.render();
71

72
  // Custome circle Radial Bar Chart -------> RADIAL CHART
73
  var options_custom_circle = {
74
    series: [76, 67, 61, 90],
75
    chart: {
76
      fontFamily: "inherit",
77
      height: 390,
78
      type: "radialBar",
79
    },
80
    plotOptions: {
81
      radialBar: {
82
        offsetY: 0,
83
        startAngle: 0,
84
        endAngle: 270,
85
        hollow: {
86
          margin: 5,
87
          size: "30%",
88
          background: "transparent",
89
          image: undefined,
90
        },
91
        dataLabels: {
92
          name: {
93
            show: false,
94
          },
95
          value: {
96
            show: false,
97
          },
98
        },
99
      },
100
    },
101
    colors: ["#615dff", "#3dd9eb", "#ffae1f", "#fa896b"],
102
    labels: ["Vimeo", "Messenger", "Facebook", "LinkedIn"],
103
    legend: {
104
      show: true,
105
      floating: true,
106
      fontSize: "16px",
107
      position: "left",
108
      offsetX: 80,
109
      offsetY: 15,
110
      labels: {
111
        useSeriesColors: true,
112
      },
113
      markers: {
114
        size: 0,
115
      },
116
      formatter: function (seriesName, opts) {
117
        return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex];
118
      },
119
      itemMargin: {
120
        vertical: 3,
121
      },
122
    },
123
    responsive: [
124
      {
125
        breakpoint: 480,
126
        options: {
127
          legend: {
128
            show: false,
129
          },
130
        },
131
      },
132
    ],
133
  };
134

135
  var chart_radial_custom_circle = new ApexCharts(
136
    document.querySelector("#chart-radial-circle"),
137
    options_custom_circle
138
  );
139
  chart_radial_custom_circle.render();
140

141
  // Stroked Gauge Radial Bar Chart -------> RADIAL CHART
142
  var options_gradient = {
143
    series: [75],
144
    chart: {
145
      fontFamily: "inherit",
146
      height: 350,
147
      type: "radialBar",
148
      toolbar: {
149
        show: false,
150
      },
151
    },
152
    plotOptions: {
153
      radialBar: {
154
        startAngle: -135,
155
        endAngle: 225,
156
        hollow: {
157
          margin: 0,
158
          size: "70%",
159
          background: "#fff",
160
          image: undefined,
161
          imageOffsetX: 0,
162
          imageOffsetY: 0,
163
          position: "front",
164
          dropShadow: {
165
            enabled: true,
166
            top: 3,
167
            left: 0,
168
            blur: 4,
169
            opacity: 0.24,
170
          },
171
        },
172
        track: {
173
          background: "#fff",
174
          strokeWidth: "67%",
175
          margin: 0, // margin is in pixels
176
          dropShadow: {
177
            enabled: true,
178
            top: -3,
179
            left: 0,
180
            blur: 4,
181
            opacity: 0.35,
182
          },
183
        },
184

185
        dataLabels: {
186
          show: true,
187
          name: {
188
            offsetY: -10,
189
            show: true,
190
            color: "#615dff",
191
            fontSize: "17px",
192
          },
193
          value: {
194
            formatter: function (val) {
195
              return parseInt(val);
196
            },
197
            color: "#6610f2",
198
            fontSize: "36px",
199
            show: true,
200
          },
201
        },
202
      },
203
    },
204
    fill: {
205
      type: "gradient",
206
      gradient: {
207
        shade: "dark",
208
        type: "horizontal",
209
        shadeIntensity: 0.5,
210
        gradientToColors: ["#615dff"],
211
        inverseColors: true,
212
        opacityFrom: 1,
213
        opacityTo: 1,
214
        stops: [0, 100],
215
      },
216
    },
217
    stroke: {
218
      lineCap: "round",
219
    },
220
    labels: ["Percent"],
221
  };
222

223
  var chart_radial_gradient = new ApexCharts(
224
    document.querySelector("#chart-radial-gradient"),
225
    options_gradient
226
  );
227
  chart_radial_gradient.render();
228

229
  // Stroked Gauge Radial Bar Chart -------> RADIAL CHART
230
  var options_strocked = {
231
    series: [67],
232
    chart: {
233
      fontFamily: "inherit",
234
      height: 350,
235
      type: "radialBar",
236
      offsetY: -10,
237
    },
238
    colors: ["#615dff"],
239
    plotOptions: {
240
      radialBar: {
241
        startAngle: -135,
242
        endAngle: 135,
243
        dataLabels: {
244
          name: {
245
            fontSize: "16px",
246
            color: undefined,
247
            offsetY: 120,
248
          },
249
          value: {
250
            offsetY: 76,
251
            fontSize: "22px",
252
            color: "#a1aab2",
253
            formatter: function (val) {
254
              return val + "%";
255
            },
256
          },
257
        },
258
      },
259
    },
260
    fill: {
261
      type: "gradient",
262
      gradient: {
263
        shade: "dark",
264
        shadeIntensity: 0.15,
265
        inverseColors: false,
266
        opacityFrom: 1,
267
        opacityTo: 1,
268
        stops: [0, 50, 65, 91],
269
      },
270
    },
271
    stroke: {
272
      dashArray: 4,
273
    },
274
    labels: ["Median Ratio"],
275
  };
276

277
  var chart_radial_strocked = new ApexCharts(
278
    document.querySelector("#chart-radial-stroked-gauge"),
279
    options_strocked
280
  );
281
  chart_radial_strocked.render();
282

283
  // Semi Circle Radial Bar Chart -------> RADIAL CHART
284
  var options_semi_circle = {
285
    series: [76],
286
    chart: {
287
      fontFamily: "inherit",
288
      type: "radialBar",
289
      offsetY: -20,
290
      width: 400,
291
      height: 300,
292
      sparkline: {
293
        enabled: true,
294
      },
295
    },
296
    plotOptions: {
297
      radialBar: {
298
        startAngle: -90,
299
        endAngle: 90,
300
        track: {
301
          background: "#615dff",
302
          strokeWidth: "97%",
303
          margin: 5, // margin is in pixels
304
          dropShadow: {
305
            enabled: true,
306
            top: 2,
307
            left: 0,
308
            color: "#999",
309
            opacity: 1,
310
            blur: 2,
311
          },
312
        },
313
        dataLabels: {
314
          name: {
315
            show: false,
316
          },
317
          value: {
318
            offsetY: -2,
319
            fontSize: "22px",
320
            color: "#a1aab2",
321
          },
322
        },
323
      },
324
    },
325
    grid: {
326
      padding: {
327
        top: -10,
328
      },
329
    },
330
    fill: {
331
      type: "gradient",
332
      gradient: {
333
        color: "#6610f2",
334
        shade: "light",
335
        shadeIntensity: 0.4,
336
        inverseColors: false,
337
        opacityFrom: 1,
338
        opacityTo: 1,
339
        stops: [0, 50, 53, 91],
340
      },
341
    },
342
    labels: ["Average Results"],
343
  };
344

345
  var chart_radial_semi_circle = new ApexCharts(
346
    document.querySelector("#chart-radial-semi-circle"),
347
    options_semi_circle
348
  );
349
  chart_radial_semi_circle.render();
350
});
351