diff --git a/.changeset/active-users-chart-size.md b/.changeset/active-users-chart-size.md
new file mode 100644
index 000000000..5f36e0fa9
--- /dev/null
+++ b/.changeset/active-users-chart-size.md
@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Updated the `active-users-2` card chart include to use `chart-id="active-users-2"` with `height="11"` for a more compact layout.
diff --git a/core/scss/vendor/_apexcharts.scss b/core/scss/vendor/_apexcharts.scss
index 5cef5f1a4..0b1cc3ccf 100644
--- a/core/scss/vendor/_apexcharts.scss
+++ b/core/scss/vendor/_apexcharts.scss
@@ -26,10 +26,6 @@
   font-size: 16px !important;
 }
 
-.apexcharts-text {
-  fill: var(--#{$prefix}body-color) !important;
-}
-
 .apexcharts-gridline {
   stroke: var(--#{$prefix}border-color) !important;
 }
diff --git a/shared/data/charts.json b/shared/data/charts.json
index da46c49ae..759431758 100644
--- a/shared/data/charts.json
+++ b/shared/data/charts.json
@@ -15,86 +15,18 @@
     "height": 10,
     "sparkline": true,
     "datetime": true,
-    "stroke-width": [
-      2,
-      1
-    ],
-    "stroke-dash": [
-      0,
-      3
-    ],
+    "stroke-width": [2, 1],
+    "stroke-dash": [0, 3],
     "series": [
       {
         "name": "Visitors",
         "color": "primary",
-        "data": [
-          7687,
-          7543,
-          7545,
-          7543,
-          7635,
-          8140,
-          7810,
-          8315,
-          8379,
-          8441,
-          8485,
-          8227,
-          8906,
-          8561,
-          8333,
-          8551,
-          9305,
-          9647,
-          9359,
-          9840,
-          9805,
-          8612,
-          8970,
-          8097,
-          8070,
-          9829,
-          10545,
-          10754,
-          10270,
-          9282
-        ]
+        "data": [7687, 7543, 7545, 7543, 7635, 8140, 7810, 8315, 8379, 8441, 8485, 8227, 8906, 8561, 8333, 8551, 9305, 9647, 9359, 9840, 9805, 8612, 8970, 8097, 8070, 9829, 10545, 10754, 10270, 9282]
       },
       {
         "name": "Visitors last month",
         "color": "gray-400",
-        "data": [
-          8630,
-          9389,
-          8427,
-          9669,
-          8736,
-          8261,
-          8037,
-          8922,
-          9758,
-          8592,
-          8976,
-          9459,
-          8125,
-          8528,
-          8027,
-          8256,
-          8670,
-          9384,
-          9813,
-          8425,
-          8162,
-          8024,
-          8897,
-          9284,
-          8972,
-          8776,
-          8121,
-          9476,
-          8281,
-          9065
-        ]
+        "data": [8630, 9389, 8427, 9669, 8736, 8261, 8037, 8922, 9758, 8592, 8976, 9459, 8125, 8528, 8027, 8256, 8670, 9384, 9813, 8425, 8162, 8024, 8897, 9284, 8972, 8776, 8121, 9476, 8281, 9065]
       }
     ]
   },
@@ -106,110 +38,17 @@
       {
         "name": "Mobile",
         "color": "primary",
-        "data": [
-          4164,
-          4652,
-          4817,
-          4841,
-          4920,
-          5439,
-          5486,
-          5498,
-          5512,
-          5538,
-          5841,
-          5877,
-          6086,
-          6146,
-          6199,
-          6431,
-          6704,
-          7939,
-          8127,
-          8296,
-          8322,
-          8389,
-          8411,
-          8502,
-          8868,
-          8977,
-          9273,
-          9325,
-          9345,
-          9430
-        ]
+        "data": [4164, 4652, 4817, 4841, 4920, 5439, 5486, 5498, 5512, 5538, 5841, 5877, 6086, 6146, 6199, 6431, 6704, 7939, 8127, 8296, 8322, 8389, 8411, 8502, 8868, 8977, 9273, 9325, 9345, 9430]
       },
       {
         "name": "Desktop",
         "color": "azure",
-        "data": [
-          2164,
-          2292,
-          2386,
-          2430,
-          2528,
-          3045,
-          3255,
-          3295,
-          3481,
-          3604,
-          3688,
-          3840,
-          3932,
-          3949,
-          4003,
-          4298,
-          4424,
-          4869,
-          4922,
-          4973,
-          5155,
-          5267,
-          5566,
-          5689,
-          5692,
-          5758,
-          5773,
-          5799,
-          5960,
-          6000
-        ]
+        "data": [2164, 2292, 2386, 2430, 2528, 3045, 3255, 3295, 3481, 3604, 3688, 3840, 3932, 3949, 4003, 4298, 4424, 4869, 4922, 4973, 5155, 5267, 5566, 5689, 5692, 5758, 5773, 5799, 5960, 6000]
       },
       {
         "name": "Tablet",
         "color": "green",
-        "data": [
-          1069,
-          1089,
-          1125,
-          1141,
-          1162,
-          1179,
-          1185,
-          1216,
-          1274,
-          1322,
-          1346,
-          1395,
-          1439,
-          1564,
-          1581,
-          1590,
-          1656,
-          1815,
-          1868,
-          2010,
-          2133,
-          2179,
-          2264,
-          2265,
-          2278,
-          2343,
-          2354,
-          2456,
-          2472,
-          2480
-        ]
+        "data": [1069, 1089, 1125, 1141, 1162, 1179, 1185, 1216, 1274, 1322, 1346, 1395, 1439, 1564, 1581, 1590, 1656, 1815, 1868, 2010, 2133, 2179, 2264, 2265, 2278, 2343, 2354, 2456, 2472, 2480]
       }
     ]
   },
@@ -248,81 +87,33 @@
     "legend": true,
     "horizontal": true,
     "stacked": true,
-    "categories": [
-      2008,
-      2009,
-      2010,
-      2011,
-      2012,
-      2013,
-      2014
-    ],
+    "categories": [2008, 2009, 2010, 2011, 2012, 2013, 2014],
     "x-formatter": "val + \"K\"",
     "series": [
       {
         "name": "Container for a Fanta",
         "color": "purple",
-        "data": [
-          44,
-          55,
-          41,
-          37,
-          22,
-          43,
-          21
-        ]
+        "data": [44, 55, 41, 37, 22, 43, 21]
       },
       {
         "name": "Strange sunglasses",
         "color": "green",
-        "data": [
-          53,
-          32,
-          33,
-          52,
-          13,
-          43,
-          32
-        ]
+        "data": [53, 32, 33, 52, 13, 43, 32]
       },
       {
         "name": "Pen Pineapple Apple Pen",
         "color": "yellow",
-        "data": [
-          12,
-          17,
-          11,
-          9,
-          15,
-          11,
-          20
-        ]
+        "data": [12, 17, 11, 9, 15, 11, 20]
       },
       {
         "name": "Binoculars",
         "color": "red",
-        "data": [
-          9,
-          7,
-          5,
-          8,
-          6,
-          9,
-          4
-        ]
+        "data": [9, 7, 5, 8, 6, 9, 4]
       },
       {
         "name": "Magical notebook",
         "color": "primary",
-        "data": [
-          25,
-          12,
-          19,
-          32,
-          25,
-          24,
-          10
-        ]
+        "data": [25, 12, 19, 32, 25, 24, 10]
       }
     ]
   },
@@ -334,28 +125,12 @@
       {
         "name": "series1",
         "color": "primary",
-        "data": [
-          56,
-          40,
-          39,
-          47,
-          34,
-          48,
-          44
-        ]
+        "data": [56, 40, 39, 47, 34, 48, 44]
       },
       {
         "name": "series2",
         "color": "purple",
-        "data": [
-          45,
-          43,
-          30,
-          23,
-          38,
-          39,
-          54
-        ]
+        "data": [45, 43, 30, 23, 38, 39, 54]
       }
     ]
   },
