diff --git a/TestingArena/ArenaVueUi3dBar.vue b/TestingArena/ArenaVueUi3dBar.vue
index 92afa53c..a4c72f53 100644
--- a/TestingArena/ArenaVueUi3dBar.vue
+++ b/TestingArena/ArenaVueUi3dBar.vue
@@ -177,7 +177,7 @@ const config = computed(() => {
                 dataLabel: {
                     ...c.style.chart.dataLabel,
                     formatter: ({value, config}) => {
-                        // console.log(config)
+                        console.log(config)
                         return `f | ${value}`
                     }
                 }
diff --git a/package-lock.json b/package-lock.json
index afb08258..b89e5b73 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "vue-data-ui",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "lockfileVersion": 3,
   "requires": true,
   "dev": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "2.7.0",
+      "version": "2.7.1",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.3",
diff --git a/package.json b/package.json
index dfe525b8..851d8d06 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.7.0",
+  "version": "2.7.1",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [
diff --git a/src/App.vue b/src/App.vue
index 781079e0..344a5f9f 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -119,7 +119,7 @@ const components = ref([             //------|
  * Modify the index to display a component
  * [0] = VueUiXy 
  */
- const selectedComponent = ref(components.value[1]);
+ const selectedComponent = ref(components.value[34]);
 
 /**
  * Legacy testing arena where some non chart components can be tested
diff --git a/src/components/vue-ui-3d-bar.vue b/src/components/vue-ui-3d-bar.vue
index 331d19dd..be22df19 100644
--- a/src/components/vue-ui-3d-bar.vue
+++ b/src/components/vue-ui-3d-bar.vue
@@ -734,18 +734,18 @@ defineExpose({
                         <circle :cx="bar.fill.sidePointer.x + 20" :cy="bar.fill.sidePointer.y" :r="2" :fill="bar.color" :stroke="FINAL_CONFIG.style.chart.backgroundColor" v-if="!bar.fill.miniDonut || !!selectedSerie"/>
                         <foreignObject :x="bar.fill.sidePointer.x + 30" :y="bar.fill.sidePointer.y - FINAL_CONFIG.style.chart.legend.fontSize" :width="svg.absoluteWidth / 2 - 12" :height="FINAL_CONFIG.style.chart.legend.fontSize * 2" style="overflow: visible; position: relative">
                             <div v-if="FINAL_CONFIG.style.chart.legend.showDefault" :style="`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${FINAL_CONFIG.style.chart.legend.fontSize}px; text-align:left; line-height: ${FINAL_CONFIG.style.chart.legend.fontSize}px; color:${FINAL_CONFIG.style.chart.legend.color}`">
-                                {{ bar.name }}: {{ dataLabel({v: bar.proportion * 100, s: '%', r: FINAL_CONFIG.style.chart.legend.roundingPercentage}) }} ({{ applyDataLabel(
+                                {{ applyDataLabel(
                                     FINAL_CONFIG.style.chart.dataLabel.formatter,
                                     bar.value,
-                                    dataLabel({ 
+                                    `${bar.name}: ${dataLabel({v: bar.proportion * 100, s: '%', r: FINAL_CONFIG.style.chart.legend.roundingPercentage})} (${dataLabel({ 
                                         p: FINAL_CONFIG.style.chart.legend.prefix, 
                                         v: bar.value, 
                                         s: FINAL_CONFIG.style.chart.legend.suffix, 
                                         r: FINAL_CONFIG.style.chart.legend.roundingValue
-                                    }),
-                                    { datapoint: bar, seriesIndex: i }
+                                    })})`,
+                                    { datapoint: bar, seriesIndex: i, type: 'barDatapoint' }
                                     )
-                                }})
+                                }}
                             </div>
                             <slot name="legend" v-bind="{ datapoint: bar, config: FINAL_CONFIG, dataset: stack}"/>
                         </foreignObject>
@@ -797,17 +797,17 @@ defineExpose({
                                         :fill="FINAL_CONFIG.style.chart.legend.color"
                                         :font-size="FINAL_CONFIG.style.chart.legend.fontSize / 1.5"
                                     >
-                                        {{ displayArcPercentage(arc, bar.fill.donut)  }} ({{ applyDataLabel(
+                                        {{ applyDataLabel(
                                             FINAL_CONFIG.style.chart.dataLabel.formatter,
                                             arc.value,
-                                            dataLabel({
+                                            `${displayArcPercentage(arc, bar.fill.donut)} (${dataLabel({
                                                 p: FINAL_CONFIG.style.chart.legend.prefix, 
                                                 v: arc.value, 
                                                 s: FINAL_CONFIG.style.chart.legend.suffix, 
                                                 r: FINAL_CONFIG.style.chart.legend.roundingValue
-                                            }),
-                                            { datapoint: arc, seriesIndex: i }
-                                        )}})
+                                            })})`,
+                                            { datapoint: arc, seriesIndex: i, type: 'donutDatapoint' }
+                                        )}}
                                     </text>
                                     <text
                                         :text-anchor="calcMarkerOffsetX(arc).anchor"
@@ -876,17 +876,17 @@ defineExpose({
                         <circle :cx="bar.fill.sidePointer.x + 20" :cy="bar.fill.sidePointer.y" :r="2" :fill="bar.color" :stroke="FINAL_CONFIG.style.chart.backgroundColor" v-if="!bar.fill.miniDonut || !!selectedSerie"/>
                         <foreignObject :x="bar.fill.sidePointer.x + 30" :y="bar.fill.sidePointer.y - FINAL_CONFIG.style.chart.legend.fontSize" :width="svg.absoluteWidth / 2 - 12" :height="FINAL_CONFIG.style.chart.legend.fontSize * 2" style="overflow: visible; position: relative">
                             <div v-if="FINAL_CONFIG.style.chart.legend.showDefault" :style="`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${FINAL_CONFIG.style.chart.legend.fontSize}px; text-align:left; line-height: ${FINAL_CONFIG.style.chart.legend.fontSize}px; color:${FINAL_CONFIG.style.chart.legend.color}`">
-                                {{ bar.name }}: {{ dataLabel({v: bar.proportion * 100, s: '%', r: FINAL_CONFIG.style.chart.legend.roundingPercentage}) }} ({{ applyDataLabel(
+                                {{ applyDataLabel(
                                     FINAL_CONFIG.style.chart.dataLabel.formatter,
                                     bar.value,
-                                    dataLabel({ 
+                                    `${bar.name}: ${dataLabel({v: bar.proportion * 100, s: '%', r: FINAL_CONFIG.style.chart.legend.roundingPercentage})} (${dataLabel({ 
                                         p: FINAL_CONFIG.style.chart.legend.prefix, 
                                         v: bar.value, 
                                         s: FINAL_CONFIG.style.chart.legend.suffix, 
                                         r: FINAL_CONFIG.style.chart.legend.roundingValue
-                                    }),
-                                    { datapoint: bar, seriesIndex: i }
-                                )}})
+                                    })})`,
+                                    { datapoint: bar, seriesIndex: i, type: 'barDatapoint' }
+                                )}}
                             </div>
                             <slot name="legend" v-bind="{ datapoint: bar, config: FINAL_CONFIG, dataset: stack}"/>
                         </foreignObject>
@@ -938,17 +938,17 @@ defineExpose({
                                         :fill="FINAL_CONFIG.style.chart.legend.color"
                                         :font-size="FINAL_CONFIG.style.chart.legend.fontSize / 1.5"
                                     >
-                                        {{ displayArcPercentage(arc, bar.fill.donut)  }} ({{ applyDataLabel(
+                                        {{ applyDataLabel(
                                             FINAL_CONFIG.style.chart.dataLabel.formatter,
                                             arc.value,
-                                            dataLabel({
+                                            `${displayArcPercentage(arc, bar.fill.donut)} (${dataLabel({
                                                 p: FINAL_CONFIG.style.chart.legend.prefix, 
                                                 v: arc.value, 
                                                 s: FINAL_CONFIG.style.chart.legend.suffix, 
                                                 r: FINAL_CONFIG.style.chart.legend.roundingValue
-                                            }),
-                                            { datapoint: arc, seriesIndex: i }
-                                        )}})
+                                            })})`,
+                                            { datapoint: arc, seriesIndex: i, type: 'donutDatapoint' }
+                                        )}}
                                     </text>
                                     <text
                                         :text-anchor="calcMarkerOffsetX(arc).anchor"