Improved donut dataLabels

graphieros · graphieros · commit b9743204b0d1 · 2024-01-21T10:15:10.000+01:00
diff --git a/playground/index.html b/playground/index.html
@@ -7,32 +7,6 @@
   </head>
   <body>
     <style>
-      .savyg-arc-unselected,
-      .savyg-marker-name-unselected,
-      .savyg-marker-value-unselected {
-        opacity:0.3;
-        transform: scale(0.95,0.95);
-        transform-origin:50%;
-        transition: all 0.3s ease-in-out;
-      }
-      .savyg-marker-line-unselected,
-      .savyg-marker-circle-unselected {
-        opacity: 0;
-      }
-      .savyg-arc-selected {
-        transform: scale(1.02,1.02);
-        transform-origin:50%;
-        transition: all 0.3s ease-in-out;
-        filter:drop-shadow(0 6px 12px rgba(0,0,0,0.3))
-      }
-      @keyframes openYourHeart {
-        from {
-          r: 0;
-        }
-        to {
-          r: 60px;
-        }
-      }
 
       #myClip circle {
         animation: openYourHeart 15s infinite;
diff --git a/playground/src/main.ts b/playground/src/main.ts
@@ -92,7 +92,27 @@ let donut = chartDonut({
   dataset: [
     {
       name: "serie 1",
-      value: 0.2,
+      value: 0.1,
+    },
+    {
+      name: "serie 1.1",
+      value: 0 / 1,
+    },
+    {
+      name: "serie 1.3",
+      value: 0.1,
+    },
+    {
+      name: "serie 1.3",
+      value: 0.1,
+    },
+    {
+      name: "serie 1.3",
+      value: 0.1,
+    },
+    {
+      name: "serie 1.3",
+      value: 0.1,
     },
     {
       name: "serie 2",
@@ -106,11 +126,18 @@ let donut = chartDonut({
       name: "serie 4",
       value: 20,
     },
+    {
+      name: "serie 4",
+      value: 20,
+    },
   ],
   parent: div,
   options: {
     title: "Title",
-    showDataLabels: true
+    showDataLabels: true,
+    donutRadiusRatio: 1,
+    dataLabelsRoundingValue: 1,
+    dataLabelsRoundingPercentage: 2
   }
 })
 