@@ -368,56 +143,17 @@
       {
         "name": "Session Duration",
         "color": "yellow",
-        "data": [
-          117,
-          92,
-          94,
-          98,
-          75,
-          110,
-          69,
-          80,
-          109,
-          113,
-          115,
-          95
-        ]
+        "data": [117, 92, 94, 98, 75, 110, 69, 80, 109, 113, 115, 95]
       },
       {
         "name": "Page Views",
         "color": "green",
-        "data": [
-          59,
-          80,
-          61,
-          66,
-          70,
-          84,
-          87,
-          64,
-          94,
-          56,
-          55,
-          67
-        ]
+        "data": [59, 80, 61, 66, 70, 84, 87, 64, 94, 56, 55, 67]
       },
       {
         "name": "Total Visits",
         "color": "primary",
-        "data": [
-          53,
-          51,
-          52,
-          41,
-          46,
-          60,
-          45,
-          43,
-          30,
-          50,
-          58,
-          59
-        ]
+        "data": [53, 51, 52, 41, 46, 60, 45, 43, 30, 50, 58, 59]
       }
     ]
   },
@@ -434,173 +170,21 @@
         "name": "Facebook",
         "color": "facebook",
         "data": [
-          13281,
-          8521,
-          15038,
-          9983,
-          15417,
-          8888,
-          7052,
-          14270,
-          5214,
-          9587,
-          5950,
-          16852,
-          17836,
-          12217,
-          17406,
-          12262,
-          9147,
-          14961,
-          18292,
-          15230,
-          13435,
-          10649,
-          5140,
-          13680,
-          4508,
-          13271,
-          13413,
-          5543,
-          18727,
-          18238,
-          18175,
-          6246,
-          5864,
-          17847,
-          9170,
-          6445,
-          12945,
-          8142,
-          8980,
-          10422,
-          15535,
-          11569,
-          10114,
-          17621,
-          16138,
-          13046,
-          6652,
-          9906,
-          14100,
-          16495,
-          6749
+          13281, 8521, 15038, 9983, 15417, 8888, 7052, 14270, 5214, 9587, 5950, 16852, 17836, 12217, 17406, 12262, 9147, 14961, 18292, 15230, 13435, 10649, 5140, 13680, 4508, 13271, 13413, 5543, 18727, 18238, 18175, 6246, 5864, 17847, 9170, 6445, 12945, 8142, 8980, 10422, 15535, 11569, 10114, 17621, 16138, 13046, 6652,
+          9906, 14100, 16495, 6749
         ]
       },
       {
         "name": "Twitter",
         "color": "twitter",
         "data": [
-          3680,
-          1862,
-          3070,
-          2252,
-          5348,
-          3091,
-          3000,
-          3984,
-          5176,
-          5325,
-          2420,
-          5474,
-          3098,
-          1893,
-          3748,
-          2879,
-          4197,
-          5186,
-          4213,
-          4334,
-          2807,
-          1594,
-          4863,
-          2030,
-          3752,
-          4856,
-          5341,
-          3954,
-          3461,
-          3097,
-          3404,
-          4949,
-          2283,
-          3227,
-          3630,
-          2360,
-          3477,
-          4675,
-          1901,
-          2252,
-          3347,
-          2954,
-          5029,
-          2079,
-          2830,
-          3292,
-          4578,
-          3401,
-          4104,
-          3749,
-          4457,
-          3734
+          3680, 1862, 3070, 2252, 5348, 3091, 3000, 3984, 5176, 5325, 2420, 5474, 3098, 1893, 3748, 2879, 4197, 5186, 4213, 4334, 2807, 1594, 4863, 2030, 3752, 4856, 5341, 3954, 3461, 3097, 3404, 4949, 2283, 3227, 3630, 2360, 3477, 4675, 1901, 2252, 3347, 2954, 5029, 2079, 2830, 3292, 4578, 3401, 4104, 3749, 4457, 3734
         ]
       },
       {
         "name": "Dribbble",
         "color": "dribbble",
-        "data": [
-          722,
-          1866,
-          961,
-          1108,
-          1110,
-          561,
-          1753,
-          1815,
-          1985,
-          776,
-          859,
-          547,
-          1488,
-          766,
-          702,
-          621,
-          1599,
-          1372,
-          1620,
-          963,
-          759,
-          764,
-          739,
-          789,
-          1696,
-          1454,
-          1842,
-          734,
-          551,
-          1689,
-          1924,
-          1875,
-          908,
-          1675,
-          1541,
-          1953,
-          534,
-          502,
-          1524,
-          1867,
-          719,
-          1472,
-          1608,
-          1025,
-          889,
-          1150,
-          654,
-          1695,
-          1662,
-          1285,
-          1787
-        ]
+        "data": [722, 1866, 961, 1108, 1110, 561, 1753, 1815, 1985, 776, 859, 547, 1488, 766, 702, 621, 1599, 1372, 1620, 963, 759, 764, 739, 789, 1696, 1454, 1842, 734, 551, 1689, 1924, 1875, 908, 1675, 1541, 1953, 534, 502, 1524, 1867, 719, 1472, 1608, 1025, 889, 1150, 654, 1695, 1662, 1285, 1787]
       }
     ]
   },
@@ -612,132 +196,18 @@
     "series": [
       {
         "name": "Web",
-        "data": [
-          1,
-          0,
-          0,
-          0,
-          0,
-          1,
-          1,
-          0,
-          0,
-          0,
-          2,
-          12,
-          5,
-          8,
-          22,
-          6,
-          8,
-          6,
-          4,
-          1,
-          8,
-          24,
-          29,
-          51,
-          40,
-          47,
-          23,
-          26,
-          50,
-          26,
-          41,
-          22,
-          46,
-          47,
-          81,
-          46,
-          6
-        ],
+        "data": [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23, 26, 50, 26, 41, 22, 46, 47, 81, 46, 6],
         "color": "primary"
       },
       {
         "name": "Social",
-        "data": [
-          2,
-          5,
-          4,
-          3,
-          3,
-          1,
-          4,
-          7,
-          5,
-          1,
-          2,
-          5,
-          3,
-          2,
-          6,
-          7,
-          7,
-          1,
-          5,
-          5,
-          2,
-          12,
-          4,
-          6,
-          18,
-          3,
-          5,
-          2,
-          13,
-          15,
-          20,
-          47,
-          18,
-          15,
-          11,
-          10,
-          0
-        ],
+        "data": [2, 5, 4, 3, 3, 1, 4, 7, 5, 1, 2, 5, 3, 2, 6, 7, 7, 1, 5, 5, 2, 12, 4, 6, 18, 3, 5, 2, 13, 15, 20, 47, 18, 15, 11, 10, 0],
         "color": "primary",
         "color-opacity": "80%"
       },
       {
         "name": "Other",
-        "data": [
-          2,
-          9,
-          1,
-          7,
-          8,
-          3,
-          6,
-          5,
-          5,
-          4,
-          6,
-          4,
-          1,
-          9,
-          3,
-          6,
-          7,
-          5,
-          2,
-          8,
-          4,
-          9,
-          1,
-          2,
-          6,
-          7,
-          5,
-          1,
-          8,
-          3,
-          2,
-          3,
-          4,
-          9,
-          7,
-          1,
-          6
-        ],
+        "data": [2, 9, 1, 7, 8, 3, 6, 5, 5, 4, 6, 4, 1, 9, 3, 6, 7, 5, 2, 8, 4, 9, 1, 2, 6, 7, 5, 1, 8, 3, 2, 3, 4, 9, 7, 1, 6],
         "color": "green",
         "color-opacity": "80%"
       }
@@ -750,15 +220,7 @@
     "series": [
       {
         "name": "Tasks completion",
-        "data": [
-          155,
-          65,
-          465,
-          265,
-          225,
-          325,
-          80
-        ]
+        "data": [155, 65, 465, 265, 225, 325, 80]
       }
     ]
   },
@@ -802,26 +264,10 @@
     "type": "bar",
     "series": [
       {
-        "data": [
-          155,
-          65,
-          465,
-          265,
-          225,
-          325,
-          80
-        ]
+        "data": [155, 65, 465, 265, 225, 325, 80]
       },
       {
-        "data": [
-          113,
-          42,
-          65,
-          54,
-          76,
-          65,
-          35
-        ],
+        "data": [113, 42, 65, 54, 76, 65, 35],
         "color": "red"
       }
     ]
