From a9f7024b7a6c5b887c9031ddbbf88b4c65dabb03 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Thu, 7 Mar 2024 08:35:02 +0100
Subject: [PATCH] Added customFormat config option for customizable tooltip
 contents

---
 README.md                              |  11 +
 package-lock.json                      |   4 +-
 package.json                           |   2 +-
 src/App.vue                            | 337 +++++++++++++------------
 src/components/vue-ui-age-pyramid.vue  |  57 +++--
 src/components/vue-ui-candlestick.vue  |  69 +++--
 src/components/vue-ui-donut.vue        |  49 ++--
 src/components/vue-ui-heatmap.vue      |  31 ++-
 src/components/vue-ui-molecule.vue     |  30 ++-
 src/components/vue-ui-quadrant.vue     |  48 +++-
 src/components/vue-ui-radar.vue        |  43 +++-
 src/components/vue-ui-rings.vue        |  66 +++--
 src/components/vue-ui-scatter.vue      |  51 ++--
 src/components/vue-ui-vertical-bar.vue |  49 ++--
 src/components/vue-ui-waffle.vue       |  39 ++-
 src/components/vue-ui-xy.vue           | 153 ++++++-----
 src/default_configs.json               |  38 ++-
 src/lib.js                             |   2 +-
 types/vue-data-ui.d.ts                 | 311 +++++++++++++++++++++++
 19 files changed, 974 insertions(+), 416 deletions(-)

diff --git a/README.md b/README.md
index 98543382..19a30579 100644
--- a/README.md
+++ b/README.md
@@ -108,6 +108,17 @@ Types are available in the 'vue-data-ui.d.ts' file under the types directory of
 ## Nuxt
 [This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt](https://github.com/graphieros/vue-data-ui-nuxt)
 
+# Customizable tooltips
+Charts with tooltips have a config option to customize tooltip contents:
+
+```
+
+customFormat: ({ seriesIndex, datapoint, series, config }) => {
+  return `<div>${ ... }</div>`;
+}
+
+```
+
 # Slots
 Most Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).
 
diff --git a/package-lock.json b/package-lock.json
index e891a5f7..fd23b245 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-data-ui",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "2.0.3",
+      "version": "2.0.5",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
diff --git a/package.json b/package.json
index f11089bc..ad287b61 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.4",
+  "version": "2.0.5",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
diff --git a/src/App.vue b/src/App.vue
index c80cb98a..72f1d7c0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -396,8 +396,6 @@ const radarDataset = ref({
   ],
 });
 
