lavkach3

1
document.addEventListener("DOMContentLoaded", function () {
2
  // Basic Bar Chart -------> BAR CHART
3
  var options_basic = {
4
    series: [
5
      {
6
        data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380],
7
      },
8
    ],
9
    chart: {
10
      fontFamily: "inherit",
11
      type: "bar",
12
      height: 350,
13
      toolbar: {
14
        show: false,
15
      },
16
    },
17
    grid: {
18
      borderColor: "transparent",
19
    },
20
    colors: ["var(--bs-primary)"],
21
    plotOptions: {
22
      bar: {
23
        horizontal: true,
24
      },
25
    },
26
    dataLabels: {
27
      enabled: false,
28
    },
29
    xaxis: {
30
      categories: [
31
        "South Korea",
32
        "Canada",
33
        "United Kingdom",
34
        "Netherlands",
35
        "Italy",
36
        "France",
37
        "Japan",
38
        "United States",
39
        "China",
40
        "Germany",
41
      ],
42
      labels: {
43
        style: {
44
          colors:  "#a1aab2",
45
        },
46
      },
47
    },
48
    yaxis: {
49
      labels: {
50
        style: {
51
          colors:  "#a1aab2",
52
        },
53
      },
54
    },
55
    tooltip: {
56
      theme: "dark",
57
    },
58
  };
59

60
  var chart_bar_basic = new ApexCharts(
61
    document.querySelector("#chart-bar-basic"),
62
    options_basic
63
  );
64
  chart_bar_basic.render();
65

66
  // Stacked Bar Chart -------> BAR CHART
67
  var options_stacked = {
68
    series: [
69
      {
70
        name: "Marine Sprite",
71
        data: [44, 55, 41, 37, 22, 43, 21],
72
      },
73
      {
74
        name: "Striking Calf",
75
        data: [53, 32, 33, 52, 13, 43, 32],
76
      },
77
      {
78
        name: "Tank Picture",
79
        data: [12, 17, 11, 9, 15, 11, 20],
80
      },
81
      {
82
        name: "Bucket Slope",
83
        data: [9, 7, 5, 8, 6, 9, 4],
84
      },
85
      {
86
        name: "Reborn Kid",
87
        data: [25, 12, 19, 32, 25, 24, 10],
88
      },
89
    ],
90
    chart: {
91
      fontFamily: "inherit",
92
      type: "bar",
93
      height: 350,
94
      stacked: true,
95
      toolbar: {
96
        show: false,
97
      },
98
    },
99
    grid: {
100
      borderColor: "transparent",
101
    },
102
    colors: [
103
      "var(--bs-primary)",
104
      "var(--bs-secondary)",
105
      "#ffae1f",
106
      "#fa896b",
107
      "#39b69a",
108
    ],
109
    plotOptions: {
110
      bar: {
111
        horizontal: true,
112
      },
113
    },
114
    stroke: {
115
      width: 1,
116
      colors: ["#fff"],
117
    },
118
    xaxis: {
119
      categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
120
      labels: {
121
        formatter: function (val) {
122
          return val + "K";
123
        },
124
        style: {
125
          colors:  "#a1aab2",
126
        },
127
      },
128
    },
129
    yaxis: {
130
      title: {
131
        text: undefined,
132
      },
133
      labels: {
134
        style: {
135
          colors:  "#a1aab2",
136
        },
137
      },
138
    },
139
    tooltip: {
140
      y: {
141
        formatter: function (val) {
142
          return val + "K";
143
        },
144
      },
145
      theme: "dark",
146
    },
147
    fill: {
148
      opacity: 1,
149
    },
150
    legend: {
151
      position: "top",
152
      horizontalAlign: "left",
153
      offsetX: 40,
154
      labels: {
155
        colors: ["#a1aab2"],
156
      },
157
    },
158
  };
159

160
  var chart_bar_stacked = new ApexCharts(
161
    document.querySelector("#chart-bar-stacked"),
162
    options_stacked
163
  );
164
  chart_bar_stacked.render();
165

166
  // Reversed Bar Chart -------> BAR CHART
167
  var options_reversed = {
168
    series: [
169
      {
170
        data: [400, 430, 448, 470, 540, 580, 690],
171
      },
172
    ],
173
    chart: {
174
      fontFamily: "inherit",
175
      type: "bar",
176
      height: 350,
177
      toolbar: {
178
        show: false,
179
      },
180
    },
181
    grid: {
182
      borderColor: "transparent",
183
    },
184
    colors: ["var(--bs-primary)"],
185
    annotations: {
186
      xaxis: [
187
        {
188
          x: 500,
189
          borderColor: "var(--bs-primary)",
190
          label: {
191
            borderColor: "var(--bs-primary)",
192
            style: {
193
              color: "#fff",
194
              background: "var(--bs-primary)",
195
            },
196
            text: "X annotation",
197
          },
198
        },
199
      ],
200
      yaxis: [
201
        {
202
          y: "July",
203
          y2: "September",
204
          label: {
205
            text: "Y annotation",
206
          },
207
        },
208
      ],
209
    },
210
    plotOptions: {
211
      bar: {
212
        horizontal: true,
213
      },
214
    },
215
    dataLabels: {
216
      enabled: true,
217
    },
218
    xaxis: {
219
      categories: [
220
        "June",
221
        "July",
222
        "August",
223
        "September",
224
        "October",
225
        "November",
226
        "December",
227
      ],
228
      labels: {
229
        style: {
230
          colors:  "#a1aab2",
231
        },
232
      },
233
    },
234
    grid: {
235
      xaxis: {
236
        lines: {
237
          show: true,
238
        },
239
      },
240
      borderColor: "transparent",
241
    },
242
    yaxis: {
243
      reversed: true,
244
      axisTicks: {
245
        show: true,
246
      },
247
      labels: {
248
        style: {
249
          colors:  "#a1aab2",
250
        },
251
      },
252
    },
253
    tooltip: {
254
      theme: "dark",
255
    },
256
  };
257

258
  var chart_bar_reversed = new ApexCharts(
259
    document.querySelector("#chart-bar-reversed"),
260
    options_reversed
261
  );
262
  chart_bar_reversed.render();
263

264
  // Patterned Bar Chart -------> BAR CHART
265
  var options_patterned = {
266
    series: [
267
      {
268
        name: "Marine Sprite",
269
        data: [44, 55, 41, 37, 22, 43, 21],
270
      },
271
      {
272
        name: "Striking Calf",
273
        data: [53, 32, 33, 52, 13, 43, 32],
274
      },
275
      {
276
        name: "Tank Picture",
277
        data: [12, 17, 11, 9, 15, 11, 20],
278
      },
279
      {
280
        name: "Bucket Slope",
281
        data: [9, 7, 5, 8, 6, 9, 4],
282
      },
283
    ],
284
    chart: {
285
      fontFamily: "inherit",
286
      type: "bar",
287
      height: 350,
288
      colors:  "#a1aab2",
289
      stacked: true,
290
      dropShadow: {
291
        enabled: true,
292
        blur: 1,
293
        opacity: 0.25,
294
      },
295
      toolbar: {
296
        show: false,
297
      },
298
    },
299
    grid: {
300
      borderColor: "transparent",
301
    },
302
    colors: ["var(--bs-primary)", "var(--bs-secondary)", "#ffae1f", "#fa896b"],
303
    plotOptions: {
304
      bar: {
305
        horizontal: true,
306
        barHeight: "60%",
307
      },
308
    },
309
    dataLabels: {
310
      enabled: false,
311
    },
312
    stroke: {
313
      width: 2,
314
    },
315
    xaxis: {
316
      categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
317
      labels: {
318
        style: {
319
          colors:  "#a1aab2",
320
        },
321
      },
322
    },
323
    yaxis: {
324
      title: {
325
        text: undefined,
326
      },
327
      labels: {
328
        style: {
329
          colors:  "#a1aab2",
330
        },
331
      },
332
    },
333
    tooltip: {
334
      shared: false,
335
      y: {
336
        formatter: function (val) {
337
          return val + "K";
338
        },
339
      },
340
      theme: "dark",
341
    },
342
    fill: {
343
      type: "pattern",
344
      opacity: 1,
345
      pattern: {
346
        style: ["circles", "slantedLines", "verticalLines", "horizontalLines"], // string or array of strings
347
      },
348
    },
349
    states: {
350
      hover: {
351
        filter: "none",
352
      },
353
    },
354
    legend: {
355
      position: "right",
356
      offsetY: 40,
357
      labels: {
358
        colors:  "#a1aab2",
359
      },
360
    },
361
  };
362

363
  var chart_bar_patterned = new ApexCharts(
364
    document.querySelector("#chart-bar-patterned"),
365
    options_patterned
366
  );
367
  chart_bar_patterned.render();
368
});
369