@@ -874,32 +320,7 @@
     "series": [
       {
         "name": "A",
-        "data": [
-          44,
-          32,
-          48,
-          72,
-          60,
-          16,
-          44,
-          32,
-          78,
-          50,
-          68,
-          34,
-          26,
-          48,
-          72,
-          60,
-          84,
-          64,
-          74,
-          52,
-          62,
-          50,
-          32,
-          22
-        ]
+        "data": [44, 32, 48, 72, 60, 16, 44, 32, 78, 50, 68, 34, 26, 48, 72, 60, 84, 64, 74, 52, 62, 50, 32, 22]
       }
     ]
   },
@@ -930,30 +351,8 @@
   "tasks": {
     "demo": true,
     "type": "line",
-    "categories": [
-      "M",
-      "T",
-      "W",
-      "T",
-      "F",
-      "S",
-      "S",
-      "M",
-      "T",
-      "W",
-      "T",
-      "F",
-      "S",
-      "S",
-      "M",
-      "T",
-      "W"
-    ],
-    "groups": [
-      1,
-      2,
-      3
-    ],
+    "categories": ["M", "T", "W", "T", "F", "S", "S", "M", "T", "W", "T", "F", "S", "S", "M", "T", "W"],
+    "groups": [1, 2, 3],
     "hide-points": true,
     "fill": true,
     "remove-padding": true,
@@ -962,81 +361,23 @@
       {
         "name": "New",
         "color": "primary",
-        "data": [
-          0,
-          0,
-          1,
-          2,
-          21,
-          9,
-          12,
-          10,
-          31,
-          13,
-          65,
-          10,
-          12,
-          6,
-          4,
-          3,
-          0
-        ]
+        "data": [0, 0, 1, 2, 21, 9, 12, 10, 31, 13, 65, 10, 12, 6, 4, 3, 0]
       },
       {
         "name": "Completed",
         "color": "lime",
-        "data": [
-          0,
-          0,
-          1,
-          2,
-          7,
-          5,
-          6,
-          8,
-          24,
-          7,
-          12,
-          5,
-          6,
-          3,
-          2,
-          2,
-          0
-        ]
+        "data": [0, 0, 1, 2, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 2, 2, 0]
       },
       {
         "name": "Closed",
         "color": "orange",
-        "data": [
-          0,
-          0,
-          1,
-          0,
-          2,
-          0,
-          1,
-          0,
-          2,
-          3,
-          0,
-          2,
-          3,
-          2,
-          1,
-          0,
-          0
-        ]
+        "data": [0, 0, 1, 0, 2, 0, 1, 0, 2, 3, 0, 2, 3, 2, 1, 0, 0]
       }
     ]
   },
   "development-activity": {
     "type": "area",
-    "groups": [
-      1,
-      2,
-      3
-    ],
+    "groups": [1, 2, 3],
     "hide-points": true,
     "remove-padding": true,
     "sparkline": true,
@@ -1045,38 +386,7 @@
       {
         "name": "Purchases",
         "color": "primary",
-        "data": [
-          3,
-          5,
-          4,
-          6,
-          7,
-          5,
-          6,
-          8,
-          24,
-          7,
-          12,
-          5,
-          6,
-          3,
-          8,
-          4,
-          14,
-          30,
-          17,
-          19,
-          15,
-          14,
-          25,
-          32,
-          40,
-          55,
-          60,
-          48,
-          52,
-          70
-        ]
+        "data": [3, 5, 4, 6, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 8, 4, 14, 30, 17, 19, 15, 14, 25, 32, 40, 55, 60, 48, 52, 70]
       }
     ]
   },
@@ -1088,126 +398,8 @@
         "name": "Uptime",
         "color": "primary",
         "data": [
-          150,
-          160,
-          170,
-          161,
-          167,
-          162,
-          161,
-          152,
-          141,
-          144,
-          154,
-          166,
-          176,
-          187,
-          198,
-          210,
-          196,
-          207,
-          200,
-          187,
-          192,
-          204,
-          193,
-          204,
-          208,
-          196,
-          193,
-          178,
-          191,
-          204,
-          218,
-          211,
-          218,
-          216,
-          201,
-          197,
-          190,
-          179,
-          172,
-          158,
-          159,
-          147,
-          152,
-          152,
-          144,
-          137,
-          136,
-          123,
-          112,
-          99,
-          100,
-          95,
-          105,
-          116,
-          125,
-          124,
-          133,
-          129,
-          116,
-          119,
-          109,
-          114,
-          115,
-          111,
-          96,
-          104,
-          104,
-          102,
-          116,
-          126,
-          117,
-          130,
-          124,
-          126,
-          131,
-          143,
-          130,
-          116,
-          118,
-          122,
-          132,
-          126,
-          136,
-          123,
-          112,
-          116,
-          113,
-          113,
-          109,
-          99,
-          100,
-          95,
-          83,
-          79,
-          64,
-          79,
-          81,
-          94,
-          99,
-          97,
-          83,
-          71,
-          75,
-          69,
-          71,
-          75,
-          84,
-          90,
-          100,
-          96,
-          108,
-          102,
-          116,
-          112,
-          112,
-          102,
-          115,
-          120,
-          118,
-          118
+          150, 160, 170, 161, 167, 162, 161, 152, 141, 144, 154, 166, 176, 187, 198, 210, 196, 207, 200, 187, 192, 204, 193, 204, 208, 196, 193, 178, 191, 204, 218, 211, 218, 216, 201, 197, 190, 179, 172, 158, 159, 147, 152, 152, 144, 137, 136, 123, 112, 99, 100, 95, 105, 116, 125, 124, 133, 129, 116, 119, 109, 114,
+          115, 111, 96, 104, 104, 102, 116, 126, 117, 130, 124, 126, 131, 143, 130, 116, 118, 122, 132, 126, 136, 123, 112, 116, 113, 113, 109, 99, 100, 95, 83, 79, 64, 79, 81, 94, 99, 97, 83, 71, 75, 69, 71, 75, 84, 90, 100, 96, 108, 102, 116, 112, 112, 102, 115, 120, 118, 118
         ]
       }
     ]
@@ -1220,82 +412,28 @@
       {
         "name": "Uptime incidents",
         "color": "red",
-        "data": [
-          1,
-          2,
-          6,
-          3,
-          1,
-          1,
-          2,
-          5,
-          2,
-          5,
-          6,
-          2,
-          4,
-          3,
-          4,
-          5,
-          4,
-          3,
-          2,
-          1,
-          2,
-          0,
-          2,
-          1,
-          1
-        ]
+        "data": [1, 2, 6, 3, 1, 1, 2, 5, 2, 5, 6, 2, 4, 3, 4, 5, 4, 3, 2, 1, 2, 0, 2, 1, 1]
       }
     ]
   },
   "line": {
     "type": "line",
-    "categories": [
-      "2013",
-      "2014",
-      "2015",
-      "2016",
-      "2017",
-      "2018"
-    ],
+    "categories": ["2013", "2014", "2015", "2016", "2017", "2018"],
     "series": [
       {
         "name": "Development",
         "color": "orange",
-        "data": [
-          2,
-          8,
-          6,
-          7,
-          14,
-          11
-        ]
+        "data": [2, 8, 6, 7, 14, 11]
       },
       {
         "name": "Marketing",
         "color": "primary",
-        "data": [
-          5,
-          15,
-          11,
-          15,
-          21,
-          25
-        ]
+        "data": [5, 15, 11, 15, 21, 25]
       },
       {
         "name": "Sales",
         "color": "green",
-        "data": [
-          17,
-          18,
-          21,
-          20,
-          30,
-          29
-        ]
+        "data": [17, 18, 21, 20, 30, 29]
       }
     ]
   },
@@ -1303,54 +441,22 @@
     "demo": true,
     "type": "line",
     "stroke-curve": "straight",
