lavkach3

1
document.addEventListener("DOMContentLoaded", function () {
2
  // =====================================
3
  // widgest-chart-1
4
  // =====================================
5
  var options = {
6
    chart: {
7
      id: "widgest-chart-1",
8
      type: "area",
9
      height: 90,
10
      sparkline: {
11
        enabled: true,
12
      },
13
      group: "widgest-chart-1",
14
      fontFamily: "inherit",
15
      foreColor: "#adb0bb",
16
    },
17
    series: [
18
      {
19
        name: "",
20
        color: "var(--bs-primary)",
21
        data: [0, 150, 110, 240, 200, 200, 300, 200],
22
      },
23
    ],
24
    stroke: {
25
      curve: "smooth",
26
      width: 2,
27
    },
28

29
    fill: {
30
      type: "gradient",
31
      gradient: {
32
        shadeIntensity: 0,
33
        inverseColors: false,
34
        opacityFrom: 0.2,
35
        opacityTo: 0,
36
        stops: [100],
37
      },
38
    },
39

40
    markers: {
41
      size: 0,
42
    },
43
    tooltip: {
44
      theme: "dark",
45
      fixed: {
46
        enabled: true,
47
        position: "right",
48
      },
49
      x: {
50
        show: false,
51
      },
52
    },
53
  };
54
  new ApexCharts(document.querySelector("#widgest-chart-1"), options).render();
55

56
  // =====================================
57
  // widgest-chart-2
58
  // =====================================
59
  var options = {
60
    series: [
61
      {
62
        name: "",
63
        data: [20, 15, 30, 25, 10, 18, 20, 15, 12, 10],
64
      },
65
    ],
66

67
    chart: {
68
      toolbar: {
69
        show: false,
70
      },
71
      height: 80,
72
      type: "bar",
73
      sparkline: {
74
        enabled: true,
75
      },
76
      fontFamily: "inherit",
77
      foreColor: "#adb0bb",
78
    },
79
    colors: [
80
      "var(--bs-secondary-bg-subtle)",
81
      "var(--bs-secondary-bg-subtle)",
82
      "var(--bs-secondary)",
83
      "var(--bs-secondary-bg-subtle)",
84
      "var(--bs-secondary-bg-subtle)",
85
      "var(--bs-secondary-bg-subtle)",
86
      "var(--bs-secondary-bg-subtle)",
87
    ],
88
    plotOptions: {
89
      bar: {
90
        borderRadius: 3,
91
        columnWidth: "48%",
92
        distributed: true,
93
        endingShape: "rounded",
94
      },
95
    },
96

97
    dataLabels: {
98
      enabled: false,
99
    },
100
    legend: {
101
      show: false,
102
    },
103
    grid: {
104
      yaxis: {
105
        lines: {
106
          show: false,
107
        },
108
      },
109
    },
110
    xaxis: {
111
      axisBorder: {
112
        show: false,
113
      },
114
      labels: {
115
        show: false,
116
      },
117
      axisTicks: {
118
        show: false,
119
      },
120
    },
121
    yaxis: {
122
      labels: {
123
        show: false,
124
      },
125
    },
126
    tooltip: {
127
      theme: "dark",
128
    },
129
  };
130

131
  var chart = new ApexCharts(
132
    document.querySelector("#widgest-chart-2"),
133
    options
134
  );
135
  chart.render();
136

137
  // =====================================
138
  // widgest-chart-3
139
  // =====================================
140
  var options = {
141
    chart: {
142
      id: "widgest-chart-3",
143
      type: "area",
144
      height: 90,
145
      sparkline: {
146
        enabled: true,
147
      },
148
      group: "sparklines",
149
      fontFamily: "inherit",
150
      foreColor: "#adb0bb",
151
    },
152
    series: [
153
      {
154
        name: "",
155
        color: "var(--bs-primary)",
156
        data: [0, 3, 1, 2, 8, 1, 5, 1],
157
      },
158
    ],
159
    stroke: {
160
      curve: "smooth",
161
      width: 2,
162
    },
163
    fill: {
164
      type: "gradient",
165
      gradient: {
166
        shadeIntensity: 0,
167
        inverseColors: false,
168
        opacityFrom: 0.2,
169
        opacityTo: 0,
170
        stops: [100],
171
      },
172
    },
173

174
    markers: {
175
      size: 0,
176
    },
177
    tooltip: {
178
      theme: "dark",
179
      fixed: {
180
        enabled: true,
181
        position: "right",
182
      },
183
      x: {
184
        show: false,
185
      },
186
    },
187
  };
188
  new ApexCharts(document.querySelector("#widgest-chart-3"), options).render();
189

190
  // =====================================
191
  // widgest-chart-4
192
  // =====================================
193
  var options = {
194
    series: [
195
      {
196
        name: "",
197
        data: [4, 10, 9, 7, 9, 10, 11, 8, 10, 12, 9],
198
      },
199
    ],
200

201
    chart: {
202
      toolbar: {
203
        show: false,
204
      },
205
      height: 55,
206
      type: "bar",
207
      sparkline: {
208
        enabled: true,
209
      },
210
      fontFamily: "inherit",
211
      foreColor: "#adb0bb",
212
    },
213
    colors: [
214
      "var(--bs-secondary)",
215
      "var(--bs-secondary)",
216
      "var(--bs-secondary)",
217
      "var(--bs-secondary)",
218
      "var(--bs-secondary)",
219
      "var(--bs-secondary)",
220
      "var(--bs-secondary)",
221
      "var(--bs-secondary)",
222
      "var(--bs-secondary)",
223
    ],
224
    plotOptions: {
225
      bar: {
226
        borderRadius: 3,
227
        columnWidth: "45%",
228
        distributed: true,
229
        endingShape: "rounded",
230
      },
231
    },
232

233
    dataLabels: {
234
      enabled: false,
235
    },
236
    legend: {
237
      show: false,
238
    },
239
    grid: {
240
      yaxis: {
241
        lines: {
242
          show: false,
243
        },
244
      },
245
    },
246
    xaxis: {
247
      axisBorder: {
248
        show: false,
249
      },
250
      labels: {
251
        show: false,
252
      },
253
      axisTicks: {
254
        show: false,
255
      },
256
    },
257
    yaxis: {
258
      labels: {
259
        show: false,
260
      },
261
    },
262
    tooltip: {
263
      theme: "dark",
264
    },
265
  };
266

267
  var chart = new ApexCharts(
268
    document.querySelector("#widgest-chart-4"),
269
    options
270
  );
271
  chart.render();
272

273
  // =====================================
274
  // widgest-chart-5
275
  // =====================================
276
  var options = {
277
    series: [
278
      {
279
        name: "",
280
        data: [2.5, 3.7, 3.2, 2.6, 1.9, 2.5],
281
      },
282
      {
283
        name: "",
284
        data: [-2.8, -1.1, -3.2, -1.5, -1.9, -2.8],
285
      },
286
    ],
287
    chart: {
288
      toolbar: {
289
        show: false,
290
      },
291
      sparkline: {
292
        enabled: true,
293
      },
294
      type: "bar",
295
      fontFamily: "inherit",
296
      foreColor: "#adb0bb",
297
      height: 200,
298
      stacked: true,
299
    },
300
    colors: ["var(--bs-primary)", "var(--bs-primary)"],
301
    plotOptions: {
302
      bar: {
303
        horizontal: false,
304
        barHeight: "60%",
305
        columnWidth: "20%",
306
        borderRadius: [5],
307
        borderRadiusApplication: "end",
308
        borderRadiusWhenStacked: "all",
309
      },
310
    },
311
    stroke: {
312
      show: false,
313
    },
314
    dataLabels: {
315
      enabled: false,
316
    },
317
    legend: {
318
      show: false,
319
    },
320
    grid: {
321
      show: false,
322
      padding: {
323
        top: 0,
324
        right: 0,
325
        bottom: 0,
326
        left: 0,
327
      },
328
    },
329
    yaxis: {
330
      min: -5,
331
      max: 5,
332
      tickAmount: 4,
333
    },
334
    xaxis: {
335
      categories: ["Jan", "Feb", "Mar", "Apr", "May"],
336
      axisTicks: {
337
        show: false,
338
      },
339
    },
340
    tooltip: {
341
      theme: "dark",
342
    },
343
  };
344

345
  var chart = new ApexCharts(
346
    document.querySelector("#widgest-chart-5"),
347
    options
348
  );
349
  chart.render();
350

351
  // =====================================
352
  // widgest-chart-6
353
  // =====================================
354
  var options = {
355
    series: [
356
      {
357
        name: "",
358
        data: [2.5, 3.7, 3.2, 2.6, 1.9, 2.5],
359
      },
360
      {
361
        name: "",
362
        data: [-2.8, -1.1, -3.2, -1.5, -1.9, -2.8],
363
      },
364
    ],
365
    chart: {
366
      toolbar: {
367
        show: false,
368
      },
369
      sparkline: {
370
        enabled: true,
371
      },
372
      type: "bar",
373
      fontFamily: "inherit",
374
      foreColor: "#adb0bb",
375
      height: 200,
376
      stacked: true,
377
    },
378
    colors: ["var(--bs-secondary)", "var(--bs-secondary)"],
379
    plotOptions: {
380
      bar: {
381
        horizontal: false,
382
        barHeight: "60%",
383
        columnWidth: "20%",
384
        borderRadius: [5],
385
        borderRadiusApplication: "end",
386
        borderRadiusWhenStacked: "all",
387
      },
388
    },
389
    stroke: {
390
      show: false,
391
    },
392
    dataLabels: {
393
      enabled: false,
394
    },
395
    legend: {
396
      show: false,
397
    },
398
    grid: {
399
      show: false,
400
      padding: {
401
        top: 0,
402
        right: 0,
403
        bottom: 0,
404
        left: 0,
405
      },
406
    },
407
    yaxis: {
408
      min: -5,
409
      max: 5,
410
      tickAmount: 4,
411
    },
412
    xaxis: {
413
      categories: ["Jan", "Feb", "Mar", "Apr", "May"],
414
      axisTicks: {
415
        show: false,
416
      },
417
    },
418
    tooltip: {
419
      theme: "dark",
420
    },
421
  };
422

423
  var chart = new ApexCharts(
424
    document.querySelector("#widgest-chart-6"),
425
    options
426
  );
427
  chart.render();
428

429
  // =====================================
430
  // Current Year
431
  // =====================================
432
  var options = {
433
    color: "#adb5bd",
434
    series: [55, 55, 55],
435
    labels: ["Income", "Current", "Expance"],
436
    chart: {
437
      type: "donut",
438
      fontFamily: "inherit",
439
      foreColor: "#adb0bb",
440
    },
441
    plotOptions: {
442
      pie: {
443
        donut: {
444
          size: "89%",
445
          background: "transparent",
446
          labels: {
447
            show: true,
448
            name: {
449
              show: true,
450
              offsetY: 7,
451
            },
452
            value: {
453
              show: false,
454
            },
455
            total: {
456
              show: true,
457
              color: "#5A6A85",
458
              fontSize: "20px",
459
              fontWeight: "600",
460
              label: "$98,260",
461
            },
462
          },
463
        },
464
      },
465
    },
466

467
    dataLabels: {
468
      enabled: false,
469
    },
470
    stroke: {
471
      show: false,
472
    },
473
    legend: {
474
      show: false,
475
    },
476
    colors: ["var(--bs-primary)", "#EAEFF4", "var(--bs-secondary)"],
477

478
    tooltip: {
479
      theme: "dark",
480
      fillSeriesColor: false,
481
    },
482
  };
483

484
  var chart = new ApexCharts(document.querySelector("#current-year"), options);
485
  chart.render();
486

487
  // =====================================
488
  // Breakup
489
  // =====================================
490
  var options = {
491
    color: "#adb5bd",
492
    series: [38, 40, 25],
493
    labels: ["2022", "2021", "2020"],
494
    chart: {
495
      width: 180,
496
      type: "donut",
497
      fontFamily: "inherit",
498
      foreColor: "#adb0bb",
499
    },
500
    plotOptions: {
501
      pie: {
502
        startAngle: 0,
503
        endAngle: 360,
504
        donut: {
505
          size: "75%",
506
        },
507
      },
508
    },
509
    stroke: {
510
      show: false,
511
    },
512

513
    dataLabels: {
514
      enabled: false,
515
    },
516

517
    legend: {
518
      show: false,
519
    },
520
    colors: ["var(--bs-primary)", "#EAEFF4", "#F9F9FD"],
521

522
    responsive: [
523
      {
524
        breakpoint: 991,
525
        options: {
526
          chart: {
527
            width: 120,
528
          },
529
        },
530
      },
531
    ],
532
    tooltip: {
533
      theme: "dark",
534
      fillSeriesColor: false,
535
    },
536
  };
537

538
  var chart = new ApexCharts(document.querySelector("#breakup"), options);
539
  chart.render();
540

541
  // =====================================
542
  // monthly-earning
543
  // =====================================
544
  var options = {
545
    chart: {
546
      id: "monthly-earning",
547
      type: "area",
548
      height: 70,
549
      sparkline: {
550
        enabled: true,
551
      },
552
      group: "monthly-earning",
553
      fontFamily: "inherit",
554
      foreColor: "#adb0bb",
555
    },
556
    series: [
557
      {
558
        name: "Monthly Earnings",
559
        color: "var(--bs-primary)",
560
        data: [25, 66, 20, 40, 12, 58, 20],
561
      },
562
    ],
563
    stroke: {
564
      curve: "smooth",
565
      width: 2,
566
    },
567
    fill: {
568
      type: "gradient",
569
      gradient: {
570
        shadeIntensity: 0,
571
        inverseColors: false,
572
        opacityFrom: 0.12,
573
        opacityTo: 0,
574
        stops: [100],
575
      },
576
    },
577

578
    markers: {
579
      size: 0,
580
    },
581
    tooltip: {
582
      theme: "dark",
583
      fixed: {
584
        enabled: true,
585
        position: "right",
586
      },
587
      x: {
588
        show: false,
589
      },
590
    },
591
  };
592
  new ApexCharts(document.querySelector("#monthly-earning"), options).render();
593

594
  // =====================================
595
  // Most Visited
596
  // =====================================
597
  var options = {
598
    series: [
599
      {
600
        name: "San Francisco",
601
        data: [44, 55, 41, 67, 22, 43],
602
      },
603
      {
604
        name: "Diego",
605
        data: [13, 23, 20, 8, 13, 27],
606
      },
607
    ],
608
    chart: {
609
      height: 265,
610
      type: "bar",
611
      fontFamily: "inherit",
612
      foreColor: "#adb0bb",
613
      toolbar: {
614
        show: false,
615
      },
616
      stacked: true,
617
    },
618

619
    colors: ["var(--bs-primary)", "var(--bs-secondary)"],
620

621
    plotOptions: {
622
      bar: {
623
        borderRadius: [6],
624
        horizontal: false,
625
        barHeight: "60%",
626
        columnWidth: "40%",
627
        borderRadiusApplication: "end",
628
        borderRadiusWhenStacked: "all",
629
      },
630
    },
631
    stroke: {
632
      show: false,
633
    },
634

635
    dataLabels: {
636
      enabled: false,
637
    },
638

639
    legend: {
640
      show: false,
641
    },
642

643
    grid: {
644
      show: false,
645
      padding: {
646
        top: 0,
647
        right: 0,
648
        bottom: 0,
649
        left: 0,
650
      },
651
    },
652

653
    yaxis: {
654
      tickAmount: 4,
655
    },
656

657
    xaxis: {
658
      categories: ["01", "02", "03", "04", "05", "06"],
659
      axisTicks: {
660
        show: false,
661
      },
662
    },
663

664
    tooltip: {
665
      theme: "dark",
666
      fillSeriesColor: false,
667
      x: {
668
        show: false,
669
      },
670
    },
671
  };
672

673
  var chart = new ApexCharts(document.querySelector("#most-visited"), options);
674
  chart.render();
675

676
  // =====================================
677
  // Yearly Salary
678
  // =====================================
679
  var options = {
680
    series: [
681
      {
682
        name: "",
683
        data: [20, 15, 30, 25, 10, 15, 12],
684
      },
685
    ],
686

687
    chart: {
688
      toolbar: {
689
        show: false,
690
      },
691
      height: 310,
692
      type: "bar",
693

694
      fontFamily: "inherit",
695
      foreColor: "#adb0bb",
696
    },
697
    colors: [
698
      "var(--bs-primary-bg-subtle)",
699
      "var(--bs-primary-bg-subtle)",
700
      "var(--bs-primary)",
701
      "var(--bs-primary-bg-subtle)",
702
      "var(--bs-primary-bg-subtle)",
703
      "var(--bs-primary-bg-subtle)",
704
    ],
705
    plotOptions: {
706
      bar: {
707
        borderRadius: 3,
708
        columnWidth: "53%",
709
        distributed: true,
710
        endingShape: "rounded",
711
      },
712
    },
713

714
    dataLabels: {
715
      enabled: false,
716
    },
717
    legend: {
718
      show: false,
719
    },
720
    grid: {
721
      yaxis: {
722
        lines: {
723
          show: false,
724
        },
725
      },
726
      padding: {
727
        top: 0,
728
        right: 0,
729
        bottom: 0,
730
        left: 0,
731
      },
732
    },
733
    xaxis: {
734
      categories: [
735
        ["Apr"],
736
        ["May"],
737
        ["June"],
738
        ["July"],
739
        ["Aug"],
740
        ["Sept"],
741
        ["Oct"],
742
      ],
743
      axisBorder: {
744
        show: false,
745
      },
746
      axisTicks: {
747
        show: false,
748
      },
749
    },
750
    yaxis: {
751
      labels: {
752
        show: false,
753
      },
754
    },
755
    tooltip: {
756
      theme: "dark",
757
    },
758
  };
759

760
  var chart = new ApexCharts(document.querySelector("#yearly-salary"), options);
761
  chart.render();
762

763
  // =====================================
764
  // Impressions
765
  // =====================================
766
  var options = {
767
    series: [
768
      {
769
        name: "",
770
        data: [20, 15, 30, 25, 10],
771
      },
772
    ],
773

774
    chart: {
775
      toolbar: {
776
        show: false,
777
      },
778
      height: 100,
779
      type: "bar",
780
      sparkline: {
781
        enabled: true,
782
      },
783
      fontFamily: "inherit",
784
      foreColor: "#adb0bb",
785
    },
786
    colors: [
787
      "var(--bs-secondary-bg-subtle)",
788
      "var(--bs-secondary-bg-subtle)",
789
      "var(--bs-secondary)",
790
      "var(--bs-secondary-bg-subtle)",
791
      "var(--bs-secondary-bg-subtle)",
792
    ],
793
    plotOptions: {
794
      bar: {
795
        borderRadius: 3,
796
        columnWidth: "64%",
797
        distributed: true,
798
        endingShape: "rounded",
799
      },
800
    },
801

802
    dataLabels: {
803
      enabled: false,
804
    },
805
    legend: {
806
      show: false,
807
    },
808
    grid: {
809
      yaxis: {
810
        lines: {
811
          show: false,
812
        },
813
      },
814
    },
815
    xaxis: {
816
      axisBorder: {
817
        show: false,
818
      },
819
      labels: {
820
        show: false,
821
      },
822
      axisTicks: {
823
        show: false,
824
      },
825
    },
826
    yaxis: {
827
      labels: {
828
        show: false,
829
      },
830
    },
831
    tooltip: {
832
      theme: "dark",
833
    },
834
  };
835

836
  var chart = new ApexCharts(document.querySelector("#impressions"), options);
837
  chart.render();
838

839
  // =====================================
840
  // Customers
841
  // =====================================
842
  var options = {
843
    chart: {
844
      id: "customers",
845
      type: "area",
846
      height: 80,
847
      sparkline: {
848
        enabled: true,
849
      },
850
      group: "customers",
851
      fontFamily: "inherit",
852
      foreColor: "#adb0bb",
853
    },
854

855
    series: [
856
      {
857
        name: "",
858
        color: "var(--bs-secondary)",
859
        data: [30, 25, 35, 20, 30, 40],
860
      },
861
    ],
862
    stroke: {
863
      curve: "smooth",
864
      width: 2,
865
    },
866
    fill: {
867
      type: "gradient",
868
      gradient: {
869
        shadeIntensity: 0,
870
        inverseColors: false,
871
        opacityFrom: 0.12,
872
        opacityTo: 0,
873
        stops: [20, 180],
874
      },
875
    },
876

877
    markers: {
878
      size: 0,
879
    },
880
    tooltip: {
881
      theme: "dark",
882
      fixed: {
883
        enabled: true,
884
        position: "right",
885
      },
886
      x: {
887
        show: false,
888
      },
889
    },
890
  };
891
  new ApexCharts(document.querySelector("#customers"), options).render();
892

893
  // =====================================
894
  // Projects
895
  // =====================================
896
  var options = {
897
    series: [
898
      {
899
        name: "",
900
        data: [4, 10, 9, 7, 9, 10],
901
      },
902
    ],
903

904
    chart: {
905
      toolbar: {
906
        show: false,
907
      },
908
      height: 80,
909
      type: "bar",
910
      sparkline: {
911
        enabled: true,
912
      },
913
      fontFamily: "inherit",
914
      foreColor: "#adb0bb",
915
    },
916
    colors: [
917
      "var(--bs-primary)",
918
    ],
919
    plotOptions: {
920
      bar: {
921
        borderRadius: 4,
922
        columnWidth: "30%",
923
        distributed: true,
924
        endingShape: "all",
925
        borderRadiusApplication: "end",
926
      },
927
    },
928

929
    dataLabels: {
930
      enabled: false,
931
    },
932
    legend: {
933
      show: false,
934
    },
935
    grid: {
936
      yaxis: {
937
        lines: {
938
          show: false,
939
        },
940
      },
941
      padding: {
942
        top: 0,
943
        right: 0,
944
        bottom: 0,
945
        left: 0,
946
      },
947
    },
948
    xaxis: {
949
      axisBorder: {
950
        show: false,
951
      },
952
      labels: {
953
        show: false,
954
      },
955
      axisTicks: {
956
        show: false,
957
      },
958
    },
959
    yaxis: {
960
      labels: {
961
        show: false,
962
      },
963
    },
964
    tooltip: {
965
      theme: "dark",
966
    },
967
  };
968

969
  var chart = new ApexCharts(document.querySelector("#projects"), options);
970
  chart.render();
971

972
  // =====================================
973
  // Revenue Updates
974
  // =====================================
975
  var options = {
976
    series: [
977
      {
978
        name: "Footware",
979
        data: [2.5, 2.7, 3.2, 2.6, 1.9, 2.1],
980
      },
981
      {
982
        name: "Fashionware",
983
        data: [-2.8, -1.1, -3.0, -1.5, -1.9, -1.2],
984
      },
985
    ],
986
    chart: {
987
      height: 320,
988
      type: "bar",
989
      foreColor: "#adb0bb",
990
      fontFamily: "inherit",
991
      toolbar: {
992
        show: false,
993
      },
994

995
      stacked: true,
996
    },
997
    colors: ["var(--bs-primary)", "var(--bs-secondary)"],
998
    plotOptions: {
999
      bar: {
1000
        horizontal: false,
1001
        barHeight: "60%",
1002
        columnWidth: "20%",
1003
        borderRadius: [5],
1004
        borderRadiusApplication: "end",
1005
        borderRadiusWhenStacked: "all",
1006
      },
1007
    },
1008
    stroke: {
1009
      show: false,
1010
    },
1011
    dataLabels: {
1012
      enabled: false,
1013
    },
1014
    legend: {
1015
      show: false,
1016
    },
1017
    grid: {
1018
      show: false,
1019
      padding: {
1020
        top: 0,
1021
        right: 0,
1022
        bottom: 0,
1023
        left: 0,
1024
      },
1025
    },
1026
    yaxis: {
1027
      min: -5,
1028
      max: 5,
1029
      tickAmount: 4,
1030
    },
1031
    xaxis: {
1032
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "June"],
1033
      axisTicks: {
1034
        show: false,
1035
      },
1036
    },
1037
    tooltip: {
1038
      theme: "dark",
1039
    },
1040
  };
1041

1042
  var chart = new ApexCharts(
1043
    document.querySelector("#revenue-updates"),
1044
    options
1045
  );
1046
  chart.render();
1047

1048
  // =====================================
1049
  // Sales Overview
1050
  // =====================================
1051
  var options = {
1052
    color: "#adb5bd",
1053
    series: [38, 40, 25],
1054
    labels: ["Expance", "Revenue", "Profit"],
1055
    chart: {
1056
      type: "donut",
1057
      fontFamily: "inherit",
1058
      foreColor: "#adb0bb",
1059
    },
1060
    plotOptions: {
1061
      pie: {
1062
        donut: {
1063
          size: "89%",
1064
          background: "transparent",
1065
          labels: {
1066
            show: true,
1067
            name: {
1068
              show: true,
1069
              offsetY: 7,
1070
            },
1071
            value: {
1072
              show: false,
1073
            },
1074
            total: {
1075
              show: true,
1076
              color: "#5A6A85",
1077
              fontSize: "20px",
1078
              fontWeight: "600",
1079
              label: "$500,458",
1080
            },
1081
          },
1082
        },
1083
      },
1084
    },
1085

1086
    dataLabels: {
1087
      enabled: false,
1088
    },
1089
    stroke: {
1090
      show: false,
1091
    },
1092
    legend: {
1093
      show: false,
1094
    },
1095
    colors: ["var(--bs-secondary)", "#EAEFF4", "var(--bs-primary)"],
1096

1097
    tooltip: {
1098
      theme: "dark",
1099
      fillSeriesColor: false,
1100
    },
1101
  };
1102

1103
  var chart = new ApexCharts(
1104
    document.querySelector("#sales-overview"),
1105
    options
1106
  );
1107
  chart.render();
1108
});
1109