diff --git a/package-lock.json b/package-lock.json
index ce3e3f5a..96e0aad4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-data-ui",
-  "version": "1.9.11",
+  "version": "1.9.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "1.9.11",
+      "version": "1.9.12",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
diff --git a/package.json b/package.json
index aa5bdcf2..0018f2c1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.12",
+  "version": "1.9.13",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
diff --git a/src/App.vue b/src/App.vue
index 331da128..aea66961 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,6 +10,7 @@
  * 
  */
 import { ref, computed, onMounted } from "vue";
+import PROD_CONFIG from "./default_configs.json";
 import Box from "./Box.vue";
 import TableTest from "./components/vue-ui-table.vue";
 import DonutTest from "./components/vue-ui-donut.vue";
@@ -190,12 +191,6 @@ const config = ref({
       show: true,
     },
   },
-  table: {
-    rounding: 1,
-    th: {
-      backgroundColor: "#FF0000",
-    },
-  },
 });
 
 const head = ref([
@@ -3433,43 +3428,32 @@ const histoDataset = ref([
 ]);
 
 const showLocalTest = ref(false);
+
+function copyConfig(c) {
+  let selBox = document.createElement('textarea');
+      selBox.style.position = 'fixed';
+      selBox.style.left = '0';
+      selBox.style.top = '0';
+      selBox.style.opacity = '0';
+      selBox.value = JSON.stringify(c);
+      document.body.appendChild(selBox);
+      selBox.focus();
+      selBox.select();
+      document.execCommand('copy');
+      document.body.removeChild(selBox);
+}
+
 </script>
 
 <template>
-  <div>
-    <!-- <button @click="sstest">SCREENSHOT</button>
-    <button @click="toggleRead">TOGGLE RATING READONLY</button>
-    <button @click="getDashPositions">DASH POSITIONS</button>
-    <button @click="makeDashPdf">PDF FROM OUTSIDE</button> -->
-    <button @click="printXy">PRINT XY</button>
-    <button @click="xlsXy">XLS XY</button>
-    <button @click="printDonut">PRINT DONUT</button>
-    <button @click="xlsDonut">XLS DONUT</button>
-    <button @click="printWaffle">PRINT WAFFLE</button>
-    <button @click="xlsWaffle">XLS WAFFLE</button>
-    <button @click="printRadar">PRINT RADAR</button>
-    <button @click="xlsRadar">XLS RADAR</button>
-    <button @click="printQuadrant">PRINT QUADRANT</button>
-    <button @click="xlsQuadrant">XLS QUADRANT</button>
-    <button @click="printGauge">PRINT GAUGE</button>
-    <button @click="printChestnut">PRINT CHESTNUT</button>
-    <button @click="xlsChestnut">XLS CHESTNUT</button>
-    <button @click="printOnion">PRINT ONION</button>
-    <button @click="xlsOnion">XLS ONION</button>
-    <button @click="printVB">PRINT VERTICAL BAR</button>
-    <button @click="xlsVB">XLS VERTICAL BAR</button>
-    <button @click="printHeatmap">PRINT HEATMAP</button>
-    <button @click="xlsHeatmap">XLS HEATMAP</button>
-    <button @click="printScatter">PRINT SCATTER</button>
-    <button @click="xlsScatter">XLS SCATTER</button>
-    <button @click="printCandle">PRINT CANDLE</button>
-    <button @click="xlsCandle">XLS CANDLE</button>
-    <button @click="printPyramid">PRINT PYRAMID</button>
-    <button @click="xlsPyramid">XLS PYRAMID</button>
-    <button @click="printRelation">PRINT RELATION CIRCLE</button>
-    <button @click="printThermo">PRINT THERMO</button>
-
-      <Box>
+  <div style="padding: 48px; font-weight: bold; line-height: 20px">
+    <h1 style="font-size: 36px; color: #666666">
+      Vue Data UI
+    </h1>
+    <h2 style="color: #A6A6A6">Components</h2>
+  </div>
+  <div style="padding-left: 48px; padding-right: 48px">
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_relation_circle)">
         <template #title>VueUiRelationCircle</template>
         <template #dev>
           <RelationTest
@@ -3485,9 +3469,12 @@ const showLocalTest = ref(false);
               :config="relationConfig"
             />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_relation_circle }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkline)">
         <template #title>VueUiSparkline</template>
         <template #dev>
           <SparklineTest
@@ -3501,9 +3488,12 @@ const showLocalTest = ref(false);
             :dataset="sparklineDataset"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_sparkline }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_xy)">
         <template #title>VueUiXy</template>
         <template #dev>
           <XyTest
@@ -3523,9 +3513,12 @@ const showLocalTest = ref(false);
             @selectX="selectX"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_xy }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkhistogram)">
         <template #title>VueUiSparkHistogram</template>
         <template #dev>
           <HistoTest 
@@ -3539,9 +3532,12 @@ const showLocalTest = ref(false);
              :config="histoConfig"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_sparkhistogram }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_candlestick)">
         <template #title>VueUiCandleStick</template>
         <template #dev>
           <CandlestickTest 
@@ -3557,9 +3553,12 @@ const showLocalTest = ref(false);
             :config="{...candlestickConfig, useCssAnimation: false}"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_candlestick }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_scatter)">
         <template #title>VueUiScatter</template>
         <template #dev>
           <ScatterTest 
@@ -3575,9 +3574,12 @@ const showLocalTest = ref(false);
             :dataset="scatterDataset"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_scatter }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_vertical_bar)">
         <template #title>VueUiVerticalBar</template>
         <template #dev>
           <VerticalTest 
@@ -3594,9 +3596,12 @@ const showLocalTest = ref(false);
             @selectLegend="selectVerticalLegend"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_vertical_bar }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_onion)">
         <template #title>VueUiOnion</template>
         <template #dev>
           <OnionTest
@@ -3613,9 +3618,12 @@ const showLocalTest = ref(false);
             @selectLegend="selectOnionLegend"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_onion }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_quadrant)">
         <template #title>VueUiQuadrant</template>
         <template #dev>
           <QuadrantTest
@@ -3637,9 +3645,12 @@ const showLocalTest = ref(false);
             @selectLegend="selectQuadrantLegend"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_quadrant }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_radar)">
         <template #title>VueUiRadar</template>
         <template #dev>
           <RadarTest
@@ -3657,9 +3668,12 @@ const showLocalTest = ref(false);
             @selectLegend="selectRadarLegend"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_radar }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_donut)">
         <template #title>VueUiDonut</template>
         <template #dev>
           <DonutTest
@@ -3699,9 +3713,12 @@ const showLocalTest = ref(false);
             @selectLegend="selectLegendDonut"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_donut }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkstackbar)">
         <template #title>VueUiSparkStackbar</template>
         <template #dev>
           <StackTest 
@@ -3713,9 +3730,12 @@ const showLocalTest = ref(false);
             :dataset="stackDataset"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_sparkstackbar }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_thermometer)">
         <template #title>VueUiThermometer</template>
         <template #dev>
           <ThermoTest 
@@ -3731,9 +3751,12 @@ const showLocalTest = ref(false);
             :config="thermoConfig" 
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_thermometer }}
+        </template>
       </Box>
       
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_skeleton)">
         <template #title>VueUiSkeleton</template>
         <template #dev>
           <SkeletonTest
@@ -3745,9 +3768,12 @@ const showLocalTest = ref(false);
             :config="{ type: 'rating', style: { rating: { useSmiley: true, filled: true } } }"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_skeleton }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_smiley)">
         <template #title>VueUiSmiley</template>
         <template #dev>
           <SmileyTest 
@@ -3761,9 +3787,12 @@ const showLocalTest = ref(false);
             :config="smileyConfig"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_smiley }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_rating)">
         <template #title>VueUiRating</template>
         <template #dev>
           <RatingTest
@@ -3779,9 +3808,12 @@ const showLocalTest = ref(false);
             :dataset="ratingDataset"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_rating }}
+        </template>
       </Box>
       
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_chestnut)">
         <template #title>VueUiChestnut</template>
         <template #dev>
           <ChestnutTest
@@ -3801,9 +3833,12 @@ const showLocalTest = ref(false);
             @selectNut="selectNut"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_chestnut }}
+        </template>
       </Box>
       
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_age_pyramid)">
         <template #title>VueUiPyramid</template>
         <template #dev>
           <PyramidTest 
@@ -3819,9 +3854,12 @@ const showLocalTest = ref(false);
             :config="{style:{title:{text:'Title', subtitle:{text: 'Subtitle'}}}}"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_age_pyramid }}
+        </template>
       </Box>
       
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_waffle)">
         <template #title>VueUiWaffle</template>
         <template #dev>
           <WaffleTest
@@ -3839,9 +3877,12 @@ const showLocalTest = ref(false);
             @selectLegend="selectLegendWaffle"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_waffle }}
+        </template>
       </Box>
       
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_annotator)">
         <template #title>VueUiAnnotator</template>
         <template #dev>
           <AnnotatorTest
@@ -3889,10 +3930,13 @@ const showLocalTest = ref(false);
             </DashboardTest>
           </VueUiAnnotator>
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_annotator }}
+        </template>
       </Box>
 
             
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_dashboard)">
         <template #title>VueUiDashboard</template>
         <template #dev>
           <DashboardTest
@@ -3922,9 +3966,12 @@ const showLocalTest = ref(false);
             </template>
           </VueUiDashboard>
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_dashboard }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkbar)">
         <template #title>VueUiSparkbar</template>
         <template #dev>
           <SparkbarTest
@@ -3938,9 +3985,12 @@ const showLocalTest = ref(false);
             :dataset="sparkbarDataset"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_sparkbar }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_heatmap)">
         <template #title>VueUiHeatmap</template>
         <template #dev>
           <HeatmapTest
@@ -3956,9 +4006,12 @@ const showLocalTest = ref(false);
             :dataset="heatmapDataset"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_heatmap }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_gauge)">
         <template #title>VueUiGauge</template>
         <template #dev>
           <GaugeTest 
@@ -3972,9 +4025,12 @@ const showLocalTest = ref(false);
             :dataset="gaugeDataset"
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_gauge }}
+        </template>
       </Box>
 
-      <Box>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_table)">
         <template #title>VueUiTable</template>
         <template #dev>
           <TableTest 
@@ -3986,6 +4042,9 @@ const showLocalTest = ref(false);
             :dataset="tableTestDataset" 
           />
         </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_table }}
+        </template>
       </Box>
 
     <img v-if="pic" :src="pic" />