-    "categories": [
-      "2013",
-      "2014",
-      "2015",
-      "2016",
-      "2017",
-      "2018",
-      "2019"
-    ],
+    "categories": ["2013", "2014", "2015", "2016", "2017", "2018", "2019"],
     "series": [
       {
         "name": "Development",
         "color": "orange",
-        "data": [
-          8,
-          10,
-          11,
-          12,
-          20,
-          27,
-          30
-        ]
+        "data": [8, 10, 11, 12, 20, 27, 30]
       },
       {
         "name": "Marketing",
         "color": "primary",
-        "data": [
-          3,
-          16,
-          17,
-          19,
-          20,
-          30,
-          30
-        ]
+        "data": [3, 16, 17, 19, 20, 30, 30]
       },
       {
         "name": "Sales",
         "color": "green",
-        "data": [
-          7,
-          10,
-          11,
-          18,
-          18,
-          18,
-          24
-        ]
+        "data": [7, 10, 11, 18, 18, 18, 24]
       }
     ]
   },
@@ -1362,19 +468,7 @@
       {
         "name": "Development",
         "color": "orange",
-        "data": [
-          34,
-          44,
-          54,
-          21,
-          12,
-          43,
-          33,
-          23,
-          66,
-          66,
-          58
-        ]
+        "data": [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
       }
     ]
   },
@@ -1384,94 +478,34 @@
     "show-labels": true,
     "show-data-labels": true,
     "show-markers": true,
-    "categories": [
-      "Jan",
-      "Feb",
-      "Mar",
-      "Apr",
-      "May",
-      "Jun",
-      "Jul",
-      "Aug",
-      "Sep",
-      "Oct",
-      "Nov",
-      "Dec"
-    ],
+    "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
     "series": [
       {
         "name": "Tokyo",
         "color": "primary",
-        "data": [
-          7,
-          6.9,
-          9.5,
-          14.5,
-          18.4,
-          21.5,
-          25.2,
-          26.5,
-          23.3,
-          18.3,
-          13.9,
-          9.6
-        ]
+        "data": [7, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
       },
       {
         "name": "London",
         "color": "green",
-        "data": [
-          3.9,
-          4.2,
-          5.7,
-          8.5,
-          11.9,
-          15.2,
-          17,
-          16.6,
-          14.2,
-          10.3,
-          6.6,
-          4.8
-        ]
+        "data": [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17, 16.6, 14.2, 10.3, 6.6, 4.8]
       }
     ]
   },
   "area": {
     "demo": true,
     "type": "area",
-    "categories": [
-      "Jan",
-      "Feb",
-      "Mar",
-      "Apr",
-      "May",
-      "Jun"
-    ],
+    "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
     "series": [
       {
         "name": "Maximum",
         "color": "primary",
-        "data": [
-          11,
-          8,
-          15,
-          18,
-          19,
-          17
-        ]
+        "data": [11, 8, 15, 18, 19, 17]
       },
       {
         "name": "Minimum",
         "color": "pink",
-        "data": [
-          7,
-          7,
-          5,
-          7,
-          9,
-          12
-        ]
+        "data": [7, 7, 5, 7, 9, 12]
       }
     ]
   },
@@ -1479,38 +513,17 @@
     "demo": true,
     "type": "area",
     "spline": true,
-    "categories": [
-      "Jan",
-      "Feb",
-      "Mar",
-      "Apr",
-      "May",
-      "Jun"
-    ],
+    "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
     "series": [
       {
         "name": "Maximum",
         "color": "primary",
-        "data": [
-          11,
-          8,
-          15,
-          18,
-          19,
-          17
-        ]
+        "data": [11, 8, 15, 18, 19, 17]
       },
       {
         "name": "Minimum",
         "color": "pink",
-        "data": [
-          7,
-          7,
-          5,
-          7,
-          9,
-          12
-        ]
+        "data": [7, 7, 5, 7, 9, 12]
       }
     ]
   },
@@ -1519,38 +532,17 @@
     "type": "area",
     "spline": true,
     "stacked": true,
-    "categories": [
-      "Jan",
-      "Feb",
-      "Mar",
-      "Apr",
-      "May",
-      "Jun"
-    ],
+    "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
     "series": [
       {
         "name": "Maximum",
         "color": "primary",
-        "data": [
-          11,
-          8,
-          15,
-          18,
-          19,
-          17
-        ]
+        "data": [11, 8, 15, 18, 19, 17]
       },
       {
         "name": "Minimum",
         "color": "pink",
-        "data": [
-          7,
-          7,
-          5,
-          7,
-          9,
-          12
-        ]
+        "data": [7, 7, 5, 7, 9, 12]
       }
     ]
   },
@@ -1559,124 +551,17 @@
     "type": "line",
     "spline": true,
     "show-labels": true,
-    "categories": [
-      "Jan",
-      "Feb",
-      "Mar",
-      "Apr",
-      "May",
-      "Jun"
-    ],
+    "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
     "series": [
       {
         "name": "Hestavollane",
         "color": "primary",
-        "data": [
-          0.2,
-          0.8,
-          0.8,
-          0.8,
-          1,
-          1.3,
-          1.5,
-          2.9,
-          1.9,
-          2.6,
-          1.6,
-          3,
-          4,
-          3.6,
-          4.5,
-          4.2,
-          4.5,
-          4.5,
-          4,
-          3.1,
-          2.7,
-          4,
-          2.7,
-          2.3,
-          2.3,
-          4.1,
-          7.7,
-          7.1,
-          5.6,
-          6.1,
-          5.8,
-          8.6,
-          7.2,
-          9,
-          10.9,
-          11.5,
-          11.6,
-          11.1,
-          12,
-          12.3,
-          10.7,
-          9.4,
-          9.8,
-          9.6,
-          9.8,
-          9.5,
-          8.5,
-          7.4,
-          7.6
-        ]
+        "data": [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
       },
       {
         "name": "Vik",
         "color": "green",
-        "data": [
-          0,
-          0,
-          0.6,
-          0.9,
-          0.8,
-          0.2,
-          0,
-          0,
-          0,
-          0.1,
-          0.6,
-          0.7,
-          0.8,
-          0.6,
-          0.2,
-          0,
-          0.1,
-          0.3,
-          0.3,
-          0,
-          0.1,
-          0,
-          0,
-          0,
-          0.2,
-          0.1,
-          0,
-          0.3,
-          0,
-          0.1,
-          0.2,
-          0.1,
-          0.3,
-          0.3,
-          0,
-          3.1,
-          3.1,
-          2.5,
-          1.5,
-          1.9,
-          2.1,
-          1,
-          2.3,
-          1.9,
-          1.2,
-          0.7,
-          1.3,
-          0.4,
-          0.3
-        ]
+        "data": [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
       }
     ]
   },
@@ -1730,38 +615,17 @@
   "scatter": {
     "demo": true,
     "type": "scatter",
-    "categories": [
-      "Jan",
-      "Feb",
-      "Mar",
-      "Apr",
-      "May",
-      "Jun"
-    ],
+    "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
     "series": [
       {
         "name": "Maximum",
         "color": "primary",
-        "data": [
-          11,
-          8,
-          15,
-          18,
-          19,
-          17
-        ]
+        "data": [11, 8, 15, 18, 19, 17]
       },
       {
         "name": "Minimum",
         "color": "pink",
-        "data": [
-          7,
-          7,
-          5,
-          7,
-          9,
-          12
-        ]
+        "data": [7, 7, 5, 7, 9, 12]
       }
     ]
   },
@@ -1772,66 +636,28 @@
       "2": "line",
       "3": "spline"
     },
-    "groups": [
-      1,
-      4
-    ],
-    "categories": [
-      "2013",
-      "2014",
-      "2015",
-      "2016",
-      "2017",
-      "2018"
-    ],
+    "groups": [1, 4],
+    "categories": ["2013", "2014", "2015", "2016", "2017", "2018"],
     "series": [
       {
         "name": "Development",
         "color": "green",
-        "data": [
-          30,
-          20,
-          50,
-          40,
-          60,
-          50
-        ]
+        "data": [30, 20, 50, 40, 60, 50]
       },
       {
         "name": "Marketing",
         "color": "pink",
-        "data": [
-          200,
-          130,
-          90,
-          240,
-          130,
-          220
-        ]
+        "data": [200, 130, 90, 240, 130, 220]
       },
       {
         "name": "Sales",
         "color": "green",
-        "data": [
-          300,
-          200,
-          160,
-          400,
-          250,
-          250
-        ]
+        "data": [300, 200, 160, 400, 250, 250]
       },
       {
         "name": "Sales",
         "color": "primary",
-        "data": [
-          200,
-          130,
-          90,
-          240,
-          130,
-          220
-        ]
+        "data": [200, 130, 90, 240, 130, 220]
       }
     ]
   },