-const radarConfig = ref(getVueDataUiConfig('vue_ui_radar'))
-
 const quadrantDataset = ref([
   {
     name: "category 1",
@@ -921,63 +919,6 @@ const weeks = computed(() => {
   return arr;
 });
 
-const heatmapConfig = ref({
-  style: {
-    layout: {
-      useDiv: true,
-      padding: {
-        bottom: 48,
-      },
-      cells: {
-        value: {
-          show: true,
-          fontSize: 10
-        },
-        spacing: 2
-      },
-      dataLabels: {
-        prefix: "$",
-        suffix: "£",
-        yAxis: {
-          fontSize: 24,
-        },
-        xAxis: {
-          fontSize: 24,
-          values: weeks.value,
-        },
-      },
-    },
-    title: {
-      text: "Title",
-      subtitle: {
-        text: "Subtitle",
-      },
-    },
-  },
-});
-
-const scatterConfig = ref({
-  style: {
-    layout: {
-      useDiv: true,
-      dataLabels: {
-        xAxis: {
-          name: "xAxis",
-        },
-        yAxis: {
-          name: "yAxis",
-        },
-      },
-    },
-    title: {
-      text: "Title",
-      subtitle: {
-        text: "Subtitle",
-      },
-    },
-  },
-});
-
 const scat1 = computed(() => {
   const arr = [];
   for (let i = -50; i < 50; i += 1) {
@@ -1016,20 +957,6 @@ const scatterDataset = computed(() => {
   ];
 });
 
-const candlestickConfig = ref({
-  style: {
-    layout: {
-      useDiv: true,
-    },
-    title: {
-      text: "Title",
-      subtitle: {
-        text: "Subtitle",
-      },
-    },
-  },
-});
-
 // date | open | high | low | last | volume
 const candlestickDataset = ref([
   ["2024-01-01", 56, 120, 40, 110, 1250],
@@ -1059,20 +986,6 @@ const barset = ref([
   },
 ]);
 
-const pyramidConfig = ref({
-  style: {
-    layout: {
-      useDiv: true,
-    },
-    title: {
-      text: "France",
-      subtitle: {
-        text: "2022",
-      },
-    },
-  },
-});
-
 const pyramidDataset = ref([
   ["2022", 0, 330929, 345538],
   ["2021", 1, 343026, 357351],
@@ -1315,15 +1228,6 @@ const dashboardConfig = ref({
 });
 
 const comps = ref([
-  {
-    id: 1,
-    width: 40,
-    height: 30,
-    left: 2,
-    top: 4,
-    component: "VueUiCandlestick",
-    props: { config: candlestickConfig, dataset: candlestickDataset },
-  },
   {
     id: 2,
     width: 20,
@@ -2007,26 +1911,6 @@ const histoDataset = ref([
   },
 ]);
 
-const ringsConfig = ref({
-  style: {
-    chart: {
-      layout: {
-        labels: {
-          dataLabels: {
-            prefix: "$",
-            suffix: "£"
-          }
-        }
-      },
-      title: {
-        text: "Title",
-        subtitle: {
-          text: "Subtitle"
-        }
-      }
-    }
-  }
-});
 const ringsDataset = ref([
   {
     name: "Serie 1",
@@ -2418,6 +2302,157 @@ const moodRadarConfig = ref({
     }
   })
 
+const donutConfig = ref({
+  style: {
+    chart: {
+      tooltip: {
+        customFormat: ({ datapoint, seriesIndex, series , config}) => {
+          console.log({datapoint, seriesIndex, series, config});
+          return `<div style="color:${datapoint.color}">
+              ${datapoint.name}
+            </div>`
+        }
+      }
+    }
+  }
+})
+
+const xyConfig = ref({
+  chart: {
+    tooltip: {
+      customFormat: ({ seriesIndex, datapoint, series,  bars, lines, plots, config }) => {
+        console.log({seriesIndex, datapoint, series, bars, lines, plots, config});
+        return 'TEST'
+      }
+    }
+  }
+})
+
+const waffleConfig = ref({
+  style: {
+    chart: {
+      tooltip: {
+        customFormat: ({seriesIndex, datapoint, series, config}) => {
+          console.log({seriesIndex, datapoint, series, config})
+          return "TEST"
+        }
+      }
+    }
+  }
+})
+
+const radarConfig = ref({
+  style: {
+    chart: {
+      tooltip: {
+        customFormat: ({ seriesIndex, datapoint, series, config }) => {
+          console.log({seriesIndex, datapoint, series, config})
+          return "TEST"
+        }
+      }
+    }
+  }
+})
+
+const quadrantConfig = ref({
+  style: {
+    chart: {
+      tooltip: {
+        showShape: false,
+        customFormat: ({ seriesIndex, datapoint, series, config }) => {
+          console.log({seriesIndex, datapoint, series, config})
+          return datapoint.name
+        }
+      }
+    }
+  }
+})
+
+const verticalBarConfig = ref({
+  style: {
+    chart: {
+      tooltip: {
+        customFormat: ({ seriesIndex, datapoint, series, config }) => {
+          console.log({seriesIndex, datapoint, series, config});
+          return datapoint.name
+        }
+      }
+    }
+  }
+})
+
+const heatmapConfig = ref({
+  style: {
+    tooltip: {
+      customFormat: ({ seriesIndex, datapoint, series, config }) => {
+        console.log({seriesIndex, datapoint, series, config});
+        return "TEST"
+      }
+    }
+  }
+})
+
+const scatterConfig = ref({
+  style: {
+    tooltip: {
+      showShape: false,
+      customFormat: ({ seriesIndex, datapoint, series, config }) => {
+        console.log({ seriesIndex, datapoint, series, config });
+        return "TEST"
+      }
+    }
+  }
+})
+
+const candlestickConfig = ref({
+  style: {
+    tooltip: {
+      customFormat: ({ seriesIndex, datapoint, series, config }) => {
+        console.log({ seriesIndex, datapoint, series, config });
+        return "TEST"
+      }
+    }
+  }
+})
+
+const pyramidConfig = ref({
+  style: {
+    tooltip: {
+      customFormat: ({ seriesIndex, datapoint, series, config }) => {
+        console.log({ seriesIndex, datapoint, series, config });
+        return "TEST"
+      }
+    }
+  }
+})
+
+const ringsConfig = ref({
+  style: {
+    chart: {
+      tooltip: {
+        customFormat: ({ seriesIndex, datapoint, series, config }) => {
+          console.log({ seriesIndex, datapoint, series, config });
+          return "TEST"
+        }
+      }
+    }
+  }
+})
+
+const moleculeConfig = ref({
+  style: {
+    chart: {
+      tooltip: {
+        customFormat: ({ seriesIndex, datapoint, series, config }) => {
+          // seriesIndex will always be -1: hide in docs
+          console.log({ seriesIndex, datapoint, series, config })
+          return "TEST"
+        }
+      }
+    }
+  }
+})
+
 </script>
 
 <template>
@@ -2568,10 +2603,10 @@ const moodRadarConfig = ref({
           <BaseIcon name="fullscreen" stroke="#5f8bee"/>
         </template>
         <template #dev>
-          <MoleculeTest :dataset="clusterDataset"/>
+          <MoleculeTest :dataset="clusterDataset" :config="moleculeConfig"/>
         </template>
         <template #prod>
-          <VueUiMolecule :dataset="clusterDataset"/>
+          <VueUiMolecule :dataset="clusterDataset" :config="moleculeConfig"/>
         </template>
         <template #config>
           {{ PROD_CONFIG.vue_ui_molecule }}
@@ -2927,7 +2962,7 @@ const moodRadarConfig = ref({
         <template #dev>
           <XyTest
             ref="xytest"
-            :config="{ ...config, useCanvas: false }"
+            :config="xyConfig"
             :dataset="dataset2"
             @selectLegend="selectLegendXY"
             @selectX="selectX"
@@ -2940,7 +2975,7 @@ const moodRadarConfig = ref({
         <template #prod>
           <VueUiXy
             ref="xytest"
-            :config="{ ...config, useCanvas: false, useCssAnimation: false }"
+            :config="xyConfig"
             :dataset="dataset2"
             @selectLegend="selectLegendXY"
             @selectX="selectX"
@@ -2993,7 +3028,7 @@ const moodRadarConfig = ref({
           <CandlestickTest 
             ref="candlestick"
             :dataset="candlestickDataset" 
-            :config="{...candlestickConfig, useCssAnimation: false}"
+            :config="candlestickConfig"
           >
           <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -3004,7 +3039,7 @@ const moodRadarConfig = ref({
           <VueUiCandlestick
             ref="candlestick"
             :dataset="candlestickDataset"
-            :config="{...candlestickConfig, useCssAnimation: false}"
+            :config="candlestickConfig"
           >
           <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -3032,7 +3067,7 @@ const moodRadarConfig = ref({
           <ScatterTest 
             ref="scatter" 
             :dataset="scatterDataset" 
-            :config="{...scatterConfig, useCssAnimation: false}"
+            :config="scatterConfig"
           >
           <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -3042,7 +3077,7 @@ const moodRadarConfig = ref({
         <template #prod>
           <VueUiScatter
             ref="scatter"
-            :config="{...scatterConfig, useCssAnimation: false}"
+            :config="scatterConfig"
             :dataset="scatterDataset"
           >
           <template #svg="{ svg }">
@@ -3072,7 +3107,7 @@ const moodRadarConfig = ref({
           <VerticalTest 
             ref="verticaltest"
             :dataset="verticalDataset"
-            :config="{useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}}}}"
+            :config="verticalBarConfig"
           >
           <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -3082,7 +3117,7 @@ const moodRadarConfig = ref({
         <template #prod>
           <VueUiVerticalBar
             ref="verticaltest"
-            :config="{useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}}}}"
+            :config="verticalBarConfig"
             :dataset="verticalDataset"
             @selectLegend="selectVerticalLegend"
           >
@@ -3153,7 +3188,7 @@ const moodRadarConfig = ref({
           <QuadrantTest
             ref="quadranttest"
             :dataset="quadrantDataset"
-            :config="{useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}},layout:{grid:{xAxis:{name:'xAxis'},yAxis:{name:'yAxis'}}}}}"
+            :config="quadrantConfig"
             @selectPlot="selectPlot"
             @selectSide="selectSide"
             @selectLegend="selectQuadrantLegend"
@@ -3167,7 +3202,7 @@ const moodRadarConfig = ref({
           <VueUiQuadrant
             ref="quadranttest"
             :dataset="quadrantDataset"
-            :config="{useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}},layout:{grid:{xAxis:{name:'xAxis'},yAxis:{name:'yAxis'}}}}}"
+            :config="quadrantConfig"
             @selectPlot="selectPlot"
             @selectSide="selectSide"
             @selectLegend="selectQuadrantLegend"
@@ -3198,7 +3233,7 @@ const moodRadarConfig = ref({
           <RadarTest
             ref="radartest"
             :dataset="radarDataset"
-            :config="{...radarConfig, useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}}}}"
+            :config="radarConfig"
             @selectLegend="selectRadarLegend"
           >
           <template #svg="{ svg }">
@@ -3210,7 +3245,7 @@ const moodRadarConfig = ref({
           <VueUiRadar
             ref="radartest"
             :dataset="radarDataset"
-            :config="{useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}}}}"
+            :config="radarConfig"
             @selectLegend="selectRadarLegend"
           >
           <template #svg="{ svg }">
@@ -3240,26 +3275,7 @@ const moodRadarConfig = ref({
           <DonutTest
             ref="donuttest"
             :dataset="donutDataset"
-            :config="{
-              style: {
-                chart: {
-                  layout: {
-                    labels: {
-                      dataLabels: {
-                        prefix: '$',
-                        suffix: '£'
-                      }
-                    }
-                  },
-                  title: {
-                    text: 'Title',
-                    subtitle: {
-                      text: 'Subtitle'
-                    }
-                  }
-                }
-              }
-            }"
+            :config="donutConfig"
             @selectLegend="selectLegendDonut"
           >
             <template #svg="{ svg }">
@@ -3279,18 +3295,7 @@ const moodRadarConfig = ref({
           <VueUiDonut
             ref="donuttest"
             :dataset="donutDataset"
-            :config="{
-              style: {
-                chart: {
-                  title: {
-                    text: 'Title',
-                    subtitle: {
-                      text: 'Subtitle'
-                    }
-                  }
-                }
-              }
-            }"
+            :config="donutConfig"
             @selectLegend="selectLegendDonut"
           >
             <template #svg="{ svg }">
@@ -3468,7 +3473,7 @@ const moodRadarConfig = ref({
           <PyramidTest 
             ref="pyramid" 
             :dataset="pyramidDataset"
-            :config="{style:{title:{text:'Title', subtitle:{text: 'Subtitle'}}}}"
+            :config="pyramidConfig"
           >
           <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -3479,7 +3484,7 @@ const moodRadarConfig = ref({
           <VueUiAgePyramid
             ref="pyramid"
             :dataset="pyramidDataset"
-            :config="{style:{title:{text:'Title', subtitle:{text: 'Subtitle'}}}}"
+            :config="pyramidConfig"
           >
           <template #svg="{ svg }">
               <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -3507,7 +3512,7 @@ const moodRadarConfig = ref({
           <WaffleTest
             ref="waffletest"
             :dataset="donutDataset"
-            :config="{useBlurOnHover: true, style:{chart:{layout:{labels:{dataLabels:{prefix: '$', suffix: '£'}}},title:{text:'Title',subtitle:{text:'Subtitle'}}}}}"
+            :config="waffleConfig"
             @selectLegend="selectLegendWaffle"
           >
           <template #svg="{ svg }">
@@ -3519,7 +3524,7 @@ const moodRadarConfig = ref({
           <VueUiWaffle
             ref="waffletest"
             :dataset="donutDataset"
-             :config="{useBlurOnHover: true, style:{chart:{title:{text:'Title',subtitle:{text:'Subtitle'}}}}}"
+             :config="waffleConfig"
             @selectLegend="selectLegendWaffle"
           >
             <template #svg="{ svg }">
diff --git a/src/components/vue-ui-age-pyramid.vue b/src/components/vue-ui-age-pyramid.vue
index c5a32396..489effdc 100644
--- a/src/components/vue-ui-age-pyramid.vue
+++ b/src/components/vue-ui-age-pyramid.vue
@@ -179,23 +179,50 @@ const drawableDataset = computed(() => {
     })
 });
 
-function hoverIndex(index) {
+function useTooltip(index, datapoint) {
     selectedIndex.value = index;
 
-    let html = "";
+    const customFormat = agePyramidConfig.value.style.tooltip.customFormat;
 
-    const selectedSet = drawableDataset.value[index];
-    html += `<div><b>${selectedSet.segment}</b></div>`;
-    html += `<div>${agePyramidConfig.value.translations.age} : ${selectedSet.age}</div>`
-    html += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid #e1e5e8">`;
-    html += `<div style="display:flex; flex-direction:row;gap:12px">`;
-    html += `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center"><svg viewBox="0 0 12 12" height="12" width="12"><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${agePyramidConfig.value.style.layout.bars.gradient.underlayer}"/><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${agePyramidConfig.value.style.layout.bars.gradient.show ? `url(#age_pyramid_left_${uid.value})` : agePyramidConfig.value.style.layout.bars.left.color}"/></svg><div>${agePyramidConfig.value.translations.female}</div><div><b>${selectedSet.left.value.toLocaleString()}</b></div></div>`;
-    html += `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center"><svg viewBox="0 0 12 12" height="12" width="12"><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${agePyramidConfig.value.style.layout.bars.gradient.underlayer}"/><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${agePyramidConfig.value.style.layout.bars.gradient.show ? `url(#age_pyramid_right_${uid.value})` : agePyramidConfig.value.style.layout.bars.right.color}"/></svg><div>${agePyramidConfig.value.translations.male}</div><div><b>${selectedSet.right.value.toLocaleString()}</b></div></div>`;
-    html += `</div>`;
-    html += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid #e1e5e8"><div>${agePyramidConfig.value.translations.total}</div><div><b>${(selectedSet.left.value + selectedSet.right.value).toLocaleString()}</b></div></div>`
-    html += `</div>`;
+    if (customFormat && typeof customFormat({
+            seriesIndex: index,
+            datapoint: {
+                segment: datapoint[0],
+                index: datapoint[1],
+                left: datapoint[2],
+                right: datapoint[3]
+            },
+            series: drawableDataset.value,
+            config: agePyramidConfig.value
+        }) === 'string') {
+        tooltipContent.value = customFormat({
+            seriesIndex: index,
+            datapoint: {
+                segment: datapoint[0],
+                index: datapoint[1],
+                left: datapoint[2],
+                right: datapoint[3]
+            },
+            series: drawableDataset.value,
+            config: agePyramidConfig.value
+        })
+    } else {
+        let html = "";
+    
+        const selectedSet = drawableDataset.value[index];
+        html += `<div><b>${selectedSet.segment}</b></div>`;
+        html += `<div>${agePyramidConfig.value.translations.age} : ${selectedSet.age}</div>`
+        html += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid #e1e5e8">`;
+        html += `<div style="display:flex; flex-direction:row;gap:12px">`;
+        html += `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center"><svg viewBox="0 0 12 12" height="12" width="12"><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${agePyramidConfig.value.style.layout.bars.gradient.underlayer}"/><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${agePyramidConfig.value.style.layout.bars.gradient.show ? `url(#age_pyramid_left_${uid.value})` : agePyramidConfig.value.style.layout.bars.left.color}"/></svg><div>${agePyramidConfig.value.translations.female}</div><div><b>${selectedSet.left.value.toLocaleString()}</b></div></div>`;
+        html += `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center"><svg viewBox="0 0 12 12" height="12" width="12"><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${agePyramidConfig.value.style.layout.bars.gradient.underlayer}"/><rect stroke="none" x="0" y="0" height="12" width="12" rx="2" fill="${agePyramidConfig.value.style.layout.bars.gradient.show ? `url(#age_pyramid_right_${uid.value})` : agePyramidConfig.value.style.layout.bars.right.color}"/></svg><div>${agePyramidConfig.value.translations.male}</div><div><b>${selectedSet.right.value.toLocaleString()}</b></div></div>`;
+        html += `</div>`;
+        html += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid #e1e5e8"><div>${agePyramidConfig.value.translations.total}</div><div><b>${(selectedSet.left.value + selectedSet.right.value).toLocaleString()}</b></div></div>`
+        html += `</div>`;
+    
+        tooltipContent.value = `<div>${html}</div>`;
+    }
 
-    tooltipContent.value = `<div>${html}</div>`;
     isTooltip.value = true;
 }
 
@@ -561,14 +588,14 @@ defineExpose({
             </g>
 
             <!-- TOOLTIP TRAPS -->
-            <g v-for="(_trap, i) in dataset">
+            <g v-for="(datapoint, i) in dataset">
                 <rect
                     :x="drawingArea.left"
                     :y="drawingArea.top + (drawingArea.height / len) * i - agePyramidConfig.style.layout.bars.gap / 2"
                     :width="drawingArea.width"
                     :height="drawingArea.height / len"
                     :fill="selectedIndex !== null && selectedIndex === i ? `${agePyramidConfig.style.highlighter.color}${opacity[agePyramidConfig.style.highlighter.opacity]}` : 'transparent'"
-                    @mouseover="hoverIndex(i)"
+                    @mouseover="useTooltip(i, datapoint)"
                     @mouseleave="selectedIndex = null; isTooltip = false"
                 />
             </g>
diff --git a/src/components/vue-ui-candlestick.vue b/src/components/vue-ui-candlestick.vue
index fc183ddb..737c5a7a 100644
--- a/src/components/vue-ui-candlestick.vue
+++ b/src/components/vue-ui-candlestick.vue
@@ -183,32 +183,49 @@ const xLabels = computed(() => {
     return datasetBreakdown.value.map(ds => ds.period)
 });
 
-function useTooltip(index) {
+function useTooltip(index, datapoint) {
     hoveredIndex.value = index;
-    if (candlestickConfig.value.style.tooltip.show) {
-        let html = "";
-        const { period, open, high, low, last, volume, isBullish } = drawableDataset.value[index];
-        const { period:tr_period, open:tr_open, high:tr_high, low:tr_low, last:tr_last, volume:tr_volume } = candlestickConfig.value.translations;
-
-        html += `<div data-cy="candlestick-tooltip-period"><svg style="margin-right:6px" viewBox="0 0 12 12" height="12" width="12"><rect x="0" y="0" height="12" width="12" rx="${candlestickConfig.value.style.layout.candle.borderRadius*3}" stroke="${candlestickConfig.value.style.layout.candle.stroke}" stroke-width="${candlestickConfig.value.style.layout.candle.strokeWidth}" 
-            fill="${candlestickConfig.value.style.layout.candle.gradient.show 
-                ? isBullish 
-                    ? `url(#bullish_gradient_${uid.value})` 
-                    : `url(#bearish_gradient_${uid.value})` 
-                : isBullish 
-                    ? candlestickConfig.value.style.layout.candle.colors.bullish 
-                    : candlestickConfig.value.style.layout.candle.colors.bearish}"/></svg>${period}</div>`;
-        html += `${tr_volume} : <b data-cy="candlestick-tooltip-volume">${ isNaN(volume) ? '-' : Number(volume.toFixed(candlestickConfig.value.style.tooltip.roundingValue)).toLocaleString()}</b>`;
-        html += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid #e1e5e8">`;
-        html += `<div>${tr_open} : <b>${candlestickConfig.value.style.tooltip.prefix} ${isNaN(open.value) ? '-' : Number(open.value.toFixed(candlestickConfig.value.style.tooltip.roundingValue)).toLocaleString()} ${candlestickConfig.value.style.tooltip.suffix}</b></div>`;
-        html += `<div>${tr_high} : <b>${candlestickConfig.value.style.tooltip.prefix} ${isNaN(high.value) ? '-' : Number(high.value.toFixed(candlestickConfig.value.style.tooltip.roundingValue)).toLocaleString()} ${candlestickConfig.value.style.tooltip.suffix}</b></div>`;
-        html += `<div>${tr_low} : <b>${candlestickConfig.value.style.tooltip.prefix} ${isNaN(low.value) ? '-' : Number(low.value.toFixed(candlestickConfig.value.style.tooltip.roundingValue)).toLocaleString()} ${candlestickConfig.value.style.tooltip.suffix}</b></div>`;
-        html += `<div>${tr_last} : <b>${candlestickConfig.value.style.tooltip.prefix} ${isNaN(last.value) ? '-' : Number(last.value.toFixed(candlestickConfig.value.style.tooltip.roundingValue)).toLocaleString()} ${candlestickConfig.value.style.tooltip.suffix}</b></div>`;
-        html += `</div>`;
-
-        tooltipContent.value = `<div style="text-align:right">${html}</div>`
-        isTooltip.value = true;
+
+    const customFormat = candlestickConfig.value.style.tooltip.customFormat;
+
+    if (customFormat && typeof customFormat({
+            seriesIndex: index,
+            datapoint,
+            series: drawableDataset.value,
+            config: candlestickConfig.value
+        }) === 'string') {
+        tooltipContent.value = customFormat({
+            seriesIndex: index,
+            datapoint,
+            series: drawableDataset.value,
+            config: candlestickConfig.value
+        })
+    } else {
+        if (candlestickConfig.value.style.tooltip.show) {
+            let html = "";
+            const { period, open, high, low, last, volume, isBullish } = drawableDataset.value[index];
+            const { period:tr_period, open:tr_open, high:tr_high, low:tr_low, last:tr_last, volume:tr_volume } = candlestickConfig.value.translations;
+    
+            html += `<div data-cy="candlestick-tooltip-period"><svg style="margin-right:6px" viewBox="0 0 12 12" height="12" width="12"><rect x="0" y="0" height="12" width="12" rx="${candlestickConfig.value.style.layout.candle.borderRadius*3}" stroke="${candlestickConfig.value.style.layout.candle.stroke}" stroke-width="${candlestickConfig.value.style.layout.candle.strokeWidth}" 
+                fill="${candlestickConfig.value.style.layout.candle.gradient.show 
+                    ? isBullish 
+                        ? `url(#bullish_gradient_${uid.value})` 
+                        : `url(#bearish_gradient_${uid.value})` 
+                    : isBullish 
+                        ? candlestickConfig.value.style.layout.candle.colors.bullish 
+                        : candlestickConfig.value.style.layout.candle.colors.bearish}"/></svg>${period}</div>`;
+            html += `${tr_volume} : <b data-cy="candlestick-tooltip-volume">${ isNaN(volume) ? '-' : Number(volume.toFixed(candlestickConfig.value.style.tooltip.roundingValue)).toLocaleString()}</b>`;
+            html += `<div style="margin-top:6px;padding-top:6px;border-top:1px solid #e1e5e8">`;
+            html += `<div>${tr_open} : <b>${candlestickConfig.value.style.tooltip.prefix} ${isNaN(open.value) ? '-' : Number(open.value.toFixed(candlestickConfig.value.style.tooltip.roundingValue)).toLocaleString()} ${candlestickConfig.value.style.tooltip.suffix}</b></div>`;
+            html += `<div>${tr_high} : <b>${candlestickConfig.value.style.tooltip.prefix} ${isNaN(high.value) ? '-' : Number(high.value.toFixed(candlestickConfig.value.style.tooltip.roundingValue)).toLocaleString()} ${candlestickConfig.value.style.tooltip.suffix}</b></div>`;
+            html += `<div>${tr_low} : <b>${candlestickConfig.value.style.tooltip.prefix} ${isNaN(low.value) ? '-' : Number(low.value.toFixed(candlestickConfig.value.style.tooltip.roundingValue)).toLocaleString()} ${candlestickConfig.value.style.tooltip.suffix}</b></div>`;
+            html += `<div>${tr_last} : <b>${candlestickConfig.value.style.tooltip.prefix} ${isNaN(last.value) ? '-' : Number(last.value.toFixed(candlestickConfig.value.style.tooltip.roundingValue)).toLocaleString()} ${candlestickConfig.value.style.tooltip.suffix}</b></div>`;
+            html += `</div>`;
+    
+            tooltipContent.value = `<div style="text-align:right">${html}</div>`
+        }
     }
+    isTooltip.value = true;
 }
 
 const __to__ = ref(null);
@@ -560,14 +577,14 @@ defineExpose({
             <!-- TOOLTIP TRAPS -->
             <g>
                 <rect 
-                    v-for="(_, i) in drawableDataset"
+                    v-for="(rect, i) in drawableDataset"
                     :data-cy="`candlestick-trap-${i}`"
                     :x="drawingArea.left + i * slot"
                     :y="drawingArea.top"
                     :height="drawingArea.height"
                     :width="slot"
                     :fill="hoveredIndex === i ? `${candlestickConfig.style.layout.selector.color}${opacity[candlestickConfig.style.layout.selector.opacity]}` : 'transparent'"
-                    @mouseover="useTooltip(i)"
+                    @mouseover="useTooltip(i,rect)"
                     @mouseleave="hoveredIndex = undefined; isTooltip = false"
                 />
             </g>
diff --git a/src/components/vue-ui-donut.vue b/src/components/vue-ui-donut.vue
index d4dd622b..44d721c1 100644
--- a/src/components/vue-ui-donut.vue
+++ b/src/components/vue-ui-donut.vue
@@ -100,7 +100,7 @@ const immutableSet = computed(() => {
                 name: serie.name,
                 color: convertColorToHex(serie.color) || palette[i] || palette[i % palette.length],
                 value: serie.values.reduce((a,b) => a + b, 0),
-                absoluteValues: serie.values
+                absoluteValues: serie.values,
             }
         })
         .sort((a,b) => b.value - a.value)
@@ -123,7 +123,8 @@ const donutSet = computed(() => {
                 name: serie.name,
                 color: convertColorToHex(serie.color) || palette[i] || palette[i % palette.length],
                 value: serie.values.reduce((a,b) => a + b, 0),
-                absoluteValues: serie.values
+                absoluteValues: serie.values,
+                seriesIndex: i
             }
         })
         .sort((a,b) => b.value - a.value)
@@ -184,24 +185,33 @@ const average = computed(() => {
     return total.value / donutSet.value.length;
 });
 
-function useTooltip(arc, i, showTooltip = true) {
-    isTooltip.value = showTooltip;
-    selectedSerie.value = i;
+function useTooltip({datapoint, relativeIndex, seriesIndex, show = false}) {
+    isTooltip.value = show;
+    selectedSerie.value = relativeIndex;
     let html = "";
 
-    html += `<div data-cy="donut-tooltip-name" style="width:100%;text-align:center;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:3px;">${arc.name}</div>`;
-    html += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle data-cy="donut-tooltip-marker" cx="6" cy="6" r="6" stroke="none" fill="${arc.color}"/></svg>`;
-    if(donutConfig.value.style.chart.tooltip.showValue) {
-        html += `<b data-cy="donut-tooltip-value">${ dataLabel({p: donutConfig.value.style.chart.layout.labels.dataLabels.prefix, v: arc.value, s: donutConfig.value.style.chart.layout.labels.dataLabels.suffix, r: donutConfig.value.style.chart.tooltip.roundingValue})}</b>`;
-    }
-    if(donutConfig.value.style.chart.tooltip.showPercentage) {
-        if(!donutConfig.value.style.chart.tooltip.showValue) {
-            html += `<b>${(arc.proportion * 100).toFixed(donutConfig.value.style.chart.tooltip.roundingPercentage)}%</b></div>`;
-        } else {
-            html += `<span>(${(arc.proportion * 100).toFixed(donutConfig.value.style.chart.tooltip.roundingPercentage)}%)</span></div>`;
+    const customFormat = donutConfig.value.style.chart.tooltip.customFormat;
+
+    if (customFormat && typeof customFormat === 'function' && typeof customFormat({ seriesIndex, datapoint, series: immutableSet.value, config: donutConfig.value }) === 'string') {
+        tooltipContent.value = customFormat({ seriesIndex, datapoint, series: immutableSet.value, config: donutConfig.value })
+    } else {
+        html += `<div data-cy="donut-tooltip-name" style="width:100%;text-align:center;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:3px;">${datapoint.name}</div>`;
+        html += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle data-cy="donut-tooltip-marker" cx="6" cy="6" r="6" stroke="none" fill="${datapoint.color}"/></svg>`;
+
+        if(donutConfig.value.style.chart.tooltip.showValue) {
+            html += `<b data-cy="donut-tooltip-value">${ dataLabel({p: donutConfig.value.style.chart.layout.labels.dataLabels.prefix, v: datapoint.value, s: donutConfig.value.style.chart.layout.labels.dataLabels.suffix, r: donutConfig.value.style.chart.tooltip.roundingValue})}</b>`;
         }
+
+        if(donutConfig.value.style.chart.tooltip.showPercentage) {
+            if(!donutConfig.value.style.chart.tooltip.showValue) {
+                html += `<b>${(datapoint.proportion * 100).toFixed(donutConfig.value.style.chart.tooltip.roundingPercentage)}%</b></div>`;
+            } else {
+                html += `<span>(${(datapoint.proportion * 100).toFixed(donutConfig.value.style.chart.tooltip.roundingPercentage)}%)</span></div>`;
+            }
+        }
+
+        tooltipContent.value = `<div>${html}</div>`;
     }
-    tooltipContent.value = `<div>${html}</div>`;
 }
 
 const __to__ = ref(null);
@@ -462,7 +472,12 @@ defineExpose({
                 data-cy-donut-trap
                 :d="arc.arcSlice" 
                 :fill="selectedSerie === i ? 'rgba(0,0,0,0.1)' : 'transparent'" 
-                @mouseenter="useTooltip(arc, i, true)"
+                @mouseenter="useTooltip({
+                    datapoint: arc,
+                    relativeIndex: i,
+                    seriesIndex: arc.seriesIndex,
+                    show: true
+                })"
                 @mouseleave="isTooltip = false; selectedSerie = null"
                 @click="segregate(i)"
             />
diff --git a/src/components/vue-ui-heatmap.vue b/src/components/vue-ui-heatmap.vue
index ef892274..fe66b24f 100644
--- a/src/components/vue-ui-heatmap.vue
+++ b/src/components/vue-ui-heatmap.vue
@@ -152,7 +152,7 @@ const mutableDataset = computed(() => {
                         value: v,
                         yAxisName: ds.name,
                         xAxisName: dataLabels.value.xLabels[i],
-                        id: `vue-data-ui-heatmap-cell-${Math.random()}`
+                        id: `vue-data-ui-heatmap-cell-${createUid()}`
                     }
                 } else {
                     return {
@@ -162,7 +162,7 @@ const mutableDataset = computed(() => {
                         value: v,
                         yAxisName: ds.name,
                         xAxisName: dataLabels.value.xLabels[i],
-                        id: `vue-data-ui-heatmap-cell-${Math.random()}`
+                        id: `vue-data-ui-heatmap-cell-${createUid()}`
                     }
                 }
             })
@@ -172,16 +172,33 @@ const mutableDataset = computed(() => {
 
 const hoveredValue = ref(null);
 
-function useTooltip(datapoint) {
+function useTooltip(datapoint, seriesIndex) {
     const { value, yAxisName, xAxisName,id } = datapoint;
     hoveredCell.value = id;
     hoveredValue.value = value;
     isTooltip.value = true;
     let html = "";
 
-    html += `<div data-cy="heatmap-tootlip-name">${yAxisName} ${xAxisName ? `${xAxisName}` : ''}</div>`;
-    html += `<div data-cy="heatmap-tooltip-value" style="margin-top:6px;padding-top:6px;border-top:1px solid #e1e5e8;font-weight:bold;display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:center"><span style="color:${interpolateColorHex(heatmapConfig.value.style.layout.cells.colors.cold, heatmapConfig.value.style.layout.cells.colors.hot, minValue.value, maxValue.value, value)}">⬤</span><span>${isNaN(value) ? "-" : dataLabel({p:heatmapConfig.value.style.layout.dataLabels.prefix, v: value, s: heatmapConfig.value.style.layout.dataLabels.suffix, r:heatmapConfig.value.style.tooltip.roundingValue })}</span></div>`
-    tooltipContent.value = `<div style="font-size:${heatmapConfig.value.style.tooltip.fontSize}px">${html}</div>`;
+    const customFormat = heatmapConfig.value.style.tooltip.customFormat;
+
+    if (customFormat && typeof customFormat({
+            datapoint,
+            seriesIndex,
+            series: mutableDataset.value,
+            config: heatmapConfig.value
+        }) === 'string') {
+        tooltipContent.value = customFormat({
+            datapoint,
+            seriesIndex,
+            series: mutableDataset.value,
+            config: heatmapConfig.value
+        })
+    } else {
+        html += `<div data-cy="heatmap-tootlip-name">${yAxisName} ${xAxisName ? `${xAxisName}` : ''}</div>`;
+        html += `<div data-cy="heatmap-tooltip-value" style="margin-top:6px;padding-top:6px;border-top:1px solid #e1e5e8;font-weight:bold;display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:center"><span style="color:${interpolateColorHex(heatmapConfig.value.style.layout.cells.colors.cold, heatmapConfig.value.style.layout.cells.colors.hot, minValue.value, maxValue.value, value)}">⬤</span><span>${isNaN(value) ? "-" : dataLabel({p:heatmapConfig.value.style.layout.dataLabels.prefix, v: value, s: heatmapConfig.value.style.layout.dataLabels.suffix, r:heatmapConfig.value.style.tooltip.roundingValue })}</span></div>`
+        tooltipContent.value = `<div style="font-size:${heatmapConfig.value.style.tooltip.fontSize}px">${html}</div>`;
+    }
+
 }
 
 const sideLegendIndicatorY = computed(() => {
@@ -390,7 +407,7 @@ defineExpose({
                         :height="cellSize.height"
                         fill="transparent"
                         stroke="none"
-                        @mouseover="useTooltip(cell)"
+                        @mouseover="useTooltip(cell, i)"
                         @mouseout="isTooltip = false; hoveredCell = undefined; hoveredValue = null"
                     />
                 </g>
diff --git a/src/components/vue-ui-molecule.vue b/src/components/vue-ui-molecule.vue
index a6cf5ab5..9b2b952c 100644
--- a/src/components/vue-ui-molecule.vue
+++ b/src/components/vue-ui-molecule.vue
@@ -247,15 +247,31 @@ function unzoom(event) {
 }
 
 function createTooltipContent(node) {
-    let html = "";
 
-    html += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${node.color}">⬤</div><div>${node.name}</div></div>`;
-    if(node.details) {
-        html += `<div style="width:100%;border-top:1px solid #e1e5e8;margin-top: 2px">${node.details}</div>`
+    const customFormat = moleculeConfig.value.style.chart.tooltip.customFormat;
+
+    if (customFormat && typeof customFormat({
+            seriesIndex: -1,
+            datapoint: node,
+            series: convertedDataset.value,
+            config: moleculeConfig.value
+        }) === 'string') {
+        tooltipContent.value = customFormat({
+            seriesIndex: -1, // well, ok
+            datapoint: node,
+            series: convertedDataset.value,
+            config: moleculeConfig.value
+        })
+    } else {
+        let html = "";
+    
+        html += `<div style="display:flex;align-items:center;gap:3px"><div style="color:${node.color}">⬤</div><div>${node.name}</div></div>`;
+        if(node.details) {
+            html += `<div style="width:100%;border-top:1px solid #e1e5e8;margin-top: 2px">${node.details}</div>`
+        }
+    
+        tooltipContent.value = `<div style="font-family:inherit">${html}</div>`;
     }
-
-    tooltipContent.value = `<div style="font-family:inherit">${html}</div>`;
-
 }
 
 const hoveredNode = ref(null);
diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue
index b5959b23..9544b4ec 100644
--- a/src/components/vue-ui-quadrant.vue
+++ b/src/components/vue-ui-quadrant.vue
@@ -416,24 +416,44 @@ function getQuadrantSide(plot) {
 const hoveredPlotId = ref(null);
 const hoveredPlot = ref(null);
 
-function hoverPlot(category, plot) {
+function useTooltip(category, plot, categoryIndex) {
     hoveredPlotId.value = plot.uid;
     hoveredPlot.value = {
         color: category.color,
         shape: category.shape
     }
     isTooltip.value = true;
-    let html = "";
 
-    if(plot.quadrantSide) {
-        html += `<div style="color:${quadrantConfig.value.style.chart.layout.labels.quadrantLabels[plot.quadrantSide].color};font-weight:${quadrantConfig.value.style.chart.layout.labels.quadrantLabels[plot.quadrantSide].bold ? 'bold' : '400'}">${quadrantConfig.value.style.chart.layout.labels.quadrantLabels[plot.quadrantSide].text}</div>`;
+    const customFormat = quadrantConfig.value.style.chart.tooltip.customFormat;
+
+    if (customFormat && typeof customFormat({
+            seriesIndex: categoryIndex,
+            datapoint: plot,
+            series: drawableDataset.value,
+            config: quadrantConfig.value
+        }) === 'string') {
+
+        tooltipContent.value = customFormat({
+            seriesIndex: categoryIndex,
+            datapoint: plot,
+            series: drawableDataset.value,
+            config: quadrantConfig.value
+        })
+
+    } else {
+        let html = "";
+    
+        if(plot.quadrantSide) {
+            html += `<div style="color:${quadrantConfig.value.style.chart.layout.labels.quadrantLabels[plot.quadrantSide].color};font-weight:${quadrantConfig.value.style.chart.layout.labels.quadrantLabels[plot.quadrantSide].bold ? 'bold' : '400'}">${quadrantConfig.value.style.chart.layout.labels.quadrantLabels[plot.quadrantSide].text}</div>`;
+        }
+        html += `<div>${category.name}</div>`;
+        html += `<div style="padding-bottom:6px;border-bottom:1px solid #e1e5e8;margin-bottom:3px">${plot.name}</div>`;
+        html += `<div>${quadrantConfig.value.style.chart.layout.grid.xAxis.name ? quadrantConfig.value.style.chart.layout.grid.xAxis.name : 'x'} : <b>${plot.xValue.toFixed(quadrantConfig.value.style.chart.tooltip.roundingValue)}</b></div>`;  
+        html += `<div>${quadrantConfig.value.style.chart.layout.grid.yAxis.name ? quadrantConfig.value.style.chart.layout.grid.yAxis.name : 'y'} : <b>${plot.yValue.toFixed(quadrantConfig.value.style.chart.tooltip.roundingValue)}</b></div>`;  
+    
+        tooltipContent.value = `<div style="text-align:left;font-size:${quadrantConfig.value.style.chart.tooltip.fontSize}px">${html}</div>`;
     }
-    html += `<div>${category.name}</div>`;
-    html += `<div style="padding-bottom:6px;border-bottom:1px solid #e1e5e8;margin-bottom:3px">${plot.name}</div>`;
-    html += `<div>${quadrantConfig.value.style.chart.layout.grid.xAxis.name ? quadrantConfig.value.style.chart.layout.grid.xAxis.name : 'x'} : <b>${plot.xValue.toFixed(quadrantConfig.value.style.chart.tooltip.roundingValue)}</b></div>`;  
-    html += `<div>${quadrantConfig.value.style.chart.layout.grid.yAxis.name ? quadrantConfig.value.style.chart.layout.grid.yAxis.name : 'y'} : <b>${plot.yValue.toFixed(quadrantConfig.value.style.chart.tooltip.roundingValue)}</b></div>`;  
 
-    tooltipContent.value = `<div style="text-align:left;font-size:${quadrantConfig.value.style.chart.tooltip.fontSize}px">${html}</div>`;
 }
 
 function selectPlot(category, plot) {
@@ -819,7 +839,7 @@ defineExpose({
 
             <!-- PLOTS -->
             <template v-if="!quadrantConfig.style.chart.layout.labels.plotLabels.showAsTag">
-                <g v-for="category in drawableDataset">
+                <g v-for="(category, i) in drawableDataset">
                     <Shape
                         v-for="plot in category.series"
                         :color="category.color"
@@ -829,7 +849,7 @@ defineExpose({
                         :shape="category.shape"
                         :stroke="quadrantConfig.style.chart.layout.plots.outline ? quadrantConfig.style.chart.layout.plots.outlineColor : 'none'"
                         :strokeWidth="quadrantConfig.style.chart.layout.plots.outlineWidth"
-                        @mouseover="hoverPlot(category, plot)"
+                        @mouseover="useTooltip(category, plot, i)"
                         @mouseleave="isTooltip = false; hoveredPlotId = null; hoveredPlot = null"
                         @click="selectPlot(category, plot)"
                     />
@@ -853,8 +873,8 @@ defineExpose({
 
             <template v-else>
                 <g v-if="mutableConfig.plotLabels.show">
-                    <template v-for="category in drawableDataset">
-                        <foreignObject v-for="plot in category.series" style="overflow: visible;" height="10" width="100" :x="plot.x - 50" :y="plot.y - (quadrantConfig.style.chart.layout.labels.plotLabels.fontSize)" @mouseover="hoverPlot(category, plot)"
+                    <template v-for="(category, i) in drawableDataset">
+                        <foreignObject v-for="plot in category.series" style="overflow: visible;" height="10" width="100" :x="plot.x - 50" :y="plot.y - (quadrantConfig.style.chart.layout.labels.plotLabels.fontSize)" @mouseover="useTooltip(category, plot, i)"
                             @mouseleave="isTooltip = false; hoveredPlotId = null; hoveredPlot = null"
                             @click="selectPlot(category, plot)">
                             <div :style="`color:${adaptColorToBackground(category.color)};margin: 0 auto; font-size:${quadrantConfig.style.chart.layout.labels.plotLabels.fontSize}px; text-align:center;background:${category.color}; padding: 2px 4px; border-radius: 12px; height: ${quadrantConfig.style.chart.layout.labels.plotLabels.fontSize*1.5}px`">
@@ -911,7 +931,7 @@ defineExpose({
             :parent="quadrantChart"
             :content="tooltipContent"
         >
-            <svg height="14" width="14" viewBox="0 0 20 20">
+            <svg height="14" width="14" viewBox="0 0 20 20" v-if="quadrantConfig.style.chart.tooltip.showShape">
                 <Shape
                     :plot="{ x: 10, y: 10 }"
                     :shape="hoveredPlot.shape"
diff --git a/src/components/vue-ui-radar.vue b/src/components/vue-ui-radar.vue
index e9530715..3f77cb9d 100644
--- a/src/components/vue-ui-radar.vue
+++ b/src/components/vue-ui-radar.vue
@@ -295,20 +295,39 @@ function useTooltip(apex, i) {
     selectedIndex.value = i;
     isTooltip.value = true;
     let html = "";
-    html += `<div style="width:100%;text-align:center;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:3px;">${apex.name}</div>`;
-    for(let k = 0; k < apex.values.length; k += 1) {
-        if(!segregated.value.includes(k)) {
-            sparkBarData.value.push({
-                name: datasetCopy.value[k].name,
-                value: apex.values[k] / apex.target * 100,
-                color: datasetCopy.value[k].color,
-                suffix: '%)',
-                prefix: `${dataLabel({p: datasetCopy.value[k].prefix ?? '',v:apex.values[k],s:datasetCopy.value[k].suffix ?? '', r:radarConfig.value.style.chart.tooltip.roundingValue})} (`,
-                rounding: radarConfig.value.style.chart.tooltip.roundingPercentage
-            })
+
+    const customFormat = radarConfig.value.style.chart.tooltip.customFormat;
+    console.log({customFormat})
+
+    if (customFormat && typeof customFormat({
+            seriesIndex: i,
+            datapoint: apex,
+            series: { categories: datasetCopy.value, datapoints: seriesCopy.value, radar: radar.value  },
+            config: radarConfig.value
+        }) === 'string') {
+        tooltipContent.value = customFormat({
+            seriesIndex: i,
+            datapoint: apex,
+            series: { categories: datasetCopy.value, datapoints: seriesCopy.value, radar: radar.value  },
+            config: radarConfig.value
+        })
+    } else {
+        html += `<div style="width:100%;text-align:center;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:3px;">${apex.name}</div>`;
+        for(let k = 0; k < apex.values.length; k += 1) {
+            if(!segregated.value.includes(k)) {
+                sparkBarData.value.push({
+                    name: datasetCopy.value[k].name,
+                    value: apex.values[k] / apex.target * 100,
+                    color: datasetCopy.value[k].color,
+                    suffix: '%)',
+                    prefix: `${dataLabel({p: datasetCopy.value[k].prefix ?? '',v:apex.values[k],s:datasetCopy.value[k].suffix ?? '', r:radarConfig.value.style.chart.tooltip.roundingValue})} (`,
+                    rounding: radarConfig.value.style.chart.tooltip.roundingPercentage
+                })
+            }
         }
+        tooltipContent.value = html;
     }
-    tooltipContent.value = html;
+
 }
 
 const __to__ = ref(null);
diff --git a/src/components/vue-ui-rings.vue b/src/components/vue-ui-rings.vue
index f334f41b..746872d8 100644
--- a/src/components/vue-ui-rings.vue
+++ b/src/components/vue-ui-rings.vue
@@ -184,35 +184,51 @@ const maxHeight = computed(() => {
   return svg.value.height - ringsConfig.value.style.chart.layout.rings.strokeWidth * 2;
 });
 
-function useTooltip(index) {
+function useTooltip(index, datapoint) {
   if (segregated.value.length === props.dataset.length) return;
-  selectedSerie.value = index;
 
+  selectedSerie.value = index;
   const selected = convertedDataset.value[index];
-
-  let html = "";
-
-  html += `<div data-cy="waffle-tooltip-name" style="width:100%;text-align:center;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:3px;">${selected.name}</div>`;
-
-  html += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle data-cy="waffle-tooltip-marker" cx="6" cy="6" r="6" stroke="none" fill="${selected.color}" /></svg>`;
-  if (ringsConfig.value.style.chart.tooltip.showValue) {
-    html += `<b data-cy="waffle-tooltip-value">${dataLabel({p:ringsConfig.value.style.chart.layout.labels.dataLabels.prefix, v: selected.value, s:ringsConfig.value.style.chart.layout.labels.dataLabels.suffix, r:ringsConfig.value.style.chart.tooltip.roundingValue})}</b>`;
-  }
-  if (ringsConfig.value.style.chart.tooltip.showPercentage) {
-    if (!ringsConfig.value.style.chart.tooltip.showValue) {
-      html += `<b>${((selected.value / grandTotal.value) * 100).toFixed(
-        ringsConfig.value.style.chart.tooltip.roundingPercentage
-      )}%</b></div>`;
-    } else {
-      html += `<span data-cy="waffle-tooltip-percentage">(${(
-        (selected.value / grandTotal.value) *
-        100
-      ).toFixed(
-        ringsConfig.value.style.chart.tooltip.roundingPercentage
-      )}%)</span></div>`;
+  const customFormat = ringsConfig.value.style.chart.tooltip.customFormat;
+
+  if (customFormat && typeof customFormat({
+      seriesIndex: index,
+      datapoint,
+      series: convertedDataset.value,
+      config: ringsConfig.value
+    }) === 'string') {
+    tooltipContent.value = customFormat({
+      seriesIndex: index,
+      datapoint,
+      series: convertedDataset.value,
+      config: ringsConfig.value
+    })
+  } else {
+    let html = "";
+  
+    html += `<div data-cy="waffle-tooltip-name" style="width:100%;text-align:center;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:3px;">${selected.name}</div>`;
+  
+    html += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle data-cy="waffle-tooltip-marker" cx="6" cy="6" r="6" stroke="none" fill="${selected.color}" /></svg>`;
+    if (ringsConfig.value.style.chart.tooltip.showValue) {
+      html += `<b data-cy="waffle-tooltip-value">${dataLabel({p:ringsConfig.value.style.chart.layout.labels.dataLabels.prefix, v: selected.value, s:ringsConfig.value.style.chart.layout.labels.dataLabels.suffix, r:ringsConfig.value.style.chart.tooltip.roundingValue})}</b>`;
+    }
+    if (ringsConfig.value.style.chart.tooltip.showPercentage) {
+      if (!ringsConfig.value.style.chart.tooltip.showValue) {
+        html += `<b>${((selected.value / grandTotal.value) * 100).toFixed(
+          ringsConfig.value.style.chart.tooltip.roundingPercentage
+        )}%</b></div>`;
+      } else {
+        html += `<span data-cy="waffle-tooltip-percentage">(${(
+          (selected.value / grandTotal.value) *
+          100
+        ).toFixed(
+          ringsConfig.value.style.chart.tooltip.roundingPercentage
+        )}%)</span></div>`;
+      }
     }
+    tooltipContent.value = html;
   }
-  tooltipContent.value = html;
+  
   isTooltip.value = true;
 }
 
@@ -480,7 +496,7 @@ defineExpose({
           "
           :r="((maxHeight * ring.proportion) / 2) * 0.9"
           fill="transparent"
-          @mouseenter="useTooltip(i)"
+          @mouseenter="useTooltip(i, ring)"
           @mouseleave="
             selectedSerie = null;
             isTooltip = false;
diff --git a/src/components/vue-ui-scatter.vue b/src/components/vue-ui-scatter.vue
index d2a64881..cfdf4cc7 100644
--- a/src/components/vue-ui-scatter.vue
+++ b/src/components/vue-ui-scatter.vue
@@ -203,26 +203,43 @@ function getData() {
 const selectedPlotId = ref(undefined);
 const selectedPlot = ref(null);
 
-function hoverPlot(plot) {
+function useTooltip(plot, seriesIndex) {
     selectedPlotId.value = plot.id;
     selectedPlot.value = plot;
     let html = "";
 
-    if (plot.clusterName) {
-        html += `<div style="display:flex;gap:3px;align-items:center">${plot.clusterName}</div>`
-    }
-
-    if (plot.v.name) {
-        html += `<div>${plot.v.name}</div>`
+    const customFormat = scatterConfig.value.style.tooltip.customFormat;
+
+    if (customFormat && typeof customFormat({
+            datapoint: plot,
+            seriesIndex,
+            series: drawableDataset.value,
+            config: scatterConfig.value
+        }) === 'string') {
+        tooltipContent.value = customFormat({
+            datapoint: plot,
+            seriesIndex,
+            series: drawableDataset.value,
+            config: scatterConfig.value
+        })
+    } else {
+        if (plot.clusterName) {
+            html += `<div style="display:flex;gap:3px;align-items:center">${plot.clusterName}</div>`
+        }
+    
+        if (plot.v.name) {
+            html += `<div>${plot.v.name}</div>`
+        }
+    
+        html += `<div style="text-align:left;margin-top:6px;padding-top:6px;border-top:1px solid #e1e5e8">`;
+        html += `<div>${scatterConfig.value.style.layout.dataLabels.xAxis.name} : <b>${isNaN(plot.v.x) ? '-' : Number(plot.v.x.toFixed(scatterConfig.value.style.layout.dataLabels.xAxis.roundingValue)).toLocaleString()}</b></div>`;
+        html += `<div>${scatterConfig.value.style.layout.dataLabels.yAxis.name} : <b>${isNaN(plot.v.y) ? '-' : Number(plot.v.y.toFixed(scatterConfig.value.style.layout.dataLabels.yAxis.roundingValue)).toLocaleString()}</b></div>`;
+        html += `${scatterConfig.value.style.layout.plots.deviation.translation} : <b>${Number(plot.deviation.toFixed(scatterConfig.value.style.layout.plots.deviation.roundingValue)).toLocaleString()}</b>`
+        html += `</div>`;
+    
+        tooltipContent.value = `<div>${html}</div>`
     }
 
-    html += `<div style="text-align:left;margin-top:6px;padding-top:6px;border-top:1px solid #e1e5e8">`;
-    html += `<div>${scatterConfig.value.style.layout.dataLabels.xAxis.name} : <b>${isNaN(plot.v.x) ? '-' : Number(plot.v.x.toFixed(scatterConfig.value.style.layout.dataLabels.xAxis.roundingValue)).toLocaleString()}</b></div>`;
-    html += `<div>${scatterConfig.value.style.layout.dataLabels.yAxis.name} : <b>${isNaN(plot.v.y) ? '-' : Number(plot.v.y.toFixed(scatterConfig.value.style.layout.dataLabels.yAxis.roundingValue)).toLocaleString()}</b></div>`;
-    html += `${scatterConfig.value.style.layout.plots.deviation.translation} : <b>${Number(plot.deviation.toFixed(scatterConfig.value.style.layout.plots.deviation.roundingValue)).toLocaleString()}</b>`
-    html += `</div>`;
-
-    tooltipContent.value = `<div>${html}</div>`
     isTooltip.value = true;
 }
 
@@ -467,7 +484,7 @@ defineExpose({
                         :fill="`${ds.color}${opacity[scatterConfig.style.layout.plots.opacity * 100]}`"
                         :stroke="scatterConfig.style.layout.plots.stroke"
                         :stroke-width="scatterConfig.style.layout.plots.strokeWidth"
-                        @mouseover="hoverPlot(plot)"
+                        @mouseover="useTooltip(plot, i)"
                         @mouseleave="clearHover"
                         :style="`opacity:${scatterConfig.style.layout.plots.significance.show && Math.abs(plot.deviation) > scatterConfig.style.layout.plots.significance.deviationThreshold ? scatterConfig.style.layout.plots.significance.opacity : 1}`"
                     />
@@ -482,7 +499,7 @@ defineExpose({
                         :color="`${ds.color}${opacity[scatterConfig.style.layout.plots.opacity * 100]}`"
                         :stroke="scatterConfig.style.layout.plots.stroke"
                         :strokeWidth="scatterConfig.style.layout.plots.strokeWidth"
-                        @mouseover="hoverPlot(plot)"
+                        @mouseover="useTooltip(plot, i)"
                         @mouseleave="clearHover"
                         :style="`opacity:${scatterConfig.style.layout.plots.significance.show && Math.abs(plot.deviation) > scatterConfig.style.layout.plots.significance.deviationThreshold ? scatterConfig.style.layout.plots.significance.opacity : 1}`"
                     />
@@ -641,7 +658,7 @@ defineExpose({
             :parent="scatterChart"
             :content="tooltipContent"
         >
-            <div style="width: 100%; display: flex; align-items:center;justify-content:center;">
+            <div style="width: 100%; display: flex; align-items:center;justify-content:center;" v-if="scatterConfig.style.tooltip.showShape">
                 <svg viewBox="0 0 20 20" height="20" width="20" style="overflow: hidden;background:transparent;">
                     <Shape 
                         :shape="selectedPlot.shape"
diff --git a/src/components/vue-ui-vertical-bar.vue b/src/components/vue-ui-vertical-bar.vue
index 4e515c18..0cd9321c 100644
--- a/src/components/vue-ui-vertical-bar.vue
+++ b/src/components/vue-ui-vertical-bar.vue
@@ -251,30 +251,49 @@ function getData() {
 
 const selectedBarId = ref(null);
 
-function useTooltip(bar) {
+function useTooltip(bar, seriesIndex) {
     isTooltip.value = true;
     selectedBarId.value = bar.id;
     let html = "";
     const serieName = bar.isChild ? bar.parentName : bar.name;
     const childName = bar.isChild ? bar.name : "";
 
-    html += `<div style="width:100%;text-align:center;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:3px;text-align:left;">
-            <div style="display:flex;align-items:center;gap:4px;"><svg viewBox="0 0 12 12" height="14" width="14"><rect x="0" y="0" height="12" width="12" rx="2" stroke="none" fill="${bar.color}"/></svg> ${ serieName }</div>
-            ${childName ? `<div>${childName}</div>` : ''}
-        </div>`;
+    const customFormat = verticalBarConfig.value.style.chart.tooltip.customFormat;
+
+    if (customFormat && typeof customFormat({
+            datapoint: bar,
+            series: immutableDataset.value,
+            config: verticalBarConfig.value,
+            seriesIndex
+        }) === 'string') {
+
+        tooltipContent.value = customFormat({
+            datapoint: bar,
+            series: immutableDataset.value,
+            config: verticalBarConfig.value,
+            seriesIndex
+        })
+
+    } else {
+        html += `<div style="width:100%;text-align:center;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:3px;text-align:left;">
+                <div style="display:flex;align-items:center;gap:4px;"><svg viewBox="0 0 12 12" height="14" width="14"><rect x="0" y="0" height="12" width="12" rx="2" stroke="none" fill="${bar.color}"/></svg> ${ serieName }</div>
+                ${childName ? `<div>${childName}</div>` : ''}
+            </div>`;
+        
+        if (verticalBarConfig.value.style.chart.tooltip.showValue) {
+            html += `<div>${verticalBarConfig.value.translations.value} : <b>${verticalBarConfig.value.style.chart.tooltip.prefix}${[undefined, NaN, null].includes(bar.value) ? '-' : bar.value.toFixed(verticalBarConfig.value.style.chart.tooltip.roundingValue)}${verticalBarConfig.value.style.chart.tooltip.suffix}</b></div>`;
+        }    
     
-    if (verticalBarConfig.value.style.chart.tooltip.showValue) {
-        html += `<div>${verticalBarConfig.value.translations.value} : <b>${verticalBarConfig.value.style.chart.tooltip.prefix}${[undefined, NaN, null].includes(bar.value) ? '-' : bar.value.toFixed(verticalBarConfig.value.style.chart.tooltip.roundingValue)}${verticalBarConfig.value.style.chart.tooltip.suffix}</b></div>`;
-    }    
-
-    if(verticalBarConfig.value.style.chart.tooltip.showPercentage) {
-        html += `<div>${verticalBarConfig.value.translations.percentageToTotal} : <b>${isNaN(bar.value / total.value) ? '-' : `${(bar.value / total.value * 100).toFixed(verticalBarConfig.value.style.chart.tooltip.roundingPercentage)}`}%</b></div>`;
-        if(bar.isChild) {
-            html += `<div>${verticalBarConfig.value.translations.percentageToSerie} : <b>${isNaN(bar.value / bar.parentValue) ? '-' : `${(bar.value / bar.parentValue * 100).toFixed(verticalBarConfig.value.style.chart.tooltip.roundingPercentage)}`}%</b></div>`;
+        if(verticalBarConfig.value.style.chart.tooltip.showPercentage) {
+            html += `<div>${verticalBarConfig.value.translations.percentageToTotal} : <b>${isNaN(bar.value / total.value) ? '-' : `${(bar.value / total.value * 100).toFixed(verticalBarConfig.value.style.chart.tooltip.roundingPercentage)}`}%</b></div>`;
+            if(bar.isChild) {
+                html += `<div>${verticalBarConfig.value.translations.percentageToSerie} : <b>${isNaN(bar.value / bar.parentValue) ? '-' : `${(bar.value / bar.parentValue * 100).toFixed(verticalBarConfig.value.style.chart.tooltip.roundingPercentage)}`}%</b></div>`;
+            }
         }
+    
+        tooltipContent.value = `<div style="text-align:left">${html}</div>`;
     }
 
-    tooltipContent.value = `<div style="text-align:left">${html}</div>`;
 }
 
 const __to__ = ref(null);
@@ -607,7 +626,7 @@ defineExpose({
                     :width="svg.width"
                     :height="verticalBarConfig.style.chart.layout.bars.height + verticalBarConfig.style.chart.layout.bars.gap"
                     :fill="selectedBarId === serie.id ? `${verticalBarConfig.style.chart.layout.highlighter.color}${opacity[verticalBarConfig.style.chart.layout.highlighter.opacity]}` : 'transparent'"
-                    @mouseenter="useTooltip(serie)"
+                    @mouseenter="useTooltip(serie, i)"
                     @mouseleave="hoveredBar = null; isTooltip = false; selectedBarId = null"
                 />
             </g>
diff --git a/src/components/vue-ui-waffle.vue b/src/components/vue-ui-waffle.vue
index 282f12e6..1840d14d 100644
--- a/src/components/vue-ui-waffle.vue
+++ b/src/components/vue-ui-waffle.vue
@@ -102,7 +102,8 @@ const datasetCopy = computed(() => {
         return {
             ...s,
             color: convertColorToHex(s.color) || palette[i] || palette[i % palette.length],
-            uid: `serie_${i}`
+            uid: `serie_${i}`,
+            absoluteIndex: i
         }
     });
 });
@@ -125,6 +126,7 @@ const waffleSet = computed(() => {
         .filter((serie, i) => !segregated.value.includes(serie.uid))
         .map((serie, i) => {
             return {
+                absoluteIndex: serie.absoluteIndex,
                 uid: serie.uid,
                 name: serie.name,
                 color: serie.color,
@@ -140,6 +142,7 @@ const immutableSet = computed(() => {
     return datasetCopy.value
         .map((serie, i) => {
             return {
+                absoluteIndex: serie.absoluteIndex,
                 uid: serie.uid,
                 name: serie.name,
                 color: serie.color,
@@ -242,25 +245,33 @@ const total = computed(() => {
 
 function useTooltip(index) {
     if(segregated.value.length === props.dataset.length) return;
+    
     const selected = rects.value[index];
     isTooltip.value = true;
     selectedSerie.value = rects.value[index].serieIndex;
 
-    let html = "";
-
-    html += `<div data-cy="waffle-tooltip-name" style="width:100%;text-align:center;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:3px;">${selected.name}</div>`; 
-    html += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><rect data-cy="waffle-tooltip-marker" x="0" y="0" height="12" width="12" stroke="none" rx="1" fill="${selected.color}" /></svg>`;
-    if(waffleConfig.value.style.chart.tooltip.showValue) {
-        html += `<b data-cy="waffle-tooltip-value">${dataLabel({p:waffleConfig.value.style.chart.layout.labels.dataLabels.prefix, v: selected.value, s: waffleConfig.value.style.chart.layout.labels.dataLabels.suffix, r: waffleConfig.value.style.chart.tooltip.roundingValue})}</b>`;
-    }
-    if(waffleConfig.value.style.chart.tooltip.showPercentage) {
-        if(!waffleConfig.value.style.chart.tooltip.showValue) {
-            html += `<b>${(selected.value / total.value * 100).toFixed(waffleConfig.value.style.chart.tooltip.roundingPercentage)}%</b></div>`;
-        } else {
-            html += `<span data-cy="waffle-tooltip-percentage">(${(selected.value / total.value * 100).toFixed(waffleConfig.value.style.chart.tooltip.roundingPercentage)}%)</span></div>`;
+    const customFormat = waffleConfig.value.style.chart.tooltip.customFormat;
+
+    if(customFormat && typeof customFormat({ seriesIndex: rects.value[index].absoluteIndex, datapoint: selected, series: datasetCopy.value, config: waffleConfig.value}) === 'string') {
+        tooltipContent.value = customFormat({ seriesIndex: rects.value[index].absoluteIndex, datapoint: selected, series: datasetCopy.value, config: waffleConfig.value})
+    } else {
+        let html = "";
+    
+        html += `<div data-cy="waffle-tooltip-name" style="width:100%;text-align:center;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:3px;">${selected.name}</div>`; 
+        html += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><rect data-cy="waffle-tooltip-marker" x="0" y="0" height="12" width="12" stroke="none" rx="1" fill="${selected.color}" /></svg>`;
+        if(waffleConfig.value.style.chart.tooltip.showValue) {
+            html += `<b data-cy="waffle-tooltip-value">${dataLabel({p:waffleConfig.value.style.chart.layout.labels.dataLabels.prefix, v: selected.value, s: waffleConfig.value.style.chart.layout.labels.dataLabels.suffix, r: waffleConfig.value.style.chart.tooltip.roundingValue})}</b>`;
         }
+        if(waffleConfig.value.style.chart.tooltip.showPercentage) {
+            if(!waffleConfig.value.style.chart.tooltip.showValue) {
+                html += `<b>${(selected.value / total.value * 100).toFixed(waffleConfig.value.style.chart.tooltip.roundingPercentage)}%</b></div>`;
+            } else {
+                html += `<span data-cy="waffle-tooltip-percentage">(${(selected.value / total.value * 100).toFixed(waffleConfig.value.style.chart.tooltip.roundingPercentage)}%)</span></div>`;
+            }
+        }
+        tooltipContent.value = html;
     }
-    tooltipContent.value = html;
+
 }
 
 const emit = defineEmits(['selectLegend']);
diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue
index e288bb84..89284063 100644
--- a/src/components/vue-ui-xy.vue
+++ b/src/components/vue-ui-xy.vue
@@ -1042,78 +1042,101 @@ export default {
                 }
             });
 
+            
             let html = "";
-
+            
             let sum = selectedSeries.map(s => s.value).filter(s => this.isSafeValue(s) && s !== null).reduce((a,b) => Math.abs(a) + Math.abs(b), 0);
-
+            
             const time = this.timeLabels[this.selectedSerieIndex];
-            if(time) {
-                html += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid #e1e5e8; width:100%">${time}</div>`;
-            }
-            selectedSeries.forEach(s => {
-                if(this.isSafeValue(s.value) && s.value !== null) {
-                    let shape = '';
-                    let insideShape = '';
-                    switch (this.icons[s.type]) {
-                        case 'bar':
-                            shape = `<svg viewBox="0 0 12 12" height="14" width="14"><rect x="0" y="0" rx="1" stroke="none" height="12" width="12" fill="${s.color}" /></svg>`;
-                            break;
-                        
-                        case 'line':
-                            if(!s.shape || !['star', 'triangle', 'square', 'diamond', 'pentagon', 'hexagon'].includes(s.shape)) {
-                                insideShape = `<circle cx="10" cy="8" r="4" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" fill="${s.color}" />`
-                            } else if(s.shape === 'triangle') {
-                                insideShape = `<path d="${createPolygonPath({ plot: { x: 10, y: 8}, radius: 4, sides: 3, rotation: 0.52}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" />`
-                            } else if(s.shape === 'square') {
-                                insideShape = `<path d="${createPolygonPath({ plot: { x: 10, y: 8}, radius: 4, sides: 4, rotation: 0.8}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" />`
-                            } else if(s.shape === 'diamond') {
-                                insideShape = `<path d="${createPolygonPath({ plot: { x: 10, y: 8}, radius: 4, sides: 4, rotation: 0}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" />`
-                            } else if(s.shape === 'pentagon') {
-                                insideShape = `<path d="${createPolygonPath({ plot: { x: 10, y: 8}, radius: 4, sides: 5, rotation: 0.95}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" />`
-                            } else if(s.shape === 'hexagon') {
-                                insideShape = `<path d="${createPolygonPath({ plot: { x: 10, y: 8}, radius: 4, sides: 6, rotation: 0}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" />`
-                            } else if(s.shape === 'star') {
-                                insideShape = `<polygon stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" fill="${s.color}" points="${createStar({ plot: { x: 10, y: 8 }, radius: 4})}" />`
-                            }
-                            shape = `<svg viewBox="0 0 20 12" height="14" width="20"><rect rx="3" x="0" y="6" stroke="none" height="4" width="20" fill="${s.color}" />${insideShape}</svg>`;
-                            break;
-
-                        case 'plot':
-                            if (!s.shape || !['star', 'triangle', 'square', 'diamond', 'pentagon', 'hexagon'].includes(s.shape)) {
-                                shape = `<svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" fill="${s.color}" /></svg>`;
-                                break;
-                            }
-                            if(s.shape === 'star') {
-                                shape = `<svg viewBox="0 0 12 12" height="14" width="14"><polygon stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" fill="${s.color}" points="${createStar({ plot: { x: 6, y: 6 }, radius: 5})}" /></svg>`;
-                                break;
-                            }
-                            if(s.shape === 'triangle') {
-                                shape = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${createPolygonPath({ plot: { x: 6, y: 6}, radius: 6, sides: 3, rotation: 0.52}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
-                                break;
-                            }
-                            if(s.shape === 'square') {
-                                shape = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${createPolygonPath({ plot: { x: 6, y: 6}, radius: 6, sides: 4, rotation: 0.8}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
-                                break;
-                            }
-                            if(s.shape === 'diamond') {
-                                shape = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${createPolygonPath({ plot: { x: 6, y: 6}, radius: 5, sides: 4, rotation: 0}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+            const customFormat = this.chartConfig.chart.tooltip.customFormat;
+
+            if(customFormat && typeof customFormat({
+                seriesIndex: this.selectedSerieIndex,
+                datapoint: selectedSeries,
+                series: this.absoluteDataset,
+                bars: this.barSet,
+                lines: this.lineSet,
+                plots: this.plotSet,
+                config: this.chartConfig
+            }) === 'string') {
+                return customFormat({
+                    seriesIndex: this.selectedSerieIndex,
+                    datapoint: selectedSeries,
+                    series: this.absoluteDataset,
+                    bars: this.barSet,
+                    lines: this.lineSet,
+                    plots: this.plotSet,
+                    config: this.chartConfig
+                })
+            } else {
+                if(time) {
+                    html += `<div style="padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid #e1e5e8; width:100%">${time}</div>`;
+                }
+                selectedSeries.forEach(s => {
+                    if(this.isSafeValue(s.value) && s.value !== null) {
+                        let shape = '';
+                        let insideShape = '';
+                        switch (this.icons[s.type]) {
+                            case 'bar':
+                                shape = `<svg viewBox="0 0 12 12" height="14" width="14"><rect x="0" y="0" rx="1" stroke="none" height="12" width="12" fill="${s.color}" /></svg>`;
                                 break;
-                            }
-                            if(s.shape === 'pentagon') {
-                                shape = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${createPolygonPath({ plot: { x: 6, y: 6}, radius: 5, sides: 5, rotation: 0.95}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+                            
+                            case 'line':
+                                if(!s.shape || !['star', 'triangle', 'square', 'diamond', 'pentagon', 'hexagon'].includes(s.shape)) {
+                                    insideShape = `<circle cx="10" cy="8" r="4" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" fill="${s.color}" />`
+                                } else if(s.shape === 'triangle') {
+                                    insideShape = `<path d="${createPolygonPath({ plot: { x: 10, y: 8}, radius: 4, sides: 3, rotation: 0.52}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" />`
+                                } else if(s.shape === 'square') {
+                                    insideShape = `<path d="${createPolygonPath({ plot: { x: 10, y: 8}, radius: 4, sides: 4, rotation: 0.8}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" />`
+                                } else if(s.shape === 'diamond') {
+                                    insideShape = `<path d="${createPolygonPath({ plot: { x: 10, y: 8}, radius: 4, sides: 4, rotation: 0}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" />`
+                                } else if(s.shape === 'pentagon') {
+                                    insideShape = `<path d="${createPolygonPath({ plot: { x: 10, y: 8}, radius: 4, sides: 5, rotation: 0.95}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" />`
+                                } else if(s.shape === 'hexagon') {
+                                    insideShape = `<path d="${createPolygonPath({ plot: { x: 10, y: 8}, radius: 4, sides: 6, rotation: 0}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" />`
+                                } else if(s.shape === 'star') {
+                                    insideShape = `<polygon stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" fill="${s.color}" points="${createStar({ plot: { x: 10, y: 8 }, radius: 4})}" />`
+                                }
+                                shape = `<svg viewBox="0 0 20 12" height="14" width="20"><rect rx="3" x="0" y="6" stroke="none" height="4" width="20" fill="${s.color}" />${insideShape}</svg>`;
                                 break;
-                            }
-                            if(s.shape === 'hexagon') {
-                                shape = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${createPolygonPath({ plot: { x: 6, y: 6}, radius: 5, sides: 6, rotation: 0}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+    
+                            case 'plot':
+                                if (!s.shape || !['star', 'triangle', 'square', 'diamond', 'pentagon', 'hexagon'].includes(s.shape)) {
+                                    shape = `<svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" fill="${s.color}" /></svg>`;
+                                    break;
+                                }
+                                if(s.shape === 'star') {
+                                    shape = `<svg viewBox="0 0 12 12" height="14" width="14"><polygon stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" fill="${s.color}" points="${createStar({ plot: { x: 6, y: 6 }, radius: 5})}" /></svg>`;
+                                    break;
+                                }
+                                if(s.shape === 'triangle') {
+                                    shape = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${createPolygonPath({ plot: { x: 6, y: 6}, radius: 6, sides: 3, rotation: 0.52}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+                                    break;
+                                }
+                                if(s.shape === 'square') {
+                                    shape = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${createPolygonPath({ plot: { x: 6, y: 6}, radius: 6, sides: 4, rotation: 0.8}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+                                    break;
+                                }
+                                if(s.shape === 'diamond') {
+                                    shape = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${createPolygonPath({ plot: { x: 6, y: 6}, radius: 5, sides: 4, rotation: 0}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+                                    break;
+                                }
+                                if(s.shape === 'pentagon') {
+                                    shape = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${createPolygonPath({ plot: { x: 6, y: 6}, radius: 5, sides: 5, rotation: 0.95}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+                                    break;
+                                }
+                                if(s.shape === 'hexagon') {
+                                    shape = `<svg viewBox="0 0 12 12" height="14" width="14"><path d="${createPolygonPath({ plot: { x: 6, y: 6}, radius: 5, sides: 6, rotation: 0}).path}" fill="${s.color}" stroke="${this.chartConfig.chart.tooltip.backgroundColor}" stroke-width="1" /></svg>`;
+                                    break;
+                                }
+                            default:
                                 break;
-                            }
-                        default:
-                            break;
+                        }
+                        html += `<div style="display:flex;flex-direction:row; align-items:center;gap:3px;">${shape} ${s.name} : <b>${this.chartConfig.chart.tooltip.showValue ? this.dataLabel({p:this.chartConfig.chart.labels.prefix, v: s.value, s: this.chartConfig.chart.labels.suffix, r:this.chartConfig.chart.tooltip.roundingValue}) : ''}</b> ${this.chartConfig.chart.tooltip.showPercentage ? `(${(this.checkNaN(Math.abs(s.value) / sum * 100)).toFixed(this.chartConfig.chart.tooltip.roundingPercentage)}%)` : ''}</div>`;
                     }
-                    html += `<div style="display:flex;flex-direction:row; align-items:center;gap:3px;">${shape} ${s.name} : <b>${this.chartConfig.chart.tooltip.showValue ? this.dataLabel({p:this.chartConfig.chart.labels.prefix, v: s.value, s: this.chartConfig.chart.labels.suffix, r:this.chartConfig.chart.tooltip.roundingValue}) : ''}</b> ${this.chartConfig.chart.tooltip.showPercentage ? `(${(this.checkNaN(Math.abs(s.value) / sum * 100)).toFixed(this.chartConfig.chart.tooltip.roundingPercentage)}%)` : ''}</div>`;
-                }
-            });
-            return `<div style="border-radius:4px;padding:12px;font-variant-numeric: tabular-nums; background:${this.chartConfig.chart.tooltip.backgroundColor};color:${this.chartConfig.chart.tooltip.color}">${html}</div>`;
+                });
+                return `<div style="border-radius:4px;padding:12px;font-variant-numeric: tabular-nums; background:${this.chartConfig.chart.tooltip.backgroundColor};color:${this.chartConfig.chart.tooltip.color}">${html}</div>`;
+            }            
         },
         svg() {
             return {
diff --git a/src/default_configs.json b/src/default_configs.json
index d0d3de79..68177289 100644
--- a/src/default_configs.json
+++ b/src/default_configs.json
@@ -258,7 +258,8 @@
                 "showValue": true,
                 "showPercentage": false,
                 "roundingValue": 0,
-                "roundingPercentage": 0
+                "roundingPercentage": 0,
+                "customFormat": null
             },
             "userOptions": {
                 "show": true,
@@ -430,7 +431,8 @@
                     "showValue": true,
                     "showPercentage": true,
                     "roundingValue": 0,
-                    "roundingPercentage": 0
+                    "roundingPercentage": 0,
+                    "customFormat": null
                 }
             }
         },
@@ -518,7 +520,8 @@
                     "showValue": true,
                     "showPercentage": true,
                     "roundingValue": 0,
-                    "roundingPercentage": 0
+                    "roundingPercentage": 0,
+                    "customFormat": null
                 },
                 "legend": {
                     "show": true,
@@ -618,7 +621,8 @@
                     "showValue": true,
                     "showPercentage": true,
                     "roundingValue": 0,
-                    "roundingPercentage": 0
+                    "roundingPercentage": 0,
+                    "customFormat": null
                 },
                 "legend": {
                     "show": true,
@@ -770,7 +774,9 @@
                     "backgroundColor": "#FFFFFF",
                     "color": "#2D353C",
                     "fontSize": 14,
-                    "roundingValue": 0
+                    "roundingValue": 0,
+                    "customFormat": null,
+                    "showShape": true
                 },
                 "legend": {
                     "show": true,
@@ -1251,7 +1257,8 @@
                     "roundingValue": 0,
                     "roundingPercentage": 0,
                     "prefix":"",
-                    "suffix":""
+                    "suffix":"",
+                    "customFormat": null
                 }
             }
         },
@@ -1676,7 +1683,8 @@
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
                 "fontSize": 14,
-                "roundingValue": 0
+                "roundingValue": 0,
+                "customFormat": null
             }
         },
         "userOptions": {
@@ -1804,7 +1812,9 @@
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
                 "fontSize": 14,
-                "roundingValue": 0
+                "roundingValue": 0,
+                "customFormat": null,
+                "showShape": true
             }
         },
         "userOptions": {
@@ -1934,7 +1944,8 @@
                 "fontSize": 14,
                 "roundingValue": 0,
                 "prefix": "",
-                "suffix": ""
+                "suffix": "",
+                "customFormat": null
             }
         },
         "translations": {
@@ -2058,7 +2069,8 @@
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
                 "fontSize": 14,
-                "roundingValue": 0
+                "roundingValue": 0,
+                "customFormat": null
             }
         },
         "translations": {
@@ -2559,7 +2571,8 @@
                     "showValue": true,
                     "showPercentage": true,
                     "roundingValue": 0,
-                    "roundingPercentage": 0
+                    "roundingPercentage": 0,
+                    "customFormat": null
                 }
             }
         },
@@ -2994,7 +3007,8 @@
                     "show": true,
                     "color": "#2D353C",
                     "backgroundColor": "#FFFFFF",
-                    "fontSize": 14
+                    "fontSize": 14,
+                    "customFormat": null
                 },
                 "zoom": {
                     "speed": 1
diff --git a/src/lib.js b/src/lib.js
index 8b3b65b9..c4aedd69 100644
--- a/src/lib.js
+++ b/src/lib.js
@@ -125,7 +125,7 @@ export function treeShake({ defaultConfig, userConfig }) {
     Object.keys(finalConfig).forEach(key => {
         if (Object.hasOwn(userConfig, key)) {
             const currentVal = userConfig[key]
-            if (typeof currentVal === 'boolean') {
+            if (['boolean', 'function'].includes(typeof currentVal)) {
                 finalConfig[key] = currentVal;
             } else if (["string", "number"].includes(typeof currentVal)) {
                 if (isValidUserValue(currentVal)) {
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
index b1afa340..daf466c6 100644
--- a/types/vue-data-ui.d.ts
+++ b/types/vue-data-ui.d.ts
@@ -5,6 +5,16 @@ declare module 'vue-data-ui' {
         [key: string]: unknown;
     }
 
+    export type VueUiTooltipParams<TDatapoint, TSeries, TConfig, TBar, TLine, TPlot> = {
+        seriesIndex?: number;
+        series?: TSeries;
+        datapoint?: TDatapoint;
+        config?: TConfig;
+        bars?: TBar;
+        lines?: TLine;
+        plots?: TPlot;
+    }
+
     export type VueUiMiniLoaderConfig = {
         type?: "line" | "bar" | "onion";
         onion?: {
@@ -159,6 +169,7 @@ declare module 'vue-data-ui' {
                     color?: string;
                     backgroundColor?: string;
                     fontSize?: number;
+                    customFormat?: (params: VueUiTooltipParams<VueUiMoleculeDatapoint, VueUiMoleculeDatapoint[], VueUiMoleculeConfig>) => string;
                 };
                 zoom?: {
                     speed?: number;
@@ -189,6 +200,22 @@ declare module 'vue-data-ui' {
         };
     };
 
+    export type VueUiMoleculeDatapoint = {
+        circleRadius: number;
+        color: string;
+        name: string;
+        details?: string;
+        nodes?: VueUiMoleculeDatapoint;
+        parentNode?: VueUiMoleculeDatapoint;
+        polygonPath: {
+            coordinates: Array<{
+                x: number;
+                y: number;
+            }>
+        },
+        uid: string;
+    }
+
     export const VueUiMolecule: DefineComponent<{
         dataset: VueUiMoleculeDatasetNode[],
         config?: VueUiMoleculeConfig
@@ -691,6 +718,7 @@ declare module 'vue-data-ui' {
                     showPercentage?: boolean;
                     roundingValue?: number;
                     roundingPercentage?: number;
+                    customFormat?: (params: VueUiTooltipParams<VueUiRingsDatpoint, VueUiRingsDatapoint[], VueUiRingsConfig>) => string;
                 };
             };
         };
@@ -724,6 +752,16 @@ declare module 'vue-data-ui' {
         };
     };
 
+    export type VueUiRingsDatapoint = {
+        color: string;
+        name: string;
+        percentage: number;
+        proportion: number;
+        strokeWidth: number;
+        uid: string;
+        value: number;
+    };
+
     export type VueUiRingsDatasetItem = {
         name: string;
         color?: string;
@@ -1282,6 +1320,7 @@ declare module 'vue-data-ui' {
                 color?: string;
                 fontSize?: number;
                 roundingValue?: number;
+                customFormat?: (params: VueUiTooltipParams<VueUiAgePyramidDatapoint, VueUiAgePyramidSeries[], VueUiAgePyramidConfig>) => string;
             };
         };
         translations?: {
@@ -1314,6 +1353,30 @@ declare module 'vue-data-ui' {
         };
     };
 
+    export type VueUiAgePyramidDatapoint = {
+        index: number;
+        left: number;
+        right: number;
+        segment: string;
+    };
+
+    export type VueUiAgePyramidSideData = {
+        color: string;
+        height: number;
+        proportionToMax: number;
+        value: number;
+        width: number;
+        y: number;
+        x: number;
+    };
+
+    export type VueUiAgePyramidSeries = {
+        age: number;
+        left: VueUiAgePyramidSideData;
+        right: VueUiAgePyramidSideData;
+        segment: string;
+    };
+
     export const VueUiAgePyramid: DefineComponent<{
         config?: VueUiAgePyramidConfig,
         dataset: VueUiAgePyramidDataset
@@ -1415,6 +1478,7 @@ declare module 'vue-data-ui' {
                 roundingValue?: number;
                 prefix?: string;
                 suffix?: string;
+                customFormat?: (params: VueUiTooltipParams<VueUiCandlestickDatapoint, VueUiCandlestickDatapoint[], VueUiCandlestickConfig>) => string;
             };
         };
         translations?: {
@@ -1453,6 +1517,16 @@ declare module 'vue-data-ui' {
         };
     };
 
+    export type VueUiCandlestickDatapoint = {
+        high: { x: number; y: number; value: number };
+        isBullish: boolean;
+        last: { x: number; y: number; value: numbr };
+        low: { x: number; y: number; value: number };
+        open: { x: number; y: number; value: number };
+        period: string | undefined;
+        volume: number;
+    };
+
     export const VueUiCandlestick: DefineComponent<{
         config?: VueUiCandlestickConfig,
         dataset: Array<Array<string | number>>
@@ -1569,6 +1643,8 @@ declare module 'vue-data-ui' {
                 color?: string;
                 fontSize?: number;
                 roundingValue?: number;
+                showShape?: boolean;
+                customFormat?: (params: VueUiTooltipParams<VueUiScatterDatapoint, VueUiScatterSeries[], VueUiScatterConfig>) => string
             };
         };
         userOptions?: {
@@ -1604,6 +1680,39 @@ declare module 'vue-data-ui' {
         };
     };
 
+    export type VueUiScatterDatapoint = {
+        clusterName: string | undefined;
+        color: string;
+        deviation: number;
+        id: string;
+        shape: "circle" | "triangle" | "square" | "diamond" | "pentagon" | "hexagon" | "star" | null;
+        v: {
+            x: number;
+            y: number;
+            name: string;
+        }
+        x: number;
+        y: number;
+    };
+
+    export type VueUiScatterSeries = {
+        color: string;
+        correlation: {
+            x1: number;
+            x2: number;
+            y1: number;
+            y2: number;
+            coefficient: number;
+        };
+        id: string;
+        label: { x: number; y: number; };
+        name: string;
+        opacity: number;
+        plots: VueUiScatterDatapoint[];
+        shape: "circle" | "triangle" | "square" | "diamond" | "pentagon" | "hexagon" | "star" | null;
+        values: Array<{ x: number; y: number; name: string; }>
+    };
+
     export const VueUiScatter: DefineComponent<{
         config?: VueUiScatterConfig,
         dataset: VueUiScatterDatasetItem[]
@@ -1693,6 +1802,7 @@ declare module 'vue-data-ui' {
                 color?: string;
                 fontSize?: number;
                 roundingValue?: number;
+                customFormat?: (params: VueUiTooltipParams<VueUiHeatmapDatapoint, VueUiHeatmapRow[], VueUiHeatmapConfig>) => string;
             };
         };
         userOptions?: {
@@ -1724,6 +1834,22 @@ declare module 'vue-data-ui' {
         };
     };
 
+    export type VueUiHeatmapDatapoint = {
+        color: string;
+        id: string;
+        ratio: number;
+        side: "up" | "down";
+        value: number;
+        xAxisName: string | undefined;
+        yAxisName: string | undefined;
+    };
+
+    export type VueUiHeatmapRow = {
+        name: string;
+        temperatures: VueUiHeatmapDatapoint[];
+        values: number[];
+    }
+
     export type VueUiHeatmapDatasetItem = {
         name: string;
         values: number[];
@@ -1829,6 +1955,7 @@ declare module 'vue-data-ui' {
                 showPercentage?: boolean;
                 roundingValue?: number;
                 roundingPercentage?: number;
+                customFormat?: (params: VueUiTooltipParams<VueUiXyDatapointItem[], VueUiXySeries, VueUiXyConfig, VueUiXyDatasetBarItem[], VueUiXyDatasetLineItem[], VueUiXyDatasetPlotItem[]>) => string;
             };
             userOptions?: {
                 show?: boolean;
@@ -1910,6 +2037,57 @@ declare module 'vue-data-ui' {
         useProgression?: boolean;
     };
 
+    export type VueUiXyDatasetBarItem = {
+        absoluteValues: number[];
+        color: string;
+        id: string;
+        name: string;
+        plots: Array<{ x: number; y: number; value: number }>;
+        series: number[];
+        type: "bar";
+    }
+
+    export type VueUiXyDatasetLineItem = {
+        absoluteValues: number[];
+        area: string;
+        color: string;
+        curve: string;
+        dataLabels: boolean;
+        id: string;
+        name: string;
+        plots: Array<{ x: number; y: number; value: number }>;
+        series: number[];
+        shape: "circle" | "triangle" | "square" | "diamond" | "pentagon" | "hexagon" | "star" | null;
+        type: "line";
+        useArea: boolean;
+        useProgression: boolean;
+        smooth?: boolean;
+        useTag?: boolean;
+    }
+
+    export type VueUiXyDatasetPlotItem = {
+        absoluteValues: number[];
+        color: string;
+        id: string;
+        name: string;
+        plots: Array<{ x: number; y: number; value: number }>;
+        series: number[];
+        shape: "circle" | "triangle" | "square" | "diamond" | "pentagon" | "hexagon" | "star" | null;
+        type: "plot";
+        useTag?: boolean;
+        useProgression?: boolean;
+    }
+
+    export type VueUiXySeries = Array<VueUiXyDatasetBarItem | VueUiXyDatasetLineItem | VueUiXyDatasetPlotItem>;
+
+    export type VueUiXyDatapointItem = {
+        color: string;
+        name: string;
+        shape: "circle" | "triangle" | "square" | "diamond" | "pentagon" | "hexagon" | "star" | null;
+        type: "bar" | "line" | "plot";
+        value: number;
+    }
+
     export const VueUiXy: DefineComponent<{
         config?: VueUiXyConfig;
         dataset: VueUiXyDatasetItem[];
@@ -2020,6 +2198,7 @@ declare module 'vue-data-ui' {
                     showPercentage?: boolean;
                     roundingValue?: number;
                     roundingPercentage?: number;
+                    customFormat?: (params: VueUiTooltipParams<VueUiDonutDatapoint, VueUiDonutSeriesItem[], VueUiDonutConfig>) => string;
                 };
             };
         };
@@ -2065,6 +2244,29 @@ declare module 'vue-data-ui' {
         values: number[];
     };
 
+    export type VueUiDonutDatapoint = {
+        absoluteValues: number[];
+        arcSlice: string;
+        center: { startX: number; startY: number; endX: number; endY: number; path: string };
+        color: string;
+        cx: number;
+        cy: number;
+        endX: number;
+        endY: number;
+        name: string;
+        path: string;
+        proportion: number;
+        ratio: number;
+        seriesIndex: number;
+        startX: number;
+        startY: number;
+        value: number;
+    };
+
+    export type VueUiDonutSeriesItem = VueUiDonutDatasetItem & {
+        absoluteValues: number[];
+    }
+
     export const VueUiDonut: DefineComponent<{
         config?: VueUiDonutConfig,
         dataset: VueUiDonutDatasetItem[]
@@ -2120,6 +2322,7 @@ declare module 'vue-data-ui' {
                     showPercentage?: boolean;
                     roundingValue?: number;
                     roundingPercentage?: number;
+                    customFormat?: (params: VueUiTooltipParams<VueUiWaffleDatapoint, VueUiWaffleSerieItem[], VueUiWaffleConfig>) => string;
                 };
                 legend?: {
                     show?: boolean;
@@ -2163,6 +2366,28 @@ declare module 'vue-data-ui' {
         };
     };
 
+    export type VueUiWaffleDatapoint = {
+        absoluteIndex: number;
+        absoluteValues: number[];
+        color: string;
+        name: string;
+        proportion: number;
+        rects: number[];
+        serieIndex: number;
+        start: number;
+        uid: string;
+        value: number;
+    }
+
+    export type VueUiWaffleSerieItem = {
+        absoluteIndex: number;
+        color: string;
+        name: string;
+        shape: "circle" | "triangle" | "rect" | "diamond" | "pentagon" | "hexagon" | "star" | null;
+        uid: string;
+        values: number[]
+    }
+
     export type VueUiWaffleDatasetItem = {
         name: string;
         color?: string;
@@ -2232,6 +2457,7 @@ declare module 'vue-data-ui' {
                     showPercentage?: boolean;
                     roundingValue?: number;
                     roundingPercentage?: number;
+                    customFormat?: (params: VueUiTooltipParams<VueUiRadarDatapoint, VueUiRadarSeries, VueUiRadarConfig>) => string;
                 };
                 legend?: {
                     show?: boolean;
@@ -2274,6 +2500,39 @@ declare module 'vue-data-ui' {
         };
     };
 
+    export type VueUiRadarDatapoint = {
+        color: string;
+        name: string;
+        plots: Array<{ x: number; y: number }>;
+        serieId: string;
+        target: number;
+        values: number[];
+        x: number;
+        y: number;
+    }
+
+    export type VueUiRadarCategory = {
+        categoryId: string;
+        color: string;
+        name: string;
+        prefix?: string;
+        suffix?: string;
+    }
+
+    export type VueUiRadarDatapointItem = {
+        color: string;
+        name: string;
+        serieId: string;
+        target?: number;
+        values: number[]
+    }
+
+    export type VueUiRadarSeries = {
+        categories: VueUiRadarCategory[];
+        datapoints: VueUiRadarDatapointItem[];
+        radar: VueUiRadarDatapoint[]
+    }
+
     export type VueUiRadarDatasetCategoryItem = {
         name: string;
         color?: string;
@@ -2422,6 +2681,8 @@ declare module 'vue-data-ui' {
                     color?: string;
                     fontSize?: number;
                     roundingValue?: number;
+                    customFormat?: (params: VueUiTooltipParams<VueUiQuadrantDatapoint, VueUiQuadrantSerie[], VueUiQuadrantConfig>) => string;
+                    showShape?: boolean;
                 };
                 legend?: {
                     show?: boolean;
@@ -2463,6 +2724,27 @@ declare module 'vue-data-ui' {
         };
     };
 
+    export type VueUiQuadrantDatapoint = {
+        categoryName: string;
+        color: string;
+        name: string;
+        quadrantSide: string;
+        shape: "circle" | "triangle" | "square" | "diamond" | "pentagon" | "hexagon" | "star" | null;
+        uid: string;
+        x: number;
+        xValue: number;
+        y: number;
+        yValue: number;
+    };
+
+    export type VueUiQuadrantSerie = {
+        color: string;
+        id: string;
+        name: string;
+        series: VueUiQuadrantDatapoint[];
+        shape: "circle" | "triangle" | "square" | "diamond" | "pentagon" | "hexagon" | "star" | null;
+    };
+
     export const VueUiQuadrant: DefineComponent<{
         dataset: VueUiQuadrantDatasetItem[],
         config?: VueUiQuadrantConfig
@@ -2975,6 +3257,7 @@ declare module 'vue-data-ui' {
                     roundingPercentage?: number;
                     prefix?: string;
                     suffix?: string;
+                    customFormat?: (params: VueUiTooltipParams<VueUiVerticalBarDatapoint, VueUiVerticalBarSerie[], VueUiVerticalBarConfig>) => string;
                 };
             };
         };
@@ -3014,6 +3297,34 @@ declare module 'vue-data-ui' {
         };
     };
 
+    export type VueUiVerticalBarDatapoint = {
+        children?: Array<any>;
+        childIndex?: number;
+        hasChildren?: boolean;
+        color: string;
+        id: string;
+        isChild: boolean;
+        isFirstChild: boolean;
+        isLastChild: boolean;
+        name: string;
+        parentId?: string;
+        parentName?: string;
+        parentValue?: number;
+        value: number;
+    };
+
+    export type VueUiVerticalBarSerie = {
+        children: VueUiVerticalBarDatapoint[];
+        color: string;
+        hasChildren: boolean;
+        is: string;
+        isChild: boolean;
+        name: string;
+        opacity: number;
+        shape: "circle" | "triangle" | "square" | "diamond" | "pentagon" | "hexagon" | "star" | null;
+        value: number;
+    };
+
     export const VueUiVerticalBar: DefineComponent<{
         config?: VueUiVerticalBarConfig,
         dataset: VueUiVerticalBarDatasetItem[]