diff --git a/src/Box.vue b/src/Box.vue
index 8f4ec92c..ad5b5087 100644
--- a/src/Box.vue
+++ b/src/Box.vue
@@ -1,9 +1,36 @@
+<script setup>
+import { ref } from "vue";
+const showConfig = ref(false);
+
+const emit = defineEmits(['copy'])
+
+const isCopying = ref(false);
+
+function copy() {
+    emit('copy');
+    isCopying.value = true;
+    setTimeout(() => {
+        isCopying.value = false;
+    }, 1000);
+}
+
+</script>
+
 <template>
-    <div style="width: 100%;margin-top:12px;">
+    <div style="width: 100%;margin-top:12px; background: #e1e5e8">
         <details>
             <summary style="user-select:none;cursor:pointer;height:30px;background:linear-gradient(to right, #e1e5e8, white);line-height:24px;font-size:24px;padding:12px;">
                 <slot name="title"></slot>
             </summary>
+            <div style="display: flex; flex-direction:column;">
+                <button class="btn" @click="showConfig = !showConfig">
+                    Config &nbsp;<span v-if="showConfig">&lt;</span><span v-else>&gt;</span>
+                </button>
+                <br>
+                <code :class="{cde: true, wow: isCopying}" v-if="showConfig" @click="copy">
+                    <slot name="config"></slot>
+                </code>
+            </div>
             <div style="display: flex;flex-direction:row; gap:12px; align-items:center;justify-content:center;background:#e1e5e8;padding:12px">
                 <div style="width:100%;padding:12px;">
                     <div style="width:100%;text-align:center">DEV</div>