@@ -1842,189 +668,45 @@
     "series": [
       {
         "name": "Profits",
-        "data": [
-          37,
-          35,
-          44,
-          28,
-          36,
-          24,
-          65,
-          31,
-          37,
-          39,
-          62,
-          51,
-          35,
-          41,
-          35,
-          27,
-          93,
-          53,
-          61,
-          27,
-          54,
-          43,
-          19,
-          46,
-          39,
-          62,
-          51,
-          35,
-          41,
-          67
-        ]
+        "data": [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
       }
     ]
   },
   "crm-mrr-overview": {
     "type": "line",
-    "stroke-width": [
-      3,
-      2
-    ],
-    "stroke-dash": [
-      0,
-      6
-    ],
+    "stroke-width": [3, 2],
+    "stroke-dash": [0, 6],
     "series": [
       {
         "name": "This year",
         "color": "primary",
-        "data": [
-          62,
-          65,
-          64,
-          71,
-          75,
-          73,
-          79,
-          84,
-          82,
-          90,
-          94,
-          101
-        ]
+        "data": [62, 65, 64, 71, 75, 73, 79, 84, 82, 90, 94, 101]
       },
       {
         "name": "Last year",
         "color": "secondary",
-        "data": [
-          56,
-          58,
-          57,
-          63,
-          66,
-          65,
-          68,
-          72,
-          73,
-          77,
-          79,
-          83
-        ]
+        "data": [56, 58, 57, 63, 66, 65, 68, 72, 73, 77, 79, 83]
       }
     ],
-    "categories": [
-      "Jan",
-      "Feb",
-      "Mar",
-      "Apr",
-      "May",
-      "Jun",
-      "Jul",
-      "Aug",
-      "Sep",
-      "Oct",
-      "Nov",
-      "Dec"
-    ],
+    "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
     "y-max": 110
   },
   "new-clients": {
     "type": "line",
     "datetime": true,
     "sparkline": true,
-    "stroke-width": [
-      2,
-      1
-    ],
-    "stroke-dash": [
-      0,
-      3
-    ],
+    "stroke-width": [2, 1],
+    "stroke-dash": [0, 3],
     "series": [
       {
         "name": "May",
         "color": "primary",
-        "data": [
-          37,
-          35,
-          44,
-          28,
-          36,
-          24,
-          65,
-          31,
-          37,
-          39,
-          62,
-          51,
-          35,
-          41,
-          35,
-          27,
-          93,
-          53,
-          61,
-          27,
-          54,
-          43,
-          4,
-          46,
-          39,
-          62,
-          51,
-          35,
-          41,
-          67
-        ]
+        "data": [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 4, 46, 39, 62, 51, 35, 41, 67]
       },
       {
         "name": "April",
         "color": "gray-600",
-        "data": [
-          93,
-          54,
-          51,
-          24,
-          35,
-          35,
-          31,
-          67,
-          19,
-          43,
-          28,
-          36,
-          62,
-          61,
-          27,
-          39,
-          35,
-          41,
-          27,
-          35,
-          51,
-          46,
-          62,
-          37,
-          44,
-          53,
-          41,
-          65,
-          39,
-          37
-        ]
+        "data": [93, 54, 51, 24, 35, 35, 31, 67, 19, 43, 28, 36, 62, 61, 27, 39, 35, 41, 27, 35, 51, 46, 62, 37, 44, 53, 41, 65, 39, 37]
       }
     ]
   },
@@ -2035,38 +717,7 @@
     "series": [
       {
         "name": "Profits",
-        "data": [
-          37,
-          35,
-          44,
-          28,
-          36,
-          24,
-          65,
-          31,
-          37,
-          39,
-          62,
-          51,
-          35,
-          41,
-          35,
-          27,
-          93,
-          53,
-          61,
-          27,
-          54,
-          43,
-          19,
-          46,
-          39,
-          62,
-          51,
-          35,
-          41,
-          67
-        ]
+        "data": [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
       }
     ]
   },
@@ -2077,22 +728,7 @@
     "series": [
       {
         "name": "Inbound",
-        "data": [
-          14,
-          -3,
-          14,
-          9,
-          4,
-          6,
-          -2,
-          7,
-          7,
-          14,
-          10,
-          9,
-          5,
-          -1
-        ]
+        "data": [14, -3, 14, 9, 4, 6, -2, 7, 7, 14, 10, 9, 5, -1]
       }
     ]
   },
@@ -2103,22 +739,7 @@
     "series": [
       {
         "name": "Outbound",
-        "data": [
-          -3,
-          7,
-          9,
-          14,
-          4,
-          5,
-          3,
-          -1,
-          7,
-          10,
-          14,
-          14,
-          -2,
-          6
-        ]
+        "data": [-3, 7, 9, 14, 4, 5, 3, -1, 7, 10, 14, 14, -2, 6]
       }
     ]
   },
@@ -2134,213 +755,98 @@
         "candlestick-data": [
           {
             "x": 1735686000000,
-            "y": [
-              98803.1,
-              102306.14,
-              88978.24,
-              94328.03
-            ]
+            "y": [98803.1, 102306.14, 88978.24, 94328.03]
           },
           {
             "x": 1738278000000,
-            "y": [
-              95236.1,
-              97032.03,
-              87375.16,
-              96251.77
-            ]
+            "y": [95236.1, 97032.03, 87375.16, 96251.77]
           },
           {
             "x": 1740870000000,
-            "y": [
-              96487.56,
-              103797.77,
-              90697.28,
-              90697.28
-            ]
+            "y": [96487.56, 103797.77, 90697.28, 90697.28]
           },
           {
             "x": 1743458400000,
-            "y": [
-              91806.76,
-              94895.54,
-              87431.18,
-              87431.18
-            ]
+            "y": [91806.76, 94895.54, 87431.18, 87431.18]
           },
           {
             "x": 1746050400000,
-            "y": [
-              87011.25,
-              93211.62,
-              84356.3,
-              87282.02
-            ]
+            "y": [87011.25, 93211.62, 84356.3, 87282.02]
           },
           {
             "x": 1748642400000,
-            "y": [
-              88933.8,
-              94105.65,
-              87086.95,
-              89538.17
-            ]
+            "y": [88933.8, 94105.65, 87086.95, 89538.17]
           },
           {
             "x": 1751234400000,
-            "y": [
-              90270.85,
-              95138.57,
-              88785.87,
-              92076.59
-            ]
+            "y": [90270.85, 95138.57, 88785.87, 92076.59]
           },
           {
             "x": 1753826400000,
-            "y": [
-              91635.08,
-              95329.73,
-              88139.43,
-              93398.3
-            ]
+            "y": [91635.08, 95329.73, 88139.43, 93398.3]
           },
           {
             "x": 1756418400000,
-            "y": [
-              94084.03,
-              96110.64,
-              90758.23,
-              92847.27
-            ]
+            "y": [94084.03, 96110.64, 90758.23, 92847.27]
           },
           {
             "x": 1759010400000,
-            "y": [
-              94427.13,
-              104031.87,
-              91181.21,
-              91387.19
-            ]
+            "y": [94427.13, 104031.87, 91181.21, 91387.19]
           },
           {
             "x": 1761606000000,
-            "y": [
-              89676.79,
-              96432.19,
-              86003.07,
-              91270.33
-            ]
+            "y": [89676.79, 96432.19, 86003.07, 91270.33]
           },
           {
             "x": 1764198000000,
-            "y": [
-              90221.19,
-              92256.21,
-              87250.08,
-              90572.57
-            ]
+            "y": [90221.19, 92256.21, 87250.08, 90572.57]
           },
           {
             "x": 1766790000000,
-            "y": [
-              91467.48,
-              99939.37,
-              84023.53,
-              91412.42
-            ]
+            "y": [91467.48, 99939.37, 84023.53, 91412.42]
           },
           {
             "x": 1769382000000,
-            "y": [
-              92347.68,
-              102495.71,
-              84694.68,
-              86861.46
-            ]
+            "y": [92347.68, 102495.71, 84694.68, 86861.46]
           },
           {
             "x": 1771974000000,
-            "y": [
-              86450.15,
-              97703.82,
-              73654.73,
-              89304.96
-            ]
+            "y": [86450.15, 97703.82, 73654.73, 89304.96]
           },
           {
             "x": 1774566000000,
-            "y": [
-              89954.07,
-              93720.75,
-              83099.84,
-              86765.37
-            ]
+            "y": [89954.07, 93720.75, 83099.84, 86765.37]
           },
           {
             "x": 1777154400000,
-            "y": [
-              85041.33,
-              93162.71,
-              79493.01,
-              80950.82
-            ]
+            "y": [85041.33, 93162.71, 79493.01, 80950.82]
           },
           {
             "x": 1779746400000,
-            "y": [
-              81356.55,
-              89872.84,
-              75889.88,
-              84397.86
-            ]
+            "y": [81356.55, 89872.84, 75889.88, 84397.86]
           },
           {
             "x": 1782338400000,
-            "y": [
-              84500.33,
-              86553.16,
-              81499.11,
-              86553.16
-            ]
+            "y": [84500.33, 86553.16, 81499.11, 86553.16]
           },
           {
             "x": 1784930400000,
-            "y": [
-              87615.26,
-              93796.77,
-              81616.41,
-              87524.49
-            ]
+            "y": [87615.26, 93796.77, 81616.41, 87524.49]
           },
           {
             "x": 1787522400000,
-            "y": [
-              86016.31,
-              91621.26,
-              80661.81,
-              83468.77
-            ]
+            "y": [86016.31, 91621.26, 80661.81, 83468.77]
           },
           {
             "x": 1790114400000,
-            "y": [
-              84712.23,
-              90825.8,
-              81702.56,
-              86377.51
-            ]
+            "y": [84712.23, 90825.8, 81702.56, 86377.51]
           },
           {
             "x": 1792706400000,
-            "y": [
-              86028.52,
-              91660.63,
-              77064.28,
-              83253.51
-            ]
+            "y": [86028.52, 91660.63, 77064.28, 83253.51]
           }
         ]
       }
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/shared/includes/cards/charts/active-users-2.html b/shared/includes/cards/charts/active-users-2.html
index a23494a32..40e8234b4 100644
--- a/shared/includes/cards/charts/active-users-2.html
+++ b/shared/includes/cards/charts/active-users-2.html
@@ -1,13 +1,10 @@
 <div class="card">
-	<div class="card-body">
-		<div class="subheader">Active Users</div>
-		<div class="d-flex align-items-baseline mb-2">
-			<div class="h1 mb-0 me-2">25,782</div>
-			<div class="me-auto">
-				{% include "ui/trending.html" value=-1 %}
-			</div>
-		</div>
-		{% include "ui/chart.html" chart-id="active-users-3" height="12" %}
-	</div>
+  <div class="card-body">
+    <div class="subheader">Active Users</div>
+    <div class="d-flex align-items-baseline mb-2">
+      <div class="h1 mb-0 me-2">25,782</div>
+      <div class="me-auto">{% include "ui/trending.html" value=-1 %}</div>
+    </div>
+    {% include "ui/chart-radial.html" id="active-users-4" title="Active users" value="58" height="200" %}
+  </div>
 </div>
-
diff --git a/shared/includes/ui/chart-radial.html b/shared/includes/ui/chart-radial.html
new file mode 100644
index 000000000..7a001b9d9
--- /dev/null
+++ b/shared/includes/ui/chart-radial.html
@@ -0,0 +1,60 @@
+{% removeemptylines %} {% assign id = include.id | default: "active-users-4" %} {% assign height = include.height | default: 350 %} {% assign class = include.class %} {% assign title = include.title | default: "Active users" | upcase %} {% assign value = include.value | default: 58 %}
+
+<div id="chart-{{ id }}" class="position-relative {% if class %} {{ class }}{% endif %}"></div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    {% if environment == 'development' %}
+    window.tabler_chart = window.tabler_chart || {};
+    {% endif %}
+
+    window.ApexCharts &&
+      ({% if environment == "development" %}window.tabler_chart["chart-{{ id }}"] = {% endif %}new ApexCharts(
+        document.getElementById("chart-{{ id }}"),
+        {
+          series: [{{ value }}],
+          chart: {
+            height: {{ height }},
+            type: "radialBar",
+          },
+          plotOptions: {
+            radialBar: {
+              startAngle: -120,
+              endAngle: 120,
+              hollow: {
+                margin: 15,
+                size: "70%",
+              },
+              dataLabels: {
+                name: {
+                  show: true,
+                  offsetY: -20,
+                  fontSize: "14px",
+                  fontFamily: "inherit",
+                  fontWeight: 400,
+						color: "var(--tblr-secondary)",
+                },
+                value: {
+                  show: true,
+                  fontSize: "30px",
+                  fontWeight: 700,
+                  fontFamily: "inherit",
+                  offsetY: 0,
+						color: "var(--tblr-body-color)",
+                  formatter: function (val) {
+                    return val + "%";
+                  },
+                },
+              },
+            },
+          },
+          colors: ["var(--tblr-primary)"],
+          stroke: {
+            lineCap: "round",
+          },
+          labels: ["{{ title }}"],
+        }
+      )).render();
+  });
+</script>
+{% endremoveemptylines %}
diff --git a/shared/includes/ui/chart.html b/shared/includes/ui/chart.html
index d2de0285b..0115ee618 100644
--- a/shared/includes/ui/chart.html
+++ b/shared/includes/ui/chart.html
@@ -1,26 +1,8 @@
-{% removeemptylines %}
-{% assign data = charts[include.chart-id] %}
-{% assign id = include.id | default: include.chart-id %}
-{% assign height = include.height | default: data.height | default: 10 %}
-{% assign class = include.class %}
-
-{% if include['size'] == 'sm' %}
-	{% assign class = class | append: ' chart-sm' | strip %}
-	{% assign height = 2.5 %}
-{% elsif include['size'] == 'lg' %}
-	{% assign class = class | append: ' chart-lg' | strip %}
-	{% assign height = 15 %}
-{% endif %}
-
-{% if data %}
-{% if data.extend %}
-{% assign data = charts[data.extend] | concat_objects: charts[include.chart-id] %}
-{% endif %}
+{% removeemptylines %} {% assign data = charts[include.chart-id] %} {% assign id = include.id | default: include.chart-id %} {% assign height = include.height | default: data.height | default: 10 %} {% assign class = include.class %} {% if include['size'] == 'sm' %} {% assign class = class | append: ' chart-sm' | strip
+%} {% assign height = 2.5 %} {% elsif include['size'] == 'lg' %} {% assign class = class | append: ' chart-lg' | strip %} {% assign height = 15 %} {% endif %} {% if data %} {% if data.extend %} {% assign data = charts[data.extend] | concat_objects: charts[include.chart-id] %} {% endif %}
 
 <div id="chart-{{ id }}" class="position-relative {% if class %} {{ class }}{% endif %}"></div>
