Remove deprecated active users chart configuration and update HTML to use new radial chart component with adjusted height.

shared/data/charts.json

@@ -1,35 +1,4 @@
 {
-  "active-users-4": {
-    "type": "radialBar",
-    "height": 12,
-    "colors": ["var(--tblr-primary)"],
-    "radial-hollow-margin": 15,
-    "radial-hollow-size": "70%",
-    "radial-name-show": true,
-    "radial-name-offset-y": -12,
-    "radial-name-font-size": "14px",
-    "radial-name-color": "#999",
-    "radial-value-offset-y": 0,
-    "radial-value-font-size": "24px",
-    "radial-value-font-weight": 700,
-    "fill-type": "gradient",
-    "fill-gradient-shade": "light",
-    "fill-gradient-type": "horizontal",
-    "fill-gradient-shade-intensity": 0.4,
-    "fill-gradient-to-color": "var(--tblr-azure)",
-    "fill-gradient-inverse-colors": false,
-    "fill-gradient-opacity-from": 1,
-    "fill-gradient-opacity-to": 1,
-    "fill-gradient-stops": [0, 100],
-    "stroke-linecap": "round",
-    "series": [
-      {
-        "name": "Active users",
-        "color": "primary",
-        "data": 58
-      }
-    ]
-  },
   "active-users-3": {
     "type": "radialBar",
     "height": 10,

shared/includes/cards/charts/active-users-2.html

@@ -5,6 +5,6 @@
       <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-4" height="12" %}
+    {% include "ui/chart-radial.html" id="active-users-4" title="Active users" value="58" height="350" %}
   </div>
 </div>

shared/includes/ui/chart-radial.html

@@ -0,0 +1,70 @@
+{% 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" %} {% 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",
+                  color: "var(--tblr-secondary)",
+                },
+                value: {
+                  show: true,
+                  fontSize: "30px",
+                  fontWeight: 700,
+                  offsetY: 0,
+                  color: "var(--tblr-body-color)",
+                  formatter: function (val) {
+                    return val + "%";
+                  },
+                },
+              },
+            },
+          },
+          fill: {
+            type: "gradient",
+            gradient: {
+              shade: "dark",
+              type: "horizontal",
+              shadeIntensity: 0.5,
+              gradientToColors: ["var(--tblr-primary)"],
+              inverseColors: true,
+              opacityFrom: 1,
+              opacityTo: 1,
+              stops: [0, 100],
+            },
+          },
+          colors: ["var(--tblr-azure)"],
+          stroke: {
+            lineCap: "round",
+          },
+          labels: ["{{ title }}"],
+        }
+      )).render();
+  });
+</script>
+{% endremoveemptylines %}