@@ -16,4 +43,43 @@
             </div>
         </details>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.btn {
+    border: none;
+    width: 100px;
+    height: 40px;
+    background: #fafafa;
+    cursor: pointer;
+    border: 1px solid #CCCCCC;
+    border-radius: 6px;
+    margin-top: 24px;
+    margin-left: 24px;
+    box-shadow: 0 6px 12px -6px rgba(0, 0,0,0.6);
+}
+.cde {
+    background: rgba(0,0,0,0.8);
+    margin-left: 24px;
+    margin-right: 24px;
+    color: #fafafa;
+    padding: 12px;
+    border-radius: 6px;
+    cursor: copy;
+    outline: 2px solid greenyellow;
+}
+.wow {
+    animation: wow 0.2s ease-in-out;
+}
+@keyframes wow {
+    0% {
+        transform: scale(0.99, 0.99);
+    }
+    80% {
+        transform: scale(1.01, 1.01);
+    }
+    100% {
+        transform: scale(1, 1);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/atoms/DataTable.vue b/src/atoms/DataTable.vue
new file mode 100644
index 00000000..f5e47dec
--- /dev/null
+++ b/src/atoms/DataTable.vue
@@ -0,0 +1,65 @@
+<script setup>
+
+const props = defineProps({
+    head: Array,
+    body: Array,
+    title: String,
+    config: Object
+});
+
+const { backgroundColor:thbg, color:thc, outline:tho } = props.config.th;
+const { backgroundColor:tdbg, color:tdc, outline:tdo } = props.config.td;
+
+</script>
+
+<template>
+    <table data-cy="vue-data-ui-table-data" class="vue-ui-data-table">
+        <thead>
+            <tr>
+                <th :style="{backgroundColor: thbg, color: thc, outline: tho}" :colspan="head.length">
+                    {{  title }}
+                </th>
+            </tr>
+            <tr>
+                <th :style="{backgroundColor: thbg, color: thc, outline: tho}" v-for="(th, i) in head" :key="`th_${i}`">
+                    <div style="display: flex; align-items:center; justify-content:center; justify-content:flex-end;padding-right: 3px;">
+                        <svg height="12" width="12" v-if="th.color" viewBox="0 0 20 20" style="background: none;">
+                            <circle cx="10" cy="10" r="10" :fill="th.color"/>
+                        </svg>
+                        <slot name="th" :th="th"/>
+                    </div>
+                </th>
+            </tr>
+        </thead>
+
+        <tbody>
+            <tr v-for="(tr, i) in body">
+                <td v-for="(td, j) in tr" :style="{backgroundColor: tdbg, color: tdc, outline: tdo}">
+                    <div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
+                        <svg height="12" width="12" v-if="td.color" viewBox="0 0 20 20" style="background: none;">
+                            <circle cx="10" cy="10" r="10" :fill="td.color"/>
+                        </svg>
+                        <slot name="td" :td="td"></slot>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<style scoped>
+table.vue-ui-data-table {
+    width: 100%;
+    border-collapse:collapse;
+}
+.vue-ui-data-table td {
+    padding-right: 6px;
+    font-variant-numeric: tabular-nums;
+}
+.vue-ui-data-table th {
+    position: sticky;
+    top:0;
+    font-weight: 400;
+    user-select: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/atoms/UserOptions.vue b/src/atoms/UserOptions.vue
index 205208d9..38df7ae7 100644
--- a/src/atoms/UserOptions.vue
+++ b/src/atoms/UserOptions.vue
@@ -11,6 +11,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    hasImg: {
+        type: Boolean,
+        default: false,
+    },
     color: {
         type: String,
     },
@@ -21,6 +25,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    isImaging: {
+        type: Boolean,
+        default: false,
+    },
     title: {
         type: String,
     },
@@ -29,7 +37,7 @@ const props = defineProps({
     }
 });
 
-const emit = defineEmits(['generatePdf', 'generateXls']);
+const emit = defineEmits(['generatePdf', 'generateXls', 'generateImage']);
 
 function generatePdf() {
     emit('generatePdf');
@@ -39,9 +47,14 @@ function generateXls() {
     emit('generateXls');
 }
 
+function generateImage() {
+    emit('generateImage');
+}
+
 const details = ref(null);
 
 function close() {
+    if(props.isPrinting || props.isImaging) return;
     if(details.value) {
         details.value.removeAttribute('open')
     }
@@ -70,6 +83,17 @@ function close() {
         <button v-if="hasXls" data-cy="user-options-xls" class="vue-data-ui-button" @click="generateXls" :style="`background:${backgroundColor};color:${color}`">
             XLSX
         </button>
+        <button v-if="hasImg" data-cy="user-options-img" class="vue-data-ui-button" @click="generateImage" :style="`background:${backgroundColor};color:${color}`">
+            <svg class="vue-data-ui-print-icon" xmlns="http://www.w3.org/2000/svg" v-if="isImaging" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" :stroke="color" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                <path d="M18 16v.01" />
+                <path d="M6 16v.01" />
+                <path d="M12 5v.01" />
+                <path d="M12 12v.01" />
+                <path d="M12 1a4 4 0 0 1 2.001 7.464l.001 .072a3.998 3.998 0 0 1 1.987 3.758l.22 .128a3.978 3.978 0 0 1 1.591 -.417l.2 -.005a4 4 0 1 1 -3.994 3.77l-.28 -.16c-.522 .25 -1.108 .39 -1.726 .39c-.619 0 -1.205 -.14 -1.728 -.391l-.279 .16l.007 .231a4 4 0 1 1 -2.212 -3.579l.222 -.129a3.998 3.998 0 0 1 1.988 -3.756l.002 -.071a4 4 0 0 1 -1.995 -3.265l-.005 -.2a4 4 0 0 1 4 -4z" />
+            </svg>
+            <span v-else>PNG</span>
+        </button>
     </details>
 </template>
 
diff --git a/src/components/vue-ui-age-pyramid.vue b/src/components/vue-ui-age-pyramid.vue
index fdb1f70a..635b52b2 100644
--- a/src/components/vue-ui-age-pyramid.vue
+++ b/src/components/vue-ui-age-pyramid.vue
@@ -2,6 +2,7 @@
 import { ref, computed, nextTick } from "vue";
 import { opacity, makeXls, shiftHue } from '../lib';
 import pdf from "../pdf";
+import img from "../img";
 import mainConfig from "../default_configs.json";
 import { useMouse } from "../useMouse";
 import { calcTooltipPosition } from "../calcTooltipPosition";
@@ -28,6 +29,7 @@ const uid = ref(`vue-ui-age-pyramid-${Math.random()}`);
 
 const defaultConfig = ref(mainConfig.vue_ui_age_pyramid);
 
+const isImaging = ref(false);
 const isPrinting = ref(false);
 const agePyramid = ref(null);
 const tooltip = ref(null);
@@ -206,16 +208,41 @@ function hoverIndex(index) {
     isTooltip.value = true;
 }
 
-function generatePdf(){
+const __to__ = ref(null);
+
+function showSpinnerPdf() {
     isPrinting.value = true;
-    nextTick(() => {
+}
+
+function generatePdf(){
+    showSpinnerPdf();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
         pdf({
             domElement: document.getElementById(`vue-ui-age-pyramid_${uid.value}`),
             fileName: agePyramidConfig.value.style.title.text || 'vue-ui-age-pyramid'
         }).finally(() => {
             isPrinting.value = false;
         });
-    })
+    }, 100)
+}
+
+function showSpinnerImage() {
+    isImaging.value = true;
+}
+
+function generateImage() {
+    showSpinnerImage();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        img({
+            domElement: document.getElementById(`vue-ui-age-pyramid_${uid.value}`),
+            fileName: agePyramidConfig.value.style.title.text || 'vue-ui-age-pyramid',
+            format: 'png'
+        }).finally(() => {
+            isImaging.value = false;
+        })
+    }, 100)
 }
 
 function generateXls() {
@@ -240,7 +267,8 @@ function generateXls() {
 
 defineExpose({
     generatePdf,
-    generateXls
+    generateXls,
+    generateImage
 });
 
 </script>
@@ -275,11 +303,14 @@ defineExpose({
             v-if="agePyramidConfig.userOptions.show"
             :backgroundColor="agePyramidConfig.style.backgroundColor"
             :color="agePyramidConfig.style.color"
+            :isImaging="isImaging"
             :isPrinting="isPrinting"
             :title="agePyramidConfig.userOptions.title"
             :uid="uid"
+            :hasImg="true"
             @generatePdf="generatePdf"
             @generateXls="generateXls"
+            @generateImage="generateImage"
         >
             <template #checkboxes>
                 <div class="vue-ui-options-item">
diff --git a/src/components/vue-ui-candlestick.cy.js b/src/components/vue-ui-candlestick.cy.js
index 4bd14440..e922af1b 100644
--- a/src/components/vue-ui-candlestick.cy.js
+++ b/src/components/vue-ui-candlestick.cy.js
@@ -191,6 +191,9 @@ describe('<VueUiCandlestick />', () => {
       cy.get(`[data-cy="user-options-xls"]`).click();
       cy.wait(3000);
       cy.readFile(`cypress\\Downloads\\${fixture.config.style.title.text}.xlsx`);
+      cy.get(`[data-cy="user-options-img"]`).click();
+      cy.wait(3000);
+      cy.readFile(`cypress\\Downloads\\${fixture.config.style.title.text}.png`);
       cy.clearDownloads();
 
     });
diff --git a/src/components/vue-ui-candlestick.vue b/src/components/vue-ui-candlestick.vue
index d10dba1d..ad6d8970 100644
--- a/src/components/vue-ui-candlestick.vue
+++ b/src/components/vue-ui-candlestick.vue
@@ -3,6 +3,7 @@ import { ref, computed, onMounted, nextTick } from "vue";
 import { shiftHue, opacity, makeXls } from "../lib";
 import mainConfig from "../default_configs.json";
 import pdf from "../pdf";
+import img from "../img";
 import { useMouse } from "../useMouse";
 import { calcTooltipPosition } from "../calcTooltipPosition";
 import { useNestedProp } from "../useNestedProp";
@@ -27,6 +28,7 @@ const props = defineProps({
 const uid = ref(`vue-ui-candlestick-${Math.random()}`);
 const defaultConfig = ref(mainConfig.vue_ui_candlestick);
 
+const isImaging = ref(false);
 const isPrinting = ref(false);
 const tooltip = ref(null);
 const details = ref(null);
@@ -235,16 +237,41 @@ function useTooltip(index) {
     }
 }
 
-function generatePdf(){
+const __to__ = ref(null);
+
+function showSpinnerPdf() {
     isPrinting.value = true;
-    nextTick(() => {
+}
+
+function generatePdf(){
+    showSpinnerPdf();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
         pdf({
             domElement: document.getElementById(`vue-ui-candlestick_${uid.value}`),
             fileName: candlestickConfig.value.style.title.text || 'vue-ui-candlestick'
         }).finally(() => {
             isPrinting.value = false;
         });
-    })
+    }, 100)
+}
+
+function showSpinnerImage() {
+    isImaging.value = true;
+}
+
+function generateImage() {
+    showSpinnerImage();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        img({
+            domElement: document.getElementById(`vue-ui-candlestick_${uid.value}`),
+            fileName: candlestickConfig.value.style.title.text || 'vue-ui-candlestick',
+            format: 'png'
+        }).finally(() => {
+            isImaging.value = false;
+        })
+    }, 100)
 }
 
 function generateXls() {
@@ -270,7 +297,8 @@ function generateXls() {
 
 defineExpose({
     generatePdf,
-    generateXls
+    generateXls,
+    generateImage
 });
 
 </script>
@@ -305,11 +333,14 @@ defineExpose({
             v-if="candlestickConfig.userOptions.show"
             :backgroundColor="candlestickConfig.style.backgroundColor"
             :color="candlestickConfig.style.color"
+            :isImaging="isImaging"
             :isPrinting="isPrinting"
             :title="candlestickConfig.userOptions.title"
             :uid="uid"
+            :hasImg="true"
             @generatePdf="generatePdf"
             @generateXls="generateXls"
+            @generateImage="generateImage"
          >
             <template #checkboxes>
                 <div class="vue-ui-options-item">
diff --git a/src/components/vue-ui-chestnut.cy.js b/src/components/vue-ui-chestnut.cy.js
index 493facad..415538d0 100644
--- a/src/components/vue-ui-chestnut.cy.js
+++ b/src/components/vue-ui-chestnut.cy.js
@@ -84,6 +84,9 @@ describe('<VueUiChestnut />', () => {
       cy.get(`[data-cy="user-options-xls"]`).click();
       cy.wait(3000);
       cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.layout.title.text}.xlsx`);
+      cy.get(`[data-cy="user-options-img"]`).click();
+      cy.wait(3000);
+      cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.layout.title.text}.png`);
       cy.clearDownloads();
 
       cy.get(`[data-cy="user-options-summary"]`).click();
diff --git a/src/components/vue-ui-chestnut.vue b/src/components/vue-ui-chestnut.vue
index ddf1749a..047c4ff2 100644
--- a/src/components/vue-ui-chestnut.vue
+++ b/src/components/vue-ui-chestnut.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { ref, computed, onMounted, nextTick } from "vue";
 import { palette, opacity, shiftHue, adaptColorToBackground, makeDonut, convertColorToHex, makeXls } from "../lib";
-import pdf from "../pdf.js";
+import pdf from "../pdf";
+import img from "../img";
 import mainConfig from "../default_configs.json";
 import { useNestedProp } from "../useNestedProp";
 import UserOptions from "../atoms/UserOptions.vue";
@@ -25,6 +26,7 @@ const uid = ref(`vue-ui-chestnut-${Math.random()}`);
 
 const defaultConfig = ref(mainConfig.vue_ui_chestnut);
 
+const isImaging = ref(false);
 const isPrinting = ref(false);
 const chestnutChart = ref(null);
 const details = ref(null);
@@ -325,24 +327,46 @@ function isArcBigEnough(arc) {
     return arc.proportion * 100 > chestnutConfig.value.style.chart.layout.nuts.selected.labels.dataLabels.hideUnderValue;
 }
 
-function sumValues(source) {
-    return [...source].map(s => s.value).reduce((a, b) => a + b, 0);
-}
-
 onMounted(() => {
     const height = totalBranches.value * (svg.value.branchSize + svg.value.gap) + svg.value.padding.top + svg.value.padding.bottom;
     svg.value.height = height;
 });
 
+const __to__ = ref(null);
 
-function generatePdf(){
+function showSpinnerPdf() {
     isPrinting.value = true;
-    pdf({
-        domElement: document.getElementById(`vue-ui-chestnut_${uid.value}`),
-        fileName: chestnutConfig.value.style.chart.layout.title.text || 'vue-ui-chestnut'
-    }).finally(() => {
-        isPrinting.value = false;
-    });
+}
+
+function generatePdf(){
+    showSpinnerPdf();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        pdf({
+            domElement: document.getElementById(`vue-ui-chestnut_${uid.value}`),
+            fileName: chestnutConfig.value.style.chart.layout.title.text || 'vue-ui-chestnut'
+        }).finally(() => {
+            isPrinting.value = false;
+        });
+    }, 100)
+}
+
+function showSpinnerImage() {
+    isImaging.value = true;
+}
+
+function generateImage() {
+    showSpinnerImage();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        img({
+            domElement: document.getElementById(`vue-ui-chestnut_${uid.value}`),
+            fileName: chestnutConfig.value.style.chart.layout.title.text || 'vue-ui-chestnut',
+            format: 'png'
+        }).finally(() => {
+            isImaging.value = false;
+        })
+    }, 100)
 }
 
 const table = computed(() => {
@@ -400,7 +424,8 @@ function generateXls() {
 defineExpose({
     getData,
     generatePdf,
-    generateXls
+    generateXls,
+    generateImage
 });
 
 </script>
@@ -418,11 +443,14 @@ defineExpose({
             v-if="chestnutConfig.userOptions.show"
             :backgroundColor="chestnutConfig.style.chart.backgroundColor"
             :color="chestnutConfig.style.chart.color"
+            :isImaging="isImaging"
             :isPrinting="isPrinting"
             :title="chestnutConfig.userOptions.title"
             :uid="uid"
+            :hasImg="true"
             @generatePdf="generatePdf"
             @generateXls="generateXls"
+            @generateImage="generateImage"
         >
             <template #checkboxes>
                 <div class="vue-ui-options-item">
diff --git a/src/components/vue-ui-donut.cy.js b/src/components/vue-ui-donut.cy.js
index 23744b45..4d66658d 100644
--- a/src/components/vue-ui-donut.cy.js
+++ b/src/components/vue-ui-donut.cy.js
@@ -257,54 +257,15 @@ describe('<VueUiDonut />', () => {
         }
       });
 
-
-      cy.get(`[data-cy="donut-checkbox-table"]`).then(($checkbox) => {
-        cy.get(`[data-cy="donut-table"]`).should('not.exist');
-
-        cy.wrap($checkbox)
-          .check();
-
-        cy.viewport(1000, 1200);
-        cy.get(`[data-cy="donut-table"]`).should('exist');
-        cy.get(`[data-cy="donut-table-title"]`)
-          .should('exist')
-          .contains(`${fixture.config.style.chart.title.text} : ${fixture.config.style.chart.title.subtitle.text}`);
-
-        for (let i = 0; i < fixture.dataset.length; i += 1) {
-          const expectedValue = sortedDataset[i].values.reduce((a, b) => a + b, 0);
-          const expectedPercentage = `${(expectedValue / grandTotal * 100).toFixed(fixture.config.style.chart.legend.roundingPercentage)}%`;
-
-          cy.get(`[data-cy="donut-table-tr-${i}"]`).then(($tr) => {
-            cy.wrap($tr)
-              .should('exist');
-
-            cy.wrap($tr)
-              .find('td')
-              .should('have.length', 3)
-              .each(($td, index) => {
-                if (index === 0) {
-                  cy.wrap($td)
-                    .should('contain.text', `●${sortedDataset[i].name}`)
-                }
-                if (index === 1) {
-                  cy.wrap($td)
-                    .should('contain.text', expectedValue)
-                }
-                if (index === 2) {
-                  cy.wrap($td)
-                    .should('contain.text', expectedPercentage)
-                }
-              });
-          });
-        }
-      });
-
       cy.get(`[data-cy="user-options-pdf"]`).click();
       cy.wait(5000);
       cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.pdf`);
       cy.get(`[data-cy="user-options-xls"]`).click();
       cy.wait(3000);
       cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.xlsx`);
+      cy.get(`[data-cy="user-options-img"]`).click();
+      cy.wait(3000);
+      cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.png`);
       cy.clearDownloads();
     });
   });
diff --git a/src/components/vue-ui-donut.vue b/src/components/vue-ui-donut.vue
index 7a7e5a38..18bd1671 100644
--- a/src/components/vue-ui-donut.vue
+++ b/src/components/vue-ui-donut.vue
@@ -1,13 +1,15 @@
 <script setup>
 import { ref, computed, nextTick } from "vue";
-import { treeShake, makeDonut, palette, convertColorToHex, opacity, convertConfigColors, makeXls } from '../lib';
+import { makeDonut, palette, convertColorToHex, opacity, makeXls } from '../lib';
 import pdf from "../pdf";
+import img from "../img";
 import mainConfig from "../default_configs.json";
 import { useMouse } from "../useMouse";
 import { calcTooltipPosition } from "../calcTooltipPosition";
 import Title from "../atoms/Title.vue";
 import { useNestedProp } from "../useNestedProp";
 import UserOptions from "../atoms/UserOptions.vue";
+import DataTable from "../atoms/DataTable.vue";
 
 const props = defineProps({
     config: {
@@ -29,6 +31,7 @@ const uid = ref(`vue-ui-donut-${Math.random()}`);
 const defaultConfig = ref(mainConfig.vue_ui_donut);
 
 const isPrinting = ref(false);
+const isImaging = ref(false);
 const donutChart = ref(null);
 const tooltip = ref(null);
 const details = ref(null);
@@ -191,14 +194,42 @@ function useTooltip(arc, i, showTooltip = true) {
     tooltipContent.value = `<div>${html}</div>`;
 }
 
-function generatePdf(){
+const __to__ = ref(null);
+
+function showSpinnerPdf() {
     isPrinting.value = true;
-    pdf({
-        domElement: document.getElementById(`donut__${uid.value}`),
-        fileName: donutConfig.value.style.chart.title.text || 'vue-ui-donut'
-    }).finally(() => {
-        isPrinting.value = false;
-    });
+}
+
+function generatePdf(){
+    showSpinnerPdf();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        pdf({
+            domElement: document.getElementById(`donut__${uid.value}`),
+            fileName: donutConfig.value.style.chart.title.text || 'vue-ui-donut'
+        }).finally(() => {
+            isPrinting.value = false;
+        });
+    }, 100)
+    
+}
+
+function showSpinnerImage() {
+    isImaging.value = true;
+}
+
+function generateImage() {
+    showSpinnerImage();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        img({
+            domElement: document.getElementById(`donut__${uid.value}`),
+            fileName: donutConfig.value.style.chart.title.text || 'vue-ui-donut',
+            format: 'png'
+        }).finally(() => {
+            isImaging.value = false;
+        })
+    }, 100)
 }
 
 const table = computed(() => {
@@ -225,10 +256,49 @@ function generateXls() {
     });
 }
 
+const dataTable = computed(() => {
+    const head = [
+        ` <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>`,
+        Number(total.value.toFixed(donutConfig.value.table.td.roundingValue)).toLocaleString(),
+        '100%'
+    ];
+
+    const body = table.value.head.map((h,i) => {
+        return [
+            {
+                color: h.color,
+                name: h.name
+            },
+            table.value.body[i].toFixed(donutConfig.value.table.td.roundingValue),
+            isNaN(table.value.body[i] / total.value) ? "-" : (table.value.body[i] / total.value * 100).toFixed(donutConfig.value.table.td.roundingPercentage)
+        ]
+    });
+
+    const config = {
+        th: {
+            backgroundColor: donutConfig.value.table.th.backgroundColor,
+            color: donutConfig.value.table.th.color,
+            outline: donutConfig.value.table.th.outline
+        },
+        td: {
+            backgroundColor: donutConfig.value.table.td.backgroundColor,
+            color: donutConfig.value.table.td.color,
+            outline: donutConfig.value.table.td.outline
+        }
+    }
+
+    return {
+        head,
+        body,
+        config
+    }
+});
+
 defineExpose({
     getData,
     generatePdf,
-    generateXls
+    generateXls,
+    generateImage
 });
 
 </script>
@@ -264,10 +334,13 @@ defineExpose({
             :backgroundColor="donutConfig.style.chart.backgroundColor"
             :color="donutConfig.style.chart.color"
             :isPrinting="isPrinting"
+            :isImaging="isImaging"
             :title="donutConfig.userOptions.title"
             :uid="uid"
+            hasImg
             @generatePdf="generatePdf"
             @generateXls="generateXls"
+            @generateImage="generateImage"
         >
             <template #checkboxes>
                 <div class="vue-ui-options-item">
@@ -484,47 +557,20 @@ defineExpose({
         />
 
         <!-- DATA TABLE -->
-        <div data-cy="donut-table" class="vue-ui-donut-table" :style="`width:100%;margin-top:${mutableConfig.inside ? '48px' : ''}`" v-if="mutableConfig.showTable">
-            <table>
-                <thead>
-                    <tr v-if="donutConfig.style.chart.title.text" data-cy="donut-table-title">
-                        <th colspan="3" :style="`background:${donutConfig.table.th.backgroundColor};color:${donutConfig.table.th.color};outline:${donutConfig.table.th.outline}`">
-                            <span>{{ donutConfig.style.chart.title.text }}</span>
-                            <span v-if="donutConfig.style.chart.title.subtitle.text">
-                                : {{ donutConfig.style.chart.title.subtitle.text }}
-                            </span>
-                        </th>
-                    </tr>
-                    <tr>
-                        <th align="right" :style="`background:${donutConfig.table.th.backgroundColor};color:${donutConfig.table.th.color};outline:${donutConfig.table.th.outline};padding-right:6px`">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" /></svg>
-                        </th>
-                        <th :style="`background:${donutConfig.table.th.backgroundColor};color:${donutConfig.table.th.color};outline:${donutConfig.table.th.outline};text-align:right;padding-right:6px`">
-                            {{ Number(total.toFixed(donutConfig.table.td.roundingValue)).toLocaleString() }}
-                        </th>
-                        <th :style="`background:${donutConfig.table.th.backgroundColor};color:${donutConfig.table.th.color};outline:${donutConfig.table.th.outline};text-align:right;padding-right:6px`">
-                            100%
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="(th, i) in table.head" :data-cy="`donut-table-tr-${i}`">
-                        <td :style="`background:${donutConfig.table.td.backgroundColor};color:${donutConfig.table.td.color};outline:${donutConfig.table.td.outline}`">
-                            <div style="max-width: 200px margin:0 auto">
-                                <span :style="`color:${th.color};margin-right:6px;`">●</span>
-                                <span>{{ th.name }}</span>
-                            </div>
-                        </td>
-                        <td :style="`background:${donutConfig.table.td.backgroundColor};color:${donutConfig.table.td.color};outline:${donutConfig.table.td.outline}`">
-                            {{ table.body[i].toFixed(donutConfig.table.td.roundingValue) }}
-                        </td>
-                        <td :style="`background:${donutConfig.table.td.backgroundColor};color:${donutConfig.table.td.color};outline:${donutConfig.table.td.outline}`">
-                            {{ isNaN(table.body[i] / total) ? "-" : (table.body[i] / total * 100).toFixed(donutConfig.table.td.roundingPercentage) }}%
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+        <DataTable
+            v-if="mutableConfig.showTable"
+            :head="dataTable.head" 
+            :body="dataTable.body"
+            :config="dataTable.config"
+            :title="`${donutConfig.style.chart.title.text}${donutConfig.style.chart.title.subtitle.text ? ` : ${donutConfig.style.chart.title.subtitle.text}` : ''}`"
+        >
+            <template #th="{th}">
+                <div v-html="th" style="display:flex;align-items:center"></div>
+            </template>
+            <template #td="{td}">
+                {{ td.name || td }}
+            </template>
+        </DataTable>
     </div>
 </template>
 
@@ -592,22 +638,6 @@ path {
     z-index:1;
 }
 
-.vue-ui-donut table {
-    width: 100%;
-    border-collapse:collapse;
-}
-.vue-ui-donut table td {
-    text-align:right;
-    padding-right: 6px;
-    font-variant-numeric: tabular-nums;
-}
-.vue-ui-donut table th {
-    position: sticky;
-    top:0;
-    font-weight: 400;
-    user-select: none;
-}
-
 .vue-ui-dna * {
     animation: none !important;
 }
diff --git a/src/components/vue-ui-gauge.cy.js b/src/components/vue-ui-gauge.cy.js
index f6f536a8..04b15aa3 100644
--- a/src/components/vue-ui-gauge.cy.js
+++ b/src/components/vue-ui-gauge.cy.js
@@ -128,6 +128,9 @@ describe('<VueUiGauge />', () => {
       cy.get(`[data-cy="user-options-pdf"]`).click();
       cy.wait(3000);
       cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.pdf`);
+      cy.get(`[data-cy="user-options-img"]`).click();
+      cy.wait(3000);
+      cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.png`);
       cy.clearDownloads();
       cy.get(`[data-cy="user-options-summary"]`).click();
     });
diff --git a/src/components/vue-ui-gauge.vue b/src/components/vue-ui-gauge.vue
index e111e93e..88fd415e 100644
--- a/src/components/vue-ui-gauge.vue
+++ b/src/components/vue-ui-gauge.vue
@@ -2,6 +2,7 @@
 import { ref, computed, onMounted } from "vue";
 import { palette, rotateMatrix, addVector, matrixTimes, opacity, convertColorToHex } from "../lib.js";
 import pdf from "../pdf";
+import img from "../img";
 import mainConfig from "../default_configs.json";
 import { useNestedProp } from "../useNestedProp";
 import UserOptions from "../atoms/UserOptions.vue";
@@ -24,6 +25,7 @@ const uid = ref(`vue-ui-gauge-${Math.random()}`);
 
 const defaultConfig = ref(mainConfig.vue_ui_gauge);
 
+const isImaging = ref(false);
 const isPrinting = ref(false);
 const gaugeChart = ref(null);
 const details = ref(null);
@@ -230,18 +232,46 @@ function calcMarkerFontSize(value) {
     return 20;
 }
 
-function generatePdf(){
+const __to__ = ref(null);
+
+function showSpinnerPdf() {
     isPrinting.value = true;
-    pdf({
-        domElement: document.getElementById(`vue-ui-gauge_${uid.value}`),
-        fileName: gaugeConfig.value.style.chart.title.text || 'vue-ui-gauge'
-    }).finally(() => {
-        isPrinting.value = false;
-    });
+}
+
+function generatePdf(){
+    showSpinnerPdf();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        pdf({
+            domElement: document.getElementById(`vue-ui-gauge_${uid.value}`),
+            fileName: gaugeConfig.value.style.chart.title.text || 'vue-ui-gauge'
+        }).finally(() => {
+            isPrinting.value = false;
+        });
+    }, 100)
+}
+
+function showSpinnerImage() {
+    isImaging.value = true;
+}
+
+function generateImage() {
+    showSpinnerImage();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        img({
+            domElement: document.getElementById(`vue-ui-gauge_${uid.value}`),
+            fileName: gaugeConfig.value.style.chart.title.text || 'vue-ui-gauge',
+            format: 'png'
+        }).finally(() => {
+            isImaging.value = false;
+        })
+    }, 100)
 }
 
 defineExpose({
-    generatePdf
+    generatePdf,
+    generateImage
 });
 
 </script>
@@ -272,11 +302,14 @@ defineExpose({
             v-if="gaugeConfig.userOptions.show"
             :backgroundColor="gaugeConfig.style.chart.backgroundColor"
             :color="gaugeConfig.style.chart.color"
+            :isImaging="isImaging"
             :isPrinting="isPrinting"
             :title="gaugeConfig.userOptions.title"
             :uid="uid"
             :hasXls="false"
+            :hasImg="true"
             @generatePdf="generatePdf"
+            @generateImage="generateImage"
         >
             <template #checkboxes>
                 <div class="vue-ui-options-item">
diff --git a/src/components/vue-ui-heatmap.cy.js b/src/components/vue-ui-heatmap.cy.js
index 433e1928..ee05754a 100644
--- a/src/components/vue-ui-heatmap.cy.js
+++ b/src/components/vue-ui-heatmap.cy.js
@@ -126,6 +126,9 @@ describe('<VueUiHeatmap />', () => {
       cy.get(`[data-cy="user-options-xls"]`).click();
       cy.wait(3000);
       cy.readFile(`cypress\\Downloads\\${fixture.config.style.title.text}.xlsx`);
+      cy.get(`[data-cy="user-options-img"]`).click();
+      cy.wait(3000);
+      cy.readFile(`cypress\\Downloads\\${fixture.config.style.title.text}.png`);
       cy.clearDownloads();
 
       cy.get(`[data-cy="user-options-summary"]`).click();
diff --git a/src/components/vue-ui-heatmap.vue b/src/components/vue-ui-heatmap.vue
index d3d95f1f..65000cb1 100644
--- a/src/components/vue-ui-heatmap.vue
+++ b/src/components/vue-ui-heatmap.vue
@@ -3,6 +3,7 @@ import { ref, computed, nextTick } from "vue";
 import { opacity, makeXls } from "../lib";
 import mainConfig from "../default_configs.json";
 import pdf from "../pdf";
+import img from "../img";
 import { useMouse } from "../useMouse";
 import { calcTooltipPosition } from "../calcTooltipPosition";
 import { useNestedProp } from "../useNestedProp";
@@ -28,6 +29,7 @@ const uid = ref(`vue-ui-heatmap-${Math.random()}`);
 
 const defaultConfig = ref(mainConfig.vue_ui_heatmap);
 
+const isImaging = ref(false);
 const isPrinting = ref(false);
 const heatmapChart = ref(null);
 const tooltip = ref(null);
@@ -155,16 +157,41 @@ function useTooltip(datapoint) {
     tooltipContent.value = `<div style="font-size:${heatmapConfig.value.style.tooltip.fontSize}px">${html}</div>`;
 }
 
-function generatePdf(){
+const __to__ = ref(null);
+
+function showSpinnerPdf() {
     isPrinting.value = true;
-    nextTick(() => {
+}
+
+function generatePdf(){
+    showSpinnerPdf();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
         pdf({
             domElement: document.getElementById(`heatmap__${uid.value}`),
             fileName: heatmapConfig.value.style.title.text || 'vue-ui-heatmap'
         }).finally(() => {
             isPrinting.value = false;
         });
-    })
+    }, 100)
+}
+
+function showSpinnerImage() {
+    isImaging.value = true;
+}
+
+function generateImage() {
+    showSpinnerImage();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        img({
+            domElement: document.getElementById(`heatmap__${uid.value}`),
+            fileName: heatmapConfig.value.style.title.text || 'vue-ui-heatmap',
+            format: 'png'
+        }).finally(() => {
+            isImaging.value = false;
+        })
+    }, 100)
 }
 
 const table = computed(() => {
@@ -177,6 +204,7 @@ const table = computed(() => {
     return { head, body };
 });
 
+
 function generateXls() {
     nextTick(() => {
         const labels = ["", ...props.dataset.map((ds,i) => {
@@ -201,7 +229,8 @@ function generateXls() {
 
 defineExpose({
     generatePdf,
-    generateXls
+    generateXls,
+    generateImage
 });
 
 </script>
@@ -235,11 +264,14 @@ defineExpose({
             v-if="heatmapConfig.userOptions.show"
             :backgroundColor="heatmapConfig.style.backgroundColor"
             :color="heatmapConfig.style.color"
+            :isImaging="isImaging"
             :isPrinting="isPrinting"
             :title="heatmapConfig.userOptions.title"
             :uid="uid"
+            :hasImg="true"
             @generatePdf="generatePdf"
             @generateXls="generateXls"
+            @generateImage="generateImage"
         >
             <template #checkboxes>
                 <div class="vue-ui-options-item">
diff --git a/src/components/vue-ui-onion.cy.js b/src/components/vue-ui-onion.cy.js
index 5b6e50ba..a0397cea 100644
--- a/src/components/vue-ui-onion.cy.js
+++ b/src/components/vue-ui-onion.cy.js
@@ -122,6 +122,9 @@ describe('<VueUiOnion />', () => {
       cy.get(`[data-cy="user-options-xls"]`).click();
       cy.wait(3000);
       cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.xlsx`);
+      cy.get(`[data-cy="user-options-img"]`).click();
+      cy.wait(3000);
+      cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.png`);
       cy.clearDownloads();
     });
   });
diff --git a/src/components/vue-ui-onion.vue b/src/components/vue-ui-onion.vue
index ddd51e9c..1af828fa 100644
--- a/src/components/vue-ui-onion.vue
+++ b/src/components/vue-ui-onion.vue
@@ -2,6 +2,7 @@
 import { ref, computed, nextTick } from "vue";
 import { convertColorToHex, palette, opacity, makeXls } from "../lib.js";
 import pdf from "../pdf";
+import img from "../img";
 import mainConfig from "../default_configs.json";
 import { useNestedProp } from "../useNestedProp";
 import Title from "../atoms/Title.vue";
@@ -26,6 +27,7 @@ const uid = ref(`vue-ui-onion-${Math.random()}`);
 
 const defaultConfig = ref(mainConfig.vue_ui_onion);
 
+const isImaging = ref(false);
 const isPrinting = ref(false);
 const onionChart = ref(null);
 const details = ref(null);
@@ -152,16 +154,41 @@ const table = computed(() => {
     return { head, body };
 });
 
-function generatePdf(){
+const __to__ = ref(null);
+
+function showSpinnerPdf() {
     isPrinting.value = true;
-    nextTick(() => {
+}
+
+function generatePdf(){
+    showSpinnerPdf();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
         pdf({
             domElement: document.getElementById(`vue-ui-onion_${uid.value}`),
             fileName: onionConfig.value.style.chart.title.text || 'vue-ui-onion'
         }).finally(() => {
             isPrinting.value = false;
         });
-    })
+    }, 100)
+}
+
+function showSpinnerImage() {
+    isImaging.value = true;
+}
+
+function generateImage() {
+    showSpinnerImage();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        img({
+            domElement: document.getElementById(`vue-ui-onion_${uid.value}`),
+            fileName: onionConfig.value.style.chart.title.text || 'vue-ui-onion',
+            format: 'png'
+        }).finally(() => {
+            isImaging.value = false;
+        })
+    }, 100)
 }
 
 function generateXls() {
@@ -179,7 +206,8 @@ const selectedSerie = ref(undefined);
 defineExpose({
     getData,
     generatePdf,
-    generateXls
+    generateXls,
+    generateImage
 });
 
 </script>
@@ -219,11 +247,14 @@ defineExpose({
             v-if="onionConfig.userOptions.show"
             :backgroundColor="onionConfig.style.chart.backgroundColor"
             :color="onionConfig.style.chart.color"
+            :isImaging="isImaging"
             :isPrinting="isPrinting"
             :title="onionConfig.userOptions.title"
             :uid="uid"
+            :hasImg="true"
             @generatePdf="generatePdf"
             @generateXls="generateXls"
+            @generateImage="generateImage"
         >
             <template #checkboxes>
                 <div class="vue-ui-options-item">
diff --git a/src/components/vue-ui-quadrant.cy.js b/src/components/vue-ui-quadrant.cy.js
index c29fc4ac..cf043a41 100644
--- a/src/components/vue-ui-quadrant.cy.js
+++ b/src/components/vue-ui-quadrant.cy.js
@@ -101,6 +101,9 @@ describe('<VueUiQuadrant />', () => {
       cy.get(`[data-cy="user-options-xls"]`).click();
       cy.wait(3000);
       cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.xlsx`);
+      cy.get(`[data-cy="user-options-img"]`).click();
+      cy.wait(3000);
+      cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.png`);
       cy.clearDownloads();
 
       cy.get(`[data-cy="user-options-summary"]`).click();
diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue
index 9c7e13b0..4d8d8720 100644
--- a/src/components/vue-ui-quadrant.vue
+++ b/src/components/vue-ui-quadrant.vue
@@ -2,6 +2,7 @@
 import { ref, computed, onMounted, nextTick } from "vue";
 import { palette, createPolygonPath, createStar, giftWrap, shiftHue, opacity, convertColorToHex, makeXls } from "../lib";
 import pdf from "../pdf.js";
+import img from "../img.js";
 import mainConfig from "../default_configs.json";
 import { useMouse } from "../useMouse";
 import { calcTooltipPosition } from "../calcTooltipPosition";
@@ -30,6 +31,7 @@ const emit = defineEmits(['selectPlot', 'selectSide', 'selectLegend']);
 
 const defaultConfig = ref(mainConfig.vue_ui_quadrant);
 
+const isImaging = ref(false);
 const isPrinting = ref(false);
 const quadrantChart = ref(null);
 const tooltip = ref(null);
@@ -427,16 +429,41 @@ function getData() {
     });
 }
 
-function generatePdf(){
+const __to__ = ref(null);
+
+function showSpinnerPdf() {
     isPrinting.value = true;
-    nextTick(() => {
+}
+
+function generatePdf(){
+    showSpinnerPdf();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
         pdf({
             domElement: document.getElementById(`vue-ui-quadrant_${uid.value}`),
             fileName: quadrantConfig.value.style.chart.title.text || 'vue-ui-quadrant'
         }).finally(() => {
             isPrinting.value = false;
-        });
-    })
+        })
+    }, 100)
+}
+
+function showSpinnerImage() {
+    isImaging.value = true;
+}
+
+function generateImage() {
+    showSpinnerImage();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        img({
+            domElement: document.getElementById(`vue-ui-quadrant_${uid.value}`),
+            fileName: quadrantConfig.value.style.chart.title.text || 'vue-ui-quadrant',
+            format: 'png'
+        }).finally(() => {
+            isImaging.value = false;
+        })
+    }, 100)
 }
 
 function generateXls() {
@@ -452,7 +479,8 @@ function generateXls() {
 defineExpose({
     getData,
     generatePdf,
-    generateXls
+    generateXls,
+    generateImage
 });
 
 </script>
@@ -488,11 +516,14 @@ defineExpose({
             v-if="quadrantConfig.userOptions.show"
             :backgroundColor="quadrantConfig.style.chart.backgroundColor"
             :color="quadrantConfig.style.chart.color"
+            :isImaging="isImaging"
             :isPrinting="isPrinting"
             :title="quadrantConfig.userOptions.title"
             :uid="uid"
+            :hasImg="true"
             @generatePdf="generatePdf"
             @generateXls="generateXls"
+            @generateImage="generateImage"
         >
             <template #checkboxes>
                 <div class="vue-ui-options-item">
diff --git a/src/components/vue-ui-radar.cy.js b/src/components/vue-ui-radar.cy.js
index 01884e94..dc5ee00e 100644
--- a/src/components/vue-ui-radar.cy.js
+++ b/src/components/vue-ui-radar.cy.js
@@ -42,27 +42,6 @@ describe('<VueUiRadar />', () => {
         cy.viewport(500, 670);
         cy.get(`[data-cy="user-options-summary"]`).click();
 
-        [
-          {
-            selector: `[data-cy="radar-text-title"]`,
-            expected: fixture.config.style.chart.title.text
-          },
-          {
-            selector: `[data-cy="radar-text-subtitle"]`,
-            expected: fixture.config.style.chart.title.subtitle.text
-          },
-        ].forEach(el => {
-          cy.get(el.selector)
-            .should('exist')
-            .contains(el.expected)
-        });
-
-        for (let i = 0; i < fixture.dataset.categories.length; i += 1) {
-          cy.get(`[data-cy="radar-foreignObject-legend-item-${i}"]`)
-            .should('exist')
-            .contains(fixture.dataset.categories[i].name)
-        }
-
         for (let i = 0; i < fixture.dataset.series.length; i += 1) {
           cy.get(`[data-cy="radar-apex-label-${i}"]`).then(($label) => {
             cy.wrap($label)
@@ -95,15 +74,18 @@ describe('<VueUiRadar />', () => {
           .contains(`${fixture.config.style.chart.title.text} : ${fixture.config.style.chart.title.subtitle.text}`);
 
 
-        cy.get(`[data-cy="user-options-summary"]`).click();
-        cy.get(`[data-cy="user-options-pdf"]`).click();
+        cy.get(`[data-cy="user-options-summary"]`).click({ force: true });
+        cy.get(`[data-cy="user-options-pdf"]`).click({ force: true });
         cy.wait(3000);
         cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.pdf`);
-        cy.get(`[data-cy="user-options-xls"]`).click();
+        cy.get(`[data-cy="user-options-xls"]`).click({ force: true });
         cy.wait(3000);
         cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.xlsx`);
+        cy.get(`[data-cy="user-options-img"]`).click({ force: true });
+        cy.wait(3000);
+        cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.png`);
 
-        cy.get(`[data-cy="user-options-summary"]`).click();
+        cy.get(`[data-cy="user-options-summary"]`).click({ force: true });
         
         const { component, wrapper } = COMPONENT;
         cy.wait(3000);
@@ -112,6 +94,9 @@ describe('<VueUiRadar />', () => {
         cy.wait(3000);
         wrapper.componentVM.generateXls();
         cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.xlsx`);
+        cy.wait(3000);
+        wrapper.componentVM.generateImage();
+        cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.png`);
         cy.clearDownloads();
 
       })
diff --git a/src/components/vue-ui-radar.vue b/src/components/vue-ui-radar.vue
index fa5370a1..3375c7aa 100644
--- a/src/components/vue-ui-radar.vue
+++ b/src/components/vue-ui-radar.vue
@@ -2,6 +2,7 @@
 import { ref, computed, nextTick } from "vue";
 import { palette, createPolygonPath, shiftHue, opacity, convertColorToHex, makeXls } from "../lib";
 import pdf from "../pdf";
+import img from "../img";
 import mainConfig from "../default_configs.json";
 import { useMouse } from "../useMouse";
 import { calcTooltipPosition } from "../calcTooltipPosition";
@@ -28,6 +29,7 @@ const uid = ref(`vue-ui-radar-${Math.random()}`);
 
 const defaultConfig = ref(mainConfig.vue_ui_radar);
 
+const isImaging = ref(false);
 const isPrinting = ref(false);
 const radarChart = ref(null);
 const tooltip = ref(null);
@@ -239,14 +241,41 @@ function useTooltip(apex, i) {
     tooltipContent.value = html;
 }
 
-function generatePdf(){
+const __to__ = ref(null);
+
+function showSpinnerPdf() {
     isPrinting.value = true;
-    pdf({
-        domElement: document.getElementById(`vue-ui-radar_${uid.value}`),
-        fileName: radarConfig.value.style.chart.title.text || 'vue-ui-radar'
-    }).finally(() => {
-        isPrinting.value = false;
-    });
+}
+
+function generatePdf(){
+    showSpinnerPdf();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        pdf({
+            domElement: document.getElementById(`vue-ui-radar_${uid.value}`),
+            fileName: radarConfig.value.style.chart.title.text || 'vue-ui-radar'
+        }).finally(() => {
+            isPrinting.value = false;
+        });
+    }, 100)
+}
+
+function showSpinnerImage() {
+    isImaging.value = true;
+}
+
+function generateImage() {
+    showSpinnerImage();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        img({
+            domElement: document.getElementById(`vue-ui-radar_${uid.value}`),
+            fileName: radarConfig.value.style.chart.title.text || 'vue-ui-radar',
+            format: 'png'
+        }).finally(() => {
+            isImaging.value = false;
+        })
+    }, 100)
 }
 
 function generateXls() {
@@ -270,7 +299,8 @@ function generateXls() {
 defineExpose({
     getData,
     generatePdf,
-    generateXls
+    generateXls,
+    generateImage
 });
 
 </script>
@@ -310,11 +340,14 @@ defineExpose({
             v-if="radarConfig.userOptions.show"
             :backgroundColor="radarConfig.style.chart.backgroundColor"
             :color="radarConfig.style.chart.color"
+            :isImaging="isImaging"
             :isPrinting="isPrinting"
             :title="radarConfig.userOptions.title"
             :uid="uid"
+            :hasImg="true"
             @generatePdf="generatePdf"
             @generateXls="generateXls"
+            @generateImage="generateImage"
         >
             <template #checkboxes>
                 <div class="vue-ui-options-item">
diff --git a/src/components/vue-ui-relation-circle.cy.js b/src/components/vue-ui-relation-circle.cy.js
index 76c91ec7..e6b0abde 100644
--- a/src/components/vue-ui-relation-circle.cy.js
+++ b/src/components/vue-ui-relation-circle.cy.js
@@ -93,6 +93,10 @@ describe('<VueUiRelationCircle />', () => {
       cy.wait(3000);
       cy.readFile(`cypress\\Downloads\\${fixture.config.style.title.text}.pdf`);
 
+      cy.get(`[data-cy="user-options-img"]`).click();
+      cy.wait(3000);
+      cy.readFile(`cypress\\Downloads\\${fixture.config.style.title.text}.png`);
+
       cy.get(`[data-cy="user-options-summary"]`).click();
       cy.clearDownloads();
 
diff --git a/src/components/vue-ui-relation-circle.vue b/src/components/vue-ui-relation-circle.vue
index d1514d20..af2bda9a 100644
--- a/src/components/vue-ui-relation-circle.vue
+++ b/src/components/vue-ui-relation-circle.vue
@@ -2,6 +2,7 @@
 import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 import { palette } from "../lib.js";
 import pdf from "../pdf";
+import img from "../img";
 import mainConfig from "../default_configs.json";
 import Title from "../atoms/Title.vue";
 import { useNestedProp } from "../useNestedProp";
@@ -24,6 +25,7 @@ const props = defineProps({
 
 const uid = ref(`vue-ui-relation-circle-${Math.random()}`);
 const defaultConfig = ref(mainConfig.vue_ui_relation_circle);
+const isImaging = ref(false);
 const isPrinting = ref(false);
 
 const relationConfig = computed(() => {
@@ -213,18 +215,47 @@ function calcLinkWidth(plot) {
     return plot.weight / maxWeight.value * relationConfig.value.style.links.maxWidth;
 }
 
-function generatePdf(){
+const __to__ = ref(null);
+
+function showSpinnerPdf() {
     isPrinting.value = true;
-    pdf({
-        domElement: document.getElementById(`relation_circle_${uid.value}`),
-        fileName: relationConfig.value.style.title.text || 'vue-ui-relation-circle'
-    }).finally(() => {
-        isPrinting.value = false;
-    });
 }
 
+function generatePdf(){
+    showSpinnerPdf();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        pdf({
+            domElement: document.getElementById(`relation_circle_${uid.value}`),
+            fileName: relationConfig.value.style.title.text || 'vue-ui-relation-circle'
+        }).finally(() => {
+            isPrinting.value = false;
+        })
+    }, 100)
+}
+
+function showSpinnerImage() {
+    isImaging.value = true;
+}
+
+function generateImage() {
+    showSpinnerImage();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        img({
+            domElement: document.getElementById(`relation_circle_${uid.value}`),
+        fileName: relationConfig.value.style.title.text || 'vue-ui-relation-circle',
+            format: 'png'
+        }).finally(() => {
+            isImaging.value = false;
+        })
+    }, 100)
+}
+
+
 defineExpose({
-    generatePdf
+    generatePdf,
+    generateImage
 })
 
 </script>
@@ -257,12 +288,15 @@ defineExpose({
             ref="details"
             v-if="relationConfig.userOptions.show"
             :hasXls="false"
+            :hasImg="true"
             :backgroundColor="relationConfig.style.backgroundColor"
             :color="relationConfig.style.color"
             :isPrinting="isPrinting"
+            :isImaging="isImaging"
             :title="relationConfig.userOptions.title"
             :uid="uid"
             @generatePdf="generatePdf"
+            @generateImage="generateImage"
         />
 
         <svg 
diff --git a/src/components/vue-ui-scatter.cy.js b/src/components/vue-ui-scatter.cy.js
index 50309c91..c21d04cd 100644
--- a/src/components/vue-ui-scatter.cy.js
+++ b/src/components/vue-ui-scatter.cy.js
@@ -236,6 +236,9 @@ describe('<VueUiScatter />', () => {
         cy.get(`[data-cy="user-options-xls"]`).click();
         cy.wait(3000);
         cy.readFile(`cypress\\Downloads\\${fixture.config.style.title.text}.xlsx`);
+        cy.get(`[data-cy="user-options-img"]`).click();
+        cy.wait(3000);
+        cy.readFile(`cypress\\Downloads\\${fixture.config.style.title.text}.png`);
         cy.clearDownloads();
 
         cy.get(`[data-cy="user-options-summary"]`).click();
diff --git a/src/components/vue-ui-scatter.vue b/src/components/vue-ui-scatter.vue
index 843f2e28..c4d1c5b0 100644
--- a/src/components/vue-ui-scatter.vue
+++ b/src/components/vue-ui-scatter.vue
@@ -2,6 +2,7 @@
 import { ref, computed, nextTick, onMounted } from "vue";
 import { palette, opacity, makeXls } from '../lib';
 import pdf from "../pdf";
+import img from "../img";
 import mainConfig from "../default_configs.json";
 import { useMouse } from "../useMouse";
 import { calcTooltipPosition } from "../calcTooltipPosition";
@@ -28,6 +29,7 @@ const uid = ref(`vue-ui-scatter-${Math.random()}`);
 
 const defaultConfig = ref(mainConfig.vue_ui_scatter);
 
+const isImaging = ref(false);
 const isPrinting = ref(false);
 const scatterChart = ref(null);
 const tooltip = ref(null);
@@ -230,16 +232,42 @@ function segregate(id) {
     }
 }
 
-function generatePdf(){
+const __to__ = ref(null);
+
+function showSpinnerPdf() {
     isPrinting.value = true;
-    nextTick(() => {
+}
+
+function generatePdf(){
+    showSpinnerPdf();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
         pdf({
             domElement: document.getElementById(`vue-ui-scatter_${uid.value}`),
             fileName: scatterConfig.value.style.title.text || 'vue-ui-scatter'
         }).finally(() => {
             isPrinting.value = false;
         });
-    })
+    }, 100)
+}
+
+function showSpinnerImage() {
+    isImaging.value = true;
+}
+
+function generateImage() {
+    showSpinnerImage();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        img({
+            domElement: document.getElementById(`vue-ui-scatter_${uid.value}`),
+                fileName: scatterConfig.value.style.title.text || 'vue-ui-scatter',
+            format: 'png'
+        }).finally(() => {
+            isImaging.value = false;
+        })
+    }, 100);
+
 }
 
 function generateXls() {
@@ -265,7 +293,8 @@ function generateXls() {
 defineExpose({
     getData,
     generatePdf,
-    generateXls
+    generateXls,
+    generateImage
 });
 
 </script>
@@ -301,11 +330,14 @@ defineExpose({
             v-if="scatterConfig.userOptions.show"
             :backgroundColor="scatterConfig.style.backgroundColor"
             :color="scatterConfig.style.color"
+            :isImaging="isImaging"
             :isPrinting="isPrinting"
             :title="scatterConfig.userOptions.title"
             :uid="uid"
+            :hasImg="true"
             @generatePdf="generatePdf"
             @generateXls="generateXls"
+            @generateImage="generateImage"
         >
             <template #checkboxes>
                 <div class="vue-ui-options-item">
diff --git a/src/components/vue-ui-thermometer.cy.js b/src/components/vue-ui-thermometer.cy.js
index f3bf75a9..05dc7ebe 100644
--- a/src/components/vue-ui-thermometer.cy.js
+++ b/src/components/vue-ui-thermometer.cy.js
@@ -57,8 +57,11 @@ describe('<VueUiThermometer />', () => {
       });
 
       cy.get(`[data-cy="user-options-pdf"]`).click();
-      cy.wait(500);
+      cy.wait(3000);
       cy.readFile(`cypress\\Downloads\\${fixture.config.style.title.text}.pdf`);
+      cy.get(`[data-cy="user-options-img"]`).click();
+      cy.wait(3000);
+      cy.readFile(`cypress\\Downloads\\${fixture.config.style.title.text}.png`);
       cy.clearDownloads();
 
       cy.get(`[data-cy="user-options-summary"]`).click();
diff --git a/src/components/vue-ui-thermometer.vue b/src/components/vue-ui-thermometer.vue
index 65e13f5a..1dc4d2f5 100644
--- a/src/components/vue-ui-thermometer.vue
+++ b/src/components/vue-ui-thermometer.vue
@@ -2,6 +2,7 @@
 import { ref, computed } from "vue";
 import { palette, convertColorToHex, opacity } from "../lib.js";
 import pdf from "../pdf";
+import img from "../img";
 import mainConfig from "../default_configs.json";
 import { useNestedProp } from "../useNestedProp";
 import Title from "../atoms/Title.vue";
@@ -24,6 +25,7 @@ const props = defineProps({
 
 const uid = ref(`vue-ui-thermometer-${Math.random()}`);
 const defaultConfig = ref(mainConfig.vue_ui_thermometer);
+const isImaging = ref(false);
 const isPrinting = ref(false);
 const thermoChart = ref(null);
 
@@ -171,20 +173,48 @@ const graduations = computed(() => {
     return grads;
 });
 
-function generatePdf(){
+const __to__ = ref(null);
+
+function showSpinnerPdf() {
     isPrinting.value = true;
     usablePadding.value.top = thermoConfig.value.style.chart.padding.top;
-    pdf({
-        domElement: document.getElementById(`thermometer__${uid.value}`),
-        fileName: thermoConfig.value.style.title.text || 'vue-ui-thermometer'
-    }).finally(() => {
-        isPrinting.value = false;
-        setPaddingTop();
-    });
+}
+
+function generatePdf(){
+    showSpinnerPdf();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        pdf({
+            domElement: document.getElementById(`thermometer__${uid.value}`),
+            fileName: thermoConfig.value.style.title.text || 'vue-ui-thermometer'
+        }).finally(() => {
+            isPrinting.value = false;
+            setPaddingTop();
+        });
+    }, 100)
+}
+
+function showSpinnerImage() {
+    isImaging.value = true;
+}
+
+function generateImage() {
+    showSpinnerImage();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        img({
+            domElement: document.getElementById(`thermometer__${uid.value}`),
+        fileName: thermoConfig.value.style.title.text || 'vue-ui-thermometer',
+            format: 'png'
+        }).finally(() => {
+            isImaging.value = false;
+        })
+    }, 100)
 }
 
 defineExpose({
-    generatePdf
+    generatePdf,
+    generateImage
 })
 
 </script>
@@ -219,10 +249,13 @@ defineExpose({
             v-if="thermoConfig.userOptions.show"
             :backgroundColor="thermoConfig.style.chart.backgroundColor"
             :color="thermoConfig.style.chart.color"
+            :isImaging="isImaging"
             :isPrinting="isPrinting"
             :title="thermoConfig.userOptions.title"
             :uid="uid"
+            :hasImg="true"
             @generatePdf="generatePdf"
+            @generateImage="generateImage"
             :hasXls="false"
         >
             <template #checkboxes>
diff --git a/src/components/vue-ui-vertical-bar.cy.js b/src/components/vue-ui-vertical-bar.cy.js
index 6dc34efe..06ec334e 100644
--- a/src/components/vue-ui-vertical-bar.cy.js
+++ b/src/components/vue-ui-vertical-bar.cy.js
@@ -137,6 +137,9 @@ describe('<VueUiVerticalBar />', () => {
         cy.get(`[data-cy="user-options-xls"]`).click();
         cy.wait(3000);
         cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.xlsx`);
+        cy.get(`[data-cy="user-options-img"]`).click();
+        cy.wait(3000);
+        cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.png`);
         cy.clearDownloads();
         cy.get(`[data-cy="user-options-summary"]`).click();
 
diff --git a/src/components/vue-ui-vertical-bar.vue b/src/components/vue-ui-vertical-bar.vue
index 3082d8c9..e36dcbd2 100644
--- a/src/components/vue-ui-vertical-bar.vue
+++ b/src/components/vue-ui-vertical-bar.vue
@@ -8,6 +8,7 @@ import {
     makeXls
 } from "../lib.js";
 import pdf from "../pdf.js";
+import img from "../img.js";
 import mainConfig from "../default_configs.json";
 import { useMouse } from "../useMouse";
 import { calcTooltipPosition } from "../calcTooltipPosition";
@@ -34,6 +35,7 @@ const uid = ref(`vue-ui-vertical-bar-${Math.random()}`);
 
 const defaultConfig = ref(mainConfig.vue_ui_vertical_bar);
 
+const isImaging = ref(false);
 const isPrinting = ref(false);
 const verticalBarChart = ref(null);
 const tooltip = ref(null);
@@ -251,16 +253,41 @@ function useTooltip(bar) {
     tooltipContent.value = `<div style="text-align:left">${html}</div>`;
 }
 
-function generatePdf(){
+const __to__ = ref(null);
+
+function showSpinnerPdf() {
     isPrinting.value = true;
-    nextTick(() => {
+}
+
+function generatePdf(){
+    showSpinnerPdf();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
         pdf({
             domElement: document.getElementById(`vue-ui-vertical-bar_${uid.value}`),
             fileName: verticalBarConfig.value.style.chart.title.text || 'vue-ui-vertical-bar'
         }).finally(() => {
             isPrinting.value = false;
         });
-    })
+    }, 100)
+}
+
+function showSpinnerImage() {
+    isImaging.value = true;
+}
+
+function generateImage() {
+    showSpinnerImage();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        img({
+            domElement: document.getElementById(`vue-ui-vertical-bar_${uid.value}`),
+            fileName: verticalBarConfig.value.style.chart.title.text || 'vue-ui-vertical-bar',
+            format: 'png'
+        }).finally(() => {
+            isImaging.value = false;
+        })
+    }, 100)
 }
 
 const table = computed(() => {
@@ -339,7 +366,8 @@ defineExpose({
     getData,
     recalculateHeight,
     generatePdf,
-    generateXls
+    generateXls,
+    generateImage
 });
 
 </script>
@@ -375,11 +403,14 @@ defineExpose({
             v-if="verticalBarConfig.userOptions.show"
             :backgroundColor="verticalBarConfig.style.chart.backgroundColor"
             :color="verticalBarConfig.style.chart.color"
+            :isImaging="isImaging"
             :isPrinting="isPrinting"
             :title="verticalBarConfig.userOptions.title"
             :uid="uid"
+            :hasImg="true"
             @generatePdf="generatePdf"
             @generateXls="generateXls"
+            @generateImage="generateImage"
         >
             <template #checkboxes>
                 <div class="vue-ui-options-item">
diff --git a/src/components/vue-ui-waffle.cy.js b/src/components/vue-ui-waffle.cy.js
index eeb9d358..405acbd0 100644
--- a/src/components/vue-ui-waffle.cy.js
+++ b/src/components/vue-ui-waffle.cy.js
@@ -165,6 +165,9 @@ describe('<VueUiWaffle />', () => {
       cy.get(`[data-cy="user-options-xls"]`).click();
       cy.wait(3000);
       cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.xlsx`);
+      cy.get(`[data-cy="user-options-img"]`).click();
+      cy.wait(3000);
+      cy.readFile(`cypress\\Downloads\\${fixture.config.style.chart.title.text}.png`);
       cy.clearDownloads();
       cy.get(`[data-cy="user-options-summary"]`)
       .click();
diff --git a/src/components/vue-ui-waffle.vue b/src/components/vue-ui-waffle.vue
index 9fb6cf44..9a7b0e83 100644
--- a/src/components/vue-ui-waffle.vue
+++ b/src/components/vue-ui-waffle.vue
@@ -2,6 +2,7 @@
 import { ref, computed, nextTick } from "vue";
 import { palette, shiftHue, opacity, convertColorToHex, makeXls } from "../lib";
 import pdf from "../pdf";
+import img from "../img";
 import mainConfig from "../default_configs.json";
 import { useMouse } from "../useMouse";
 import { calcTooltipPosition } from "../calcTooltipPosition";
@@ -29,6 +30,7 @@ const props = defineProps({
 const uid = ref(`vue-ui-waffle-${Math.random()}`);
 const defaultConfig = ref(mainConfig.vue_ui_waffle);
 
+const isImaging = ref(false);
 const isPrinting = ref(false);
 const waffleChart = ref(null);
 const tooltip = ref(null);
@@ -271,14 +273,41 @@ const table = computed(() => {
     return { head, body };
 });
 
-function generatePdf(){
+const __to__ = ref(null);
+
+function showSpinnerPdf() {
     isPrinting.value = true;
-    pdf({
-        domElement: document.getElementById(`vue-ui-waffle_${uid.value}`),
-        fileName: waffleConfig.value.style.chart.title.text || 'vue-ui-waffle'
-    }).finally(() => {
-        isPrinting.value = false;
-    });
+}
+
+function generatePdf(){
+    showSpinnerPdf();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        pdf({
+            domElement: document.getElementById(`vue-ui-waffle_${uid.value}`),
+            fileName: waffleConfig.value.style.chart.title.text || 'vue-ui-waffle'
+        }).finally(() => {
+            isPrinting.value = false;
+        })
+    }, 100)
+}
+
+function showSpinnerImage() {
+    isImaging.value = true;
+}
+
+function generateImage() {
+    showSpinnerImage();
+    clearTimeout(__to__.value);
+    __to__.value = setTimeout(() => {
+        img({
+            domElement: document.getElementById(`vue-ui-waffle_${uid.value}`),
+            fileName: waffleConfig.value.style.chart.title.text || 'vue-ui-waffle',
+            format: 'png'
+        }).finally(() => {
+            isImaging.value = false;
+        })
+    }, 100)
 }
 
 function generateXls() {
@@ -297,7 +326,8 @@ function generateXls() {
 defineExpose({
     getData,
     generatePdf,
-    generateXls
+    generateXls,
+    generateImage
 });
 
 </script>
@@ -338,10 +368,13 @@ defineExpose({
             :backgroundColor="waffleConfig.style.chart.backgroundColor"
             :color="waffleConfig.style.chart.color"
             :isPrinting="isPrinting"
+            :isImaging="isImaging"
             :title="waffleConfig.userOptions.title"
             :uid="uid"
+            :hasImg="true"
             @generatePdf="generatePdf"
             @generateXls="generateXls"
+            @generateImage="generateImage"
         >
             <template #checkboxes>
                 <div class="vue-ui-options-item">
diff --git a/src/components/vue-ui-xy.cy.js b/src/components/vue-ui-xy.cy.js
index 7960860f..65255cc4 100644
--- a/src/components/vue-ui-xy.cy.js
+++ b/src/components/vue-ui-xy.cy.js
@@ -151,10 +151,10 @@ describe('<VueUiXy />', () => {
 
       cy.get('[data-cy="xy-foreignObject-title"]')
         .should('exist')
-        .contains('Title');
+        .contains(fixture.config.chart.title.text);
       cy.get('[data-cy="xy-foreignObject-subtitle"]')
         .should('exist')
-        .contains('Subtitle');
+        .contains(fixture.config.chart.title.subtitle.text);
 
       cy.get('[data-cy="xy-foreignObject-legend"]').should('exist');
 
@@ -179,12 +179,16 @@ describe('<VueUiXy />', () => {
       cy.get(`[data-cy="user-options-summary"]`).click({force:true});
 
       cy.get(`[data-cy="user-options-pdf"]`).click();
-      cy.wait(5000);
-      cy.readFile('cypress\\Downloads\\Title.pdf');
+      cy.wait(3000);
+      cy.readFile(`cypress\\Downloads\\${fixture.config.chart.title.text}.pdf`);
 
       cy.get(`[data-cy="user-options-xls"]`).click();
       cy.wait(3000);
-      cy.readFile('cypress\\Downloads\\Title.xlsx');
+      cy.readFile(`cypress\\Downloads\\${fixture.config.chart.title.text}.xlsx`);
+
+      cy.get(`[data-cy="user-options-img"]`).click();
+      cy.wait(3000);
+      cy.readFile(`cypress\\Downloads\\${fixture.config.chart.title.text}.png`);
 
       cy.clearDownloads();
 
diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue
index 372f4e5b..83e82692 100644
--- a/src/components/vue-ui-xy.vue
+++ b/src/components/vue-ui-xy.vue
@@ -29,10 +29,13 @@
             :backgroundColor="chartConfig.chart.backgroundColor"
             :color="chartConfig.chart.color"
             :isPrinting="isPrinting"
+            :isImaging="isImaging"
             :title="chartConfig.chart.userOptions.title"
             :uid="uniqueId"
+            hasImg
             @generatePdf="generatePdf"
             @generateXls="generateXls"
+            @generateImage="generateImage"
         >
             <template #checkboxes>
                 <div class="vue-ui-options-item">
@@ -656,6 +659,7 @@
 
 <script>
 import pdf from '../pdf';
+import img from "../img";
 import { useMouse } from '../useMouse';
 import { 
     treeShake, 
@@ -672,6 +676,7 @@ import {
     createSmoothPath,
 } from '../lib';
 import mainConfig from "../default_configs.json";
+import DataTable from "../atoms/DataTable.vue";
 import Title from '../atoms/Title.vue';
 import UserOptions from "../atoms/UserOptions.vue";
 
@@ -692,8 +697,9 @@ export default {
         }
     },
     components: {
+        DataTable,
         Title,
-        UserOptions
+        UserOptions,
     },
     data(){
         const uniqueId = `vue-data-ui-xy_${Math.random()}_${Math.random()}`;
@@ -724,6 +730,7 @@ export default {
             },
             isInsideCanvas: false,
             isPrinting: false,
+            isImaging: false,
             isTooltip: false,
             mutableConfig: {
                 dataLabels: {
@@ -738,6 +745,7 @@ export default {
             segregatedSeries: [],
             uniqueId,
             slicer,
+            __to__: null,
             maxX
         }
     },
@@ -1141,6 +1149,7 @@ export default {
         treeShake,
         shiftHue,
         pdf,
+        img,
         convertColorToHex,
         convertConfigColors,
         makeXls,
@@ -1810,14 +1819,20 @@ export default {
                 this.selectedSerieIndex = null;
             }
         },
-        generatePdf(){
+        showSpinnerPdf() {
             this.isPrinting = true;
-            this.pdf({
-                domElement: document.getElementById(`vue-ui-xy_${this.uniqueId}`),
-                fileName: this.chartConfig.chart.title.text || 'vue-ui-xy'
-            }).finally(() => {
-                this.isPrinting = false;
-            });
+        },
+        generatePdf(){
+            this.showSpinnerPdf();
+            clearTimeout(this.__to__);
+            this.__to__ = setTimeout(() => {
+                this.pdf({
+                    domElement: document.getElementById(`vue-ui-xy_${this.uniqueId}`),
+                    fileName: this.chartConfig.chart.title.text || 'vue-ui-xy'
+                }).finally(() => {
+                    this.isPrinting = false;
+                });
+            }, 100)
         },
         generateXls() {
             const title = [[this.chartConfig.chart.title.text], [this.chartConfig.chart.title.subtitle.text], [""]];
@@ -1826,6 +1841,22 @@ export default {
             const table = title.concat([head]).concat(body);
             this.makeXls(table, this.chartConfig.chart.title.text || 'vue-ui-xy');
         },
+        showSpinnerImage() {
+            this.isImaging = true;
+        },
+        generateImage() {
+            this.showSpinnerImage();
+            clearTimeout(this.__to__);
+            this.__to__ = setTimeout(() => {
+                this.img({
+                    domElement: document.getElementById(`vue-ui-xy_${this.uniqueId}`),
+                    fileName: this.chartConfig.chart.title.text || 'vue-ui-xy',
+                    format: 'png'
+                }).finally(() => {
+                    this.isImaging = false;
+                });
+            }, 100)
+        }
     }
 }
 </script>
diff --git a/src/img.js b/src/img.js
new file mode 100644
index 00000000..5fed5e93
--- /dev/null
+++ b/src/img.js
@@ -0,0 +1,23 @@
+import html2canvas from 'html2canvas';
+
+export default function saveAsImage({ domElement, fileName, format = 'png' }) {
+  if (domElement) {
+    return new Promise((resolve, reject) => {
+      const downloadLink = document.createElement('a');
+      html2canvas(domElement, { scale: 2 })
+        .then((canvas) => {
+          downloadLink.href = canvas.toDataURL(`image/${format}`);
+          downloadLink.download = `${fileName}.${format}`;
+          downloadLink.click();
+          if (downloadLink) {
+            downloadLink.remove();
+          }
+          resolve();
+        })
+        .catch((error) => {
+          console.error('Error generating image:', error);
+          reject(error);
+        });
+    });
+  }
+}