-{% capture script %}
-{% assign chart-type = data.type | default: 'bar' -%}
-{% removeemptylines %}
+{% capture script %} {% assign chart-type = data.type | default: 'bar' -%} {% removeemptylines %}
 
 <style>
   :root {
@@ -40,272 +22,293 @@
 </style>
 
 <script>
-	document.addEventListener("DOMContentLoaded", function () {
-		{% if environment == 'development' %}
-		window.tabler_chart = window.tabler_chart || {};
-		{% endif %}
+  document.addEventListener("DOMContentLoaded", function () {
+  	{% if environment == 'development' %}
+  	window.tabler_chart = window.tabler_chart || {};
+  	{% endif %}
 
-		window.ApexCharts && ({% if environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
-			chart: {
-				type: "{{ chart-type }}",
-				fontFamily: 'inherit',
-				height: {{ height | times: 16 }},
+  	window.ApexCharts && ({% if environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
+  		chart: {
+  			type: "{{ chart-type }}",
+  			fontFamily: 'inherit',
+  			height: {{ height | times: 16 }},
 
-				{% if data.sparkline %}
-				sparkline: {
-					enabled: true
-				},
-				{% else %}
-				parentHeightOffset: 0,
-				toolbar: {
-					show: {% if data.toolbar %}true{% else %}false{% endif %},
-				},
-				{% endif %}
+  			{% if data.sparkline %}
+  			sparkline: {
+  				enabled: true
+  			},
+  			{% else %}
+  			parentHeightOffset: 0,
+  			toolbar: {
+  				show: {% if data.toolbar %}true{% else %}false{% endif %},
+  			},
+  			{% endif %}
 
-				{% unless data.animations %}
-				animations: {
-					enabled: false
-				},
-				{% endunless %}
+  			{% unless data.animations %}
+  			animations: {
+  				enabled: false
+  			},
+  			{% endunless %}
 
-				{% if data.stacked %}
-				stacked: true,
-				{% endif %}
-			},
+  			{% if data.stacked %}
+  			stacked: true,
+  			{% endif %}
+  		},
 
-			{% if chart-type == 'bar' %}
-			plotOptions: {
-				bar: {
-					{% if data.horizontal %}
-					barHeight: '50%',
-			 		horizontal: true,
-					{% else %}
-					columnWidth: '50%',
-					{% endif %}
-				}
-			},
-			{% endif %}
+  		{% if chart-type == 'bar' %}
+  		plotOptions: {
+  			bar: {
+  				{% if data.horizontal %}
+  				barHeight: '50%',
+  		 		horizontal: true,
+  				{% else %}
+  				columnWidth: '50%',
+  				{% endif %}
+  			}
+  		},
+  		{% endif %}
 
-			{% if chart-type == 'radialBar' %}
-			plotOptions: {
-				radialBar: {
-					startAngle: -120,
-					endAngle: 120,
-					hollow: {
-						margin: 16,
-						size: "50%"
+  		{% if chart-type == 'radialBar' %}
+  		plotOptions: {
+  			radialBar: {
+				startAngle: {{ data.radial-start-angle | default: -120 }},
+				endAngle: {{ data.radial-end-angle | default: 120 }},
+  				hollow: {
+					margin: {{ data.radial-hollow-margin | default: 16 }},
+					size: "{{ data.radial-hollow-size | default: '50%' }}"
+  				},
+  				dataLabels: {
+					show: {% if data.radial-labels-show == false %}false{% else %}true{% endif %},
+					name: {
+						show: {% if data.radial-name-show %}true{% else %}false{% endif %},
+						offsetY: {{ data.radial-name-offset-y | default: 0 }},
+						fontSize: '{{ data.radial-name-font-size | default: "16px" }}',
+						color: '{{ data.radial-name-color | default: "inherit" }}',
 					},
-					dataLabels: {
-						show: true,
-						value: {
-							offsetY: -8,
-							fontSize: '24px',
-						}
-					},
-				},
-			},
+  					value: {
+						offsetY: {{ data.radial-value-offset-y | default: -8 }},
+						fontSize: '{{ data.radial-value-font-size | default: "24px" }}',
+						fontWeight: {{ data.radial-value-font-weight | default: 600 }},
+  					}
+  				},
+  			},
+  		},
+  		{% endif %}
+
+  		{% if chart-type == 'bar' or chart-type == 'area' %}
+  		dataLabels: {
+  			enabled: {% if data.datalabels %}true{% else %}false{% endif %},
+  		},
+  		{% endif %}
+
+		{% if data.fill-type %}
+		fill: {
+			type: '{{ data.fill-type }}'
+			{% if data.fill-type == 'gradient' %},
+			gradient: {
+				shade: '{{ data.fill-gradient-shade | default: "light" }}',
+				type: '{{ data.fill-gradient-type | default: "horizontal" }}',
+				shadeIntensity: {{ data.fill-gradient-shade-intensity | default: 0.5 }},
+				gradientToColors: ['{{ data.fill-gradient-to-color | default: "#9ec2fb" }}'],
+				inverseColors: {% if data.fill-gradient-inverse-colors %}true{% else %}false{% endif %},
+				opacityFrom: {{ data.fill-gradient-opacity-from | default: 1 }},
+				opacityTo: {{ data.fill-gradient-opacity-to | default: 1 }},
+				stops: [{% if data.fill-gradient-stops %}{{ data.fill-gradient-stops | join: ', ' }}{% else %}0, 100{% endif %}]
+			}
 			{% endif %}
+		},
+		{% elsif chart-type == 'area' %}
+  		fill: {
+  			colors: [
+  				'var(--chart-{{ id }}-fill-0)',
+  				'var(--chart-{{ id }}-fill-1)',
+  			],
+  			type: 'solid'
+  		},
+  		{% endif %}
 
-			{% if chart-type == 'bar' or chart-type == 'area' %}
-			dataLabels: {
-				enabled: {% if data.datalabels %}true{% else %}false{% endif %},
-			},
-			{% endif %}
+  		{% if data.title %}
+  		title: {
+  			text: "{{ data.title | escape }}",
+  			margin: 0,
+  			floating: true,
+  			offsetX: 10,
+  			style: {
+  				fontSize: '18px',
+  			},
+  		},
+  		{% endif %}
 
-			{% if chart-type == 'area' %}
-			fill: {
-				colors: [
-					'var(--chart-{{ id }}-fill-0)',
-					'var(--chart-{{ id }}-fill-1)',
-				],
-				type: 'solid'
-			},
-			{% endif %}
+		{% if chart-type == 'radialBar' and data.stroke-linecap %}
+		stroke: {
+			lineCap: "{{ data.stroke-linecap }}"
+		},
+		{% elsif chart-type == 'area' or chart-type == 'line' %}
+  		stroke: {
+  			width: {% if data.stroke-width %}[{{ data.stroke-width | join: ', '}}]{% else %}2{% endif %},
+  			{% if data.stroke-dash %}dashArray: [{{ data.stroke-dash | join: ', '}}],{% endif %}
+  			lineCap: "round",
+  			curve: "{{ data.stroke-curve | default: 'smooth' }}",
+  		},
+  		{% endif %}
 
-			{% if data.title %}
-			title: {
-				text: "{{ data.title | escape }}",
-				margin: 0,
-				floating: true,
-				offsetX: 10,
-				style: {
-					fontSize: '18px',
-				},
-			},
-			{% endif %}
+  		{% if data.series %}
+  		{% if chart-type == 'pie' or chart-type == 'donut' or chart-type == 'radialBar' %}
+  		series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
+  		labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
 
-			{% if chart-type == 'area' or chart-type == 'line' %}
-			stroke: {
-				width: {% if data.stroke-width %}[{{ data.stroke-width | join: ', '}}]{% else %}2{% endif %},
-				{% if data.stroke-dash %}dashArray: [{{ data.stroke-dash | join: ', '}}],{% endif %}
-				lineCap: "round",
-				curve: "{{ data.stroke-curve | default: 'smooth' }}",
-			},
-			{% endif %}
+  		{% elsif chart-type == 'candlestick' %}
+  		series: [{% for serie in data.series %}{
+  			name: "{{ serie.name }}",
+  			data: [{% if serie.candlestick-data %}{% for candle in serie.candlestick-data %}{x: {{ candle.x }}, y: [{{ candle.y | join: ', ' }}]}{% unless forloop.last %}, {% endunless %}{% endfor %}{% else %}{{ serie.data | join: ', ' }}{% endif %}]
+  		}{% unless forloop.last %},{% endunless %}{% endfor %}],
+  		{% else %}series: [{% for serie in data.series %}{
+  			name: "{{ serie.name }}",
+  			data: [{{ serie.data | join: ', ' }}]
+  		}{% unless forloop.last %},{% endunless %}{% endfor %}],
+  		{% endif %}
+  		{% endif %}
 
-			{% if data.series %}
-			{% if chart-type == 'pie' or chart-type == 'donut' or chart-type == 'radialBar' %}
-			series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
-			labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
+  		tooltip: {
+  			theme: 'dark'
+  		},
 
-			{% elsif chart-type == 'candlestick' %}
-			series: [{% for serie in data.series %}{
-				name: "{{ serie.name }}",
-				data: [{% if serie.candlestick-data %}{% for candle in serie.candlestick-data %}{x: {{ candle.x }}, y: [{{ candle.y | join: ', ' }}]}{% unless forloop.last %}, {% endunless %}{% endfor %}{% else %}{{ serie.data | join: ', ' }}{% endif %}]
-			}{% unless forloop.last %},{% endunless %}{% endfor %}],
-			{% else %}series: [{% for serie in data.series %}{
-				name: "{{ serie.name }}",
-				data: [{{ serie.data | join: ', ' }}]
-			}{% unless forloop.last %},{% endunless %}{% endfor %}],
-			{% endif %}
-			{% endif %}
+  		grid: {
+  			{% unless data.sparkline %}
+  			padding: {
+  				top: -20,
+  				right: 0,
+  				left: -4,
+  				bottom: -4
+  			},
+  			{% endunless %}
+  			{% if data.hide-grid %}
+  			show: false,
+  			{% else %}
+  			strokeDashArray: 4,
+  			{% if data.show-x %}
+  			xaxis: {
+  				lines: {
+  					show: true
+  				}
+  			},
+  			{% endif %}
+  			{% endif %}
+  		},
 
-			tooltip: {
-				theme: 'dark'
-			},
+  		{% if data.show-data-labels %}
+  		dataLabels: {
+  			enabled: true,
+  		},
+  		{% endif %}
 
-			grid: {
-				{% unless data.sparkline %}
-				padding: {
-					top: -20,
-					right: 0,
-					left: -4,
-					bottom: -4
-				},
-				{% endunless %}
-				{% if data.hide-grid %}
-				show: false,
-				{% else %}
-				strokeDashArray: 4,
-				{% if data.show-x %}
-				xaxis: {
-					lines: {
-						show: true
-					}
-				},
-				{% endif %}
-				{% endif %}
-			},
+  		{% if data.categories or data.datetime %}
+  		xaxis: {
+  			labels: {
+  				padding: 0,
+  				{% if data.x-formatter %}
+  				formatter: function(val) {
+  					return {{ data.x-formatter }}
+  				},
+  				{% endif %}
+  			},
+  			tooltip: {
+  				enabled: false
+  			},
+  			{% if chart-type == 'area' or chart-type == 'bar' %}
+  			axisBorder: {
+  				show: false,
+  			},
+  			{% endif %}
+  			{% if data.categories %}
+  			categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
+  			{% endif %}
 
-			{% if data.show-data-labels %}
-			dataLabels: {
-				enabled: true,
-			},
-			{% endif %}
+  			{% if data.datetime %}
+  			type: 'datetime',
+  			{% endif %}
+  		},
+  		{% endif %}
 
-			{% if data.categories or data.datetime %}
-			xaxis: {
-				labels: {
-					padding: 0,
-					{% if data.x-formatter %}
-					formatter: function(val) {
-						return {{ data.x-formatter }}
-					},
-					{% endif %}
-				},
-				tooltip: {
-					enabled: false
-				},
-				{% if chart-type == 'area' or chart-type == 'bar' %}
-				axisBorder: {
-					show: false,
-				},
-				{% endif %}
-				{% if data.categories %}
-				categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
-				{% endif %}
+  		{% unless chart-type == 'pie' or chart-type == 'donut' or chart-type == 'radialBar' %}
+  		yaxis: {
+  			labels: {
+  				padding: 4
+  			},
+  			{% if data.y-max %}
+  			max: {{ data.y-max }},
+  			{% endif %}
+  			{% if data.y-title %}
+  			title: {
+  				text: '{{ data.y-title | escape }}'
+  			}
+  			{% endif %}
+  			{% if data.y-tooltip %}
+  			tooltip: {
+  				enabled: true
+  			}
+  			{% endif %}
+  		},
+  		{% endunless %}
 
-				{% if data.datetime %}
-				type: 'datetime',
-				{% endif %}
-			},
-			{% endif %}
+  		{% if data.datetime %}
+  		{% assign date = data.start-date | default: '2020-06-20' | date: "%s" %}
+  		{% assign days-count = data.series[0].data.size %}
 
-			{% unless chart-type == 'pie' or chart-type == 'donut' or chart-type == 'radialBar' %}
-			yaxis: {
-				labels: {
-					padding: 4
-				},
-				{% if data.y-max %}
-				max: {{ data.y-max }},
-				{% endif %}
-				{% if data.y-title %}
-				title: {
-					text: '{{ data.y-title | escape }}'
-				}
-				{% endif %}
-				{% if data.y-tooltip %}
-				tooltip: {
-					enabled: true
-				}
-				{% endif %}
-			},
-			{% endunless %}
+  		labels: [
+  			{% for i in (1..days-count) %}{% assign date = date | plus: 86400 %}'{{ date | timestamp_to_date }}'{% unless forloop.last %}, {% endunless %}{% endfor %}
+  		],
+  		{% endif %}
 
-			{% if data.datetime %}
-			{% assign date = data.start-date | default: '2020-06-20' | date: "%s" %}
-			{% assign days-count = data.series[0].data.size %}
+		{% if data.colors %}
+		colors: [{% for color in data.colors %}'{{ color }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
+		{% elsif data.series %}
+  		colors: [{% for serie in data.series %}'var(--chart-{{ id }}-color-{{ forloop.index0 }})'{% unless forloop.last %}, {% endunless %}{% endfor %}],
+  		{% endif %}
 
-			labels: [
-				{% for i in (1..days-count) %}{% assign date = date | plus: 86400 %}'{{ date | timestamp_to_date }}'{% unless forloop.last %}, {% endunless %}{% endfor %}
-			],
-			{% endif %}
+  		legend: {
+  			{% if data.legend %}
+  			show: true,
+  			position: 'bottom',
+  			offsetY: 12,
+  			markers: {
+  				width: 10,
+  				height: 10,
+  				radius: 100,
+  			},
+  			itemMargin: {
+  				horizontal: 8,
+  				vertical: 8
+  			},
+  			{% else %}
+  			show: false,
+  			{% endif %}
+  		},
 
-			{% if data.series %}
-			colors: [{% for serie in data.series %}'var(--chart-{{ id }}-color-{{ forloop.index0 }})'{% unless forloop.last %}, {% endunless %}{% endfor %}],
-			{% endif %}
+  		{% if data.hide-tooltip or chart-type == 'pie' or chart-type == 'donut' %}
+  		tooltip: {
+  			{% if data.hide-tooltip %}
+  			enabled: false,
+  			{% endif %}
 
-			legend: {
-				{% if data.legend %}
-				show: true,
-				position: 'bottom',
-				offsetY: 12,
-				markers: {
-					width: 10,
-					height: 10,
-					radius: 100,
-				},
-				itemMargin: {
-					horizontal: 8,
-					vertical: 8
-				},
-				{% else %}
-				show: false,
-				{% endif %}
-			},
+  			{% if chart-type == 'pie' or chart-type == 'donut' %}
+  			fillSeriesColor: false
+  			{% endif %}
+  		},
+  		{% endif %}
 
-			{% if data.hide-tooltip or chart-type == 'pie' or chart-type == 'donut' %}
-			tooltip: {
-				{% if data.hide-tooltip %}
-				enabled: false,
-				{% endif %}
+  		{% if data.hide-points %}
+  		point: {
+  			show: false
+  		},
+  		{% endif %}
 
-				{% if chart-type == 'pie' or chart-type == 'donut' %}
-				fillSeriesColor: false
-				{% endif %}
-			},
-			{% endif %}
-
-			{% if data.hide-points %}
-			point: {
-				show: false
-			},
-			{% endif %}
-
-			{% if data.show-markers %}
-			markers: {
-				size: 2
-			},
-			{% endif %}
-		})).render();
-	});
+  		{% if data.show-markers %}
+  		markers: {
+  			size: 2
+  		},
+  		{% endif %}
+  	})).render();
+  });
 </script>
-{% endremoveemptylines %}
-{%- endcapture %}
-
-{% capture_script %}
-{{ script }}
-{% endcapture_script %}
-
-{% endif %}
-{% endremoveemptylines %}
\ No newline at end of file
+{% endremoveemptylines %} {%- endcapture %} {% capture_script %} {{ script }} {% endcapture_script %} {% endif %} {% endremoveemptylines %}