diff --git a/package-lock.json b/package-lock.json
index 4b2389fd..6ca00a4a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-data-ui",
-  "version": "1.9.63",
+  "version": "1.9.64",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "1.9.63",
+      "version": "1.9.64",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
diff --git a/package.json b/package.json
index cee31342..cff43028 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.63",
+  "version": "1.9.64",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
diff --git a/src/atoms/BaseDirectionPad.vue b/src/atoms/BaseDirectionPad.vue
index 5e693d62..fddf830a 100644
--- a/src/atoms/BaseDirectionPad.vue
+++ b/src/atoms/BaseDirectionPad.vue
@@ -4,13 +4,17 @@ const props = defineProps({
     color: {
         type: String,
         default: '#FF0000'
+    },
+    isFullscreen: {
+        type: Boolean,
+        default: false
     }
 });
 const emit = defineEmits(['moveLeft', 'moveTop', 'moveRight', 'moveBottom', 'reset'])
 </script>
 
 <template>
-    <div style="position: absolute;bottom:0;right:0;width:80px;height:80px" data-html2canvas-ignore>
+    <div :style="`position: ${isFullscreen ? 'fixed' : 'absolute'};bottom:0;right:${isFullscreen ? '12px' : '0'};width:80px;height:80px`" data-html2canvas-ignore>
         <div style="position: relative;height:100%;width:100%">           
             <button @click="emit('moveLeft')" style="position: absolute;left:0;top:50%;transform:translateY(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
                 <BaseIcon :stroke="color" name="arrowLeft" style="cursor: pointer"/>
diff --git a/src/atoms/UserOptions.vue b/src/atoms/UserOptions.vue
index 07200931..d7e4d907 100644
--- a/src/atoms/UserOptions.vue
+++ b/src/atoms/UserOptions.vue
@@ -59,6 +59,10 @@ const props = defineProps({
     chartElement: {
         type: HTMLElement,
         default: null
+    },
+    isFullscreen: {
+        type: Boolean,
+        default: false,
     }
 });
 
@@ -149,7 +153,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-    <div v-click-outside="closeIfOpen" data-html2canvas-ignore class="vue-ui-user-options" :style="`width: 34px; height: 34px; position: absolute; top: 0; right:0; padding: 4px; background:transparent; `">
+    <div v-click-outside="closeIfOpen" data-html2canvas-ignore class="vue-ui-user-options" :style="`width: 34px; height: 34px; position: ${isFullscreen ? 'fixed' : 'absolute'}; top: 0; right:${isFullscreen ? '12px': '0'}; padding: 4px; background:transparent; `">
         <div tabindex="0" data-cy="user-options-summary" :style="`width:32px; position: absolute; top: 0; right:4px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; width: 32px; cursor:pointer; background:${backgroundColor};`" @click.stop="toggle" @keypress.enter="toggle">
             <BaseIcon  :name="isOpen ? 'close' : 'menu'" stroke="#CCCCCC" :stroke-width="2" />
         </div>
diff --git a/src/components/vue-ui-age-pyramid.vue b/src/components/vue-ui-age-pyramid.vue
index e6749733..71ec659d 100644
--- a/src/components/vue-ui-age-pyramid.vue
+++ b/src/components/vue-ui-age-pyramid.vue
@@ -35,6 +35,7 @@ const details = ref(null);
 const isTooltip = ref(false);
 const tooltipContent = ref("");
 const selectedIndex = ref(null);
+const step = ref(0);
 
 const agePyramidConfig = computed(() => {
     return useNestedProp({
@@ -257,6 +258,7 @@ function generateCsv() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -268,7 +270,7 @@ defineExpose({
 </script>
 
 <template>
-    <div class="vue-ui-age-pyramid" ref="agePyramid" :id="`vue-ui-age-pyramid_${uid}`" :style="`font-family:${agePyramidConfig.style.fontFamily};width:100%; text-align:center;${!agePyramidConfig.style.title.text ? 'padding-top:36px' : ''};background:${agePyramidConfig.style.backgroundColor}`">
+    <div :class="`vue-ui-age-pyramid ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`" ref="agePyramid" :id="`vue-ui-age-pyramid_${uid}`" :style="`font-family:${agePyramidConfig.style.fontFamily};width:100%; text-align:center;${!agePyramidConfig.style.title.text ? 'padding-top:36px' : ''};background:${agePyramidConfig.style.backgroundColor}`">
     
         <div v-if="(!mutableConfig.inside || isPrinting) && agePyramidConfig.style.title.text" :style="`width:100%;background:${agePyramidConfig.style.backgroundColor}`">
             <Title
@@ -294,6 +296,7 @@ defineExpose({
         <!-- OPTIONS -->
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="agePyramidConfig.userOptions.show"
             :backgroundColor="agePyramidConfig.style.backgroundColor"
             :color="agePyramidConfig.style.color"
@@ -304,6 +307,7 @@ defineExpose({
             :hasImg="true"
             hasTable
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="agePyramid"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -659,4 +663,7 @@ defineExpose({
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-candlestick.vue b/src/components/vue-ui-candlestick.vue
index 0dabfe54..ac8fd709 100644
--- a/src/components/vue-ui-candlestick.vue
+++ b/src/components/vue-ui-candlestick.vue
@@ -34,6 +34,7 @@ const isTooltip = ref(false);
 const tooltipContent = ref("");
 const candlestickChart = ref(null);
 const hoveredIndex = ref(undefined);
+const step = ref(0);
 
 onMounted(() => {
     const sliderOne = document.getElementById(`start_${uid.value}`);
@@ -270,6 +271,7 @@ function generateCsv() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -281,7 +283,7 @@ defineExpose({
 </script>
 
 <template>
-    <div ref="candlestickChart" :class="`vue-ui-candlestick ${candlestickConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${candlestickConfig.style.fontFamily};width:100%; text-align:center;${!candlestickConfig.style.title.text ? 'padding-top:36px' : ''};background:${candlestickConfig.style.backgroundColor}`" :id="`vue-ui-candlestick_${uid}`">
+    <div ref="candlestickChart" :class="`vue-ui-candlestick ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${candlestickConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${candlestickConfig.style.fontFamily};width:100%; text-align:center;${!candlestickConfig.style.title.text ? 'padding-top:36px' : ''};background:${candlestickConfig.style.backgroundColor}`" :id="`vue-ui-candlestick_${uid}`">
         <div v-if="(!mutableConfig.inside || isPrinting) && candlestickConfig.style.title.text" :style="`width:100%;background:${candlestickConfig.style.backgroundColor}`">
             <!-- TITLE AS DIV -->
             <Title
@@ -307,6 +309,7 @@ defineExpose({
          <!-- OPTIONS -->
          <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="candlestickConfig.userOptions.show"
             :backgroundColor="candlestickConfig.style.backgroundColor"
             :color="candlestickConfig.style.color"
@@ -317,6 +320,7 @@ defineExpose({
             :hasImg="true"
             hasTable
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="candlestickChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -806,5 +810,7 @@ input[type="range"]:active::-webkit-slider-thumb{
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
-
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-chestnut.vue b/src/components/vue-ui-chestnut.vue
index 94b04c7c..34bc7f27 100644
--- a/src/components/vue-ui-chestnut.vue
+++ b/src/components/vue-ui-chestnut.vue
@@ -30,6 +30,7 @@ const isImaging = ref(false);
 const isPrinting = ref(false);
 const chestnutChart = ref(null);
 const details = ref(null);
+const step = ref(0);
 
 const chestnutConfig = computed(() => {
     return useNestedProp({
@@ -384,6 +385,7 @@ function generateCsv() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -397,7 +399,7 @@ defineExpose({
 
 <template>
     <div 
-        class="vue-ui-chestnut"
+        :class="`vue-ui-chestnut ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`"
         ref="chestnutChart"
         :id="`vue-ui-chestnut_${uid}`"
         :style="`font-family:${chestnutConfig.style.fontFamily};width:100%; text-align:center;padding-top:36px;background:${chestnutConfig.style.chart.backgroundColor}`"
@@ -405,6 +407,7 @@ defineExpose({
         <!-- OPTIONS -->
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="chestnutConfig.userOptions.show"
             :backgroundColor="chestnutConfig.style.chart.backgroundColor"
             :color="chestnutConfig.style.chart.color"
@@ -415,6 +418,7 @@ defineExpose({
             :hasImg="true"
             hasTable
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="chestnutChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -1120,4 +1124,7 @@ defineExpose({
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-donut-evolution.vue b/src/components/vue-ui-donut-evolution.vue
index fa799903..6cf672b2 100644
--- a/src/components/vue-ui-donut-evolution.vue
+++ b/src/components/vue-ui-donut-evolution.vue
@@ -36,7 +36,8 @@ const hoveredIndex = ref(null);
 const hoveredDatapoint = ref(null);
 const isFixed = ref(false);
 const fixedDatapoint = ref(null);
-const donutEvolutionChart = ref(null)
+const donutEvolutionChart = ref(null);
+const step = ref(0);
 
 const emit = defineEmits(['selectLegend'])
 
@@ -362,6 +363,7 @@ function generateCsv() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -374,7 +376,7 @@ defineExpose({
 </script>
 
 <template>
-    <div ref="donutEvolutionChart" :class="`vue-ui-donut-evolution ${donutEvolutionConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`overflow: visible;font-family:${donutEvolutionConfig.style.fontFamily};width:100%; text-align:center;${!donutEvolutionConfig.style.chart.title.text ? 'padding-top:36px' : ''};background:${donutEvolutionConfig.style.chart.backgroundColor}`" :id="uid">
+    <div ref="donutEvolutionChart" :class="`vue-ui-donut-evolution ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${donutEvolutionConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${donutEvolutionConfig.style.fontFamily};width:100%; text-align:center;${!donutEvolutionConfig.style.chart.title.text ? 'padding-top:36px' : ''};background:${donutEvolutionConfig.style.chart.backgroundColor}`" :id="uid">
         <div v-if="donutEvolutionConfig.style.chart.title.text" :style="`width:100%;background:${donutEvolutionConfig.style.chart.backgroundColor};padding-bottom:24px`" @mouseleave="leave">
             <!-- TITLE AS DIV -->
             <Title
@@ -399,6 +401,7 @@ defineExpose({
 
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="donutEvolutionConfig.userOptions.show"
             :backgroundColor="donutEvolutionConfig.style.chart.backgroundColor"
             :color="donutEvolutionConfig.style.chart.color"
@@ -409,6 +412,7 @@ defineExpose({
             hasImg
             hasTable
             hasFullscreen
+            :isFullscreen="isFullscreen"
             @toggleFullscreen="toggleFullscreen"
             :chartElement="donutEvolutionChart"
             @generatePdf="generatePdf"
@@ -814,4 +818,7 @@ path {
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-donut.vue b/src/components/vue-ui-donut.vue
index e4a1c82c..da3c2c63 100644
--- a/src/components/vue-ui-donut.vue
+++ b/src/components/vue-ui-donut.vue
@@ -37,6 +37,7 @@ const details = ref(null);
 const isTooltip = ref(false);
 const tooltipContent = ref("");
 const selectedSerie = ref(null);
+const step = ref(0);
 
 const donutConfig = computed(() => {
     return useNestedProp({
@@ -295,6 +296,7 @@ const dataTable = computed(() => {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -307,7 +309,7 @@ defineExpose({
 </script>
 
 <template>
-    <div ref="donutChart" :class="`vue-ui-donut ${donutConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${donutConfig.style.fontFamily};width:100%; text-align:center;${!donutConfig.style.chart.title.text ? 'padding-top:36px' : ''};background:${donutConfig.style.chart.backgroundColor}`" :id="`donut__${uid}`">
+    <div ref="donutChart" :class="`vue-ui-donut ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${donutConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${donutConfig.style.fontFamily};width:100%; text-align:center;${!donutConfig.style.chart.title.text ? 'padding-top:36px' : ''};background:${donutConfig.style.chart.backgroundColor}`" :id="`donut__${uid}`">
         <div v-if="(!mutableConfig.inside || isPrinting) && donutConfig.style.chart.title.text" :style="`width:100%;background:${donutConfig.style.chart.backgroundColor};padding-bottom:24px`">
             <!-- TITLE AS DIV -->
             <Title
@@ -333,6 +335,7 @@ defineExpose({
         <!-- OPTIONS -->
         <UserOptions
             ref="details"
+            :key="`user_option_${step}`"
             v-if="donutConfig.userOptions.show"
             :backgroundColor="donutConfig.style.chart.backgroundColor"
             :color="donutConfig.style.chart.color"
@@ -344,6 +347,7 @@ defineExpose({
             hasTable
             hasLabel
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="donutChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -674,4 +678,7 @@ path {
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-gauge.vue b/src/components/vue-ui-gauge.vue
index 5aaf57fe..b0484543 100644
--- a/src/components/vue-ui-gauge.vue
+++ b/src/components/vue-ui-gauge.vue
@@ -29,6 +29,7 @@ const isImaging = ref(false);
 const isPrinting = ref(false);
 const gaugeChart = ref(null);
 const details = ref(null);
+const step = ref(0);
 
 const gaugeConfig = computed(() => {
     return useNestedProp({
@@ -272,6 +273,7 @@ function generateImage() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -283,7 +285,7 @@ defineExpose({
 
 <template>
     <div 
-        class="vue-ui-gauge"
+        :class="`vue-ui-gauge ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`"
         ref="gaugeChart"
         :id="`vue-ui-gauge_${uid}`"
         :style="`font-family:${gaugeConfig.style.fontFamily};width:100%; text-align:center;background:${gaugeConfig.style.chart.backgroundColor}`"
@@ -304,6 +306,7 @@ defineExpose({
         <!-- OPTIONS -->
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="gaugeConfig.userOptions.show"
             :backgroundColor="gaugeConfig.style.chart.backgroundColor"
             :color="gaugeConfig.style.chart.color"
@@ -314,6 +317,7 @@ defineExpose({
             :hasXls="false"
             :hasImg="true"
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="gaugeChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -533,4 +537,7 @@ defineExpose({
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-heatmap.vue b/src/components/vue-ui-heatmap.vue
index bd8573c3..7a115afd 100644
--- a/src/components/vue-ui-heatmap.vue
+++ b/src/components/vue-ui-heatmap.vue
@@ -35,6 +35,7 @@ const details = ref(null);
 const isTooltip = ref(false);
 const tooltipContent = ref("");
 const hoveredCell = ref(undefined);
+const step = ref(0);
    
 const heatmapConfig = computed(() => {
     return useNestedProp({
@@ -220,6 +221,7 @@ function generateCsv() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -231,7 +233,7 @@ defineExpose({
 </script>
 
 <template>
-     <div ref="heatmapChart" class="vue-ui-heatmap" :style="`font-family:${heatmapConfig.style.fontFamily};width:100%; text-align:center;${!heatmapConfig.style.title.text ? 'padding-top:36px' : ''};background:${heatmapConfig.style.backgroundColor}`" :id="`heatmap__${uid}`">
+     <div ref="heatmapChart" :class="`vue-ui-heatmap ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`" :style="`font-family:${heatmapConfig.style.fontFamily};width:100%; text-align:center;${!heatmapConfig.style.title.text ? 'padding-top:36px' : ''};background:${heatmapConfig.style.backgroundColor}`" :id="`heatmap__${uid}`">
         <div v-if="(!mutableConfig.inside || isPrinting) && heatmapConfig.style.title.text" :style="`width:100%;background:${heatmapConfig.style.backgroundColor}`">
             <Title
                 :config="{
@@ -256,6 +258,7 @@ defineExpose({
          <!-- OPTIONS -->
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="heatmapConfig.userOptions.show"
             :backgroundColor="heatmapConfig.style.backgroundColor"
             :color="heatmapConfig.style.color"
@@ -266,6 +269,7 @@ defineExpose({
             :hasImg="true"
             hasTable
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="heatmapChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -541,4 +545,7 @@ defineExpose({
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-molecule.vue b/src/components/vue-ui-molecule.vue
index 7308169a..40ba254c 100644
--- a/src/components/vue-ui-molecule.vue
+++ b/src/components/vue-ui-molecule.vue
@@ -41,6 +41,7 @@ const zoomedId = ref(null);
 const isZoom = ref(false);
 const zoomReference = ref(null);
 const selectedNode = ref(null);
+const step = ref(0);
 
 const moleculeConfig = computed(() => {
     return useNestedProp({
@@ -413,6 +414,7 @@ function getData() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -428,7 +430,7 @@ defineExpose({
     <div
         @mouseleave="hoveredNode = null; hoveredUid = null"
         ref="moleculeChart"
-        :class="`vue-ui-molecule`"
+        :class="`vue-ui-molecule ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`"
         :style="`font-family:${moleculeConfig.style.fontFamily};width:100%; text-align:center;background:${moleculeConfig.style.chart.backgroundColor}`"
         :id="`cluster_${uid}`">
 
@@ -455,6 +457,7 @@ defineExpose({
 
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="moleculeConfig.userOptions.show"
             :backgroundColor="moleculeConfig.style.chart.backgroundColor"
             :color="moleculeConfig.style.chart.color"
@@ -512,7 +515,9 @@ defineExpose({
 
         <BaseDirectionPad 
             v-if="isZoom"
+            :key="`direction_pad_${step}`"
             :color="moleculeConfig.style.chart.color"
+            :isFullscreen="isFullscreen"
             @moveLeft="move('left')"
             @moveRight="move('right')"
             @moveTop="move('top')"
@@ -561,4 +566,7 @@ defineExpose({
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-mood-radar.vue b/src/components/vue-ui-mood-radar.vue
index 12a0dc94..214b4104 100644
--- a/src/components/vue-ui-mood-radar.vue
+++ b/src/components/vue-ui-mood-radar.vue
@@ -252,7 +252,7 @@ defineExpose({
 </script>
 
 <template>
-    <div :class="`vue-ui-mood-radar ${radarConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" ref="moodRadarChart"
+    <div :class="`vue-ui-mood-radar ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${radarConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" ref="moodRadarChart"
         :id="`${uid}`" :style="`font-family:${radarConfig.style.fontFamily};width:100%; text-align:center;${!radarConfig.style.chart.title.text ? 'padding-top:36px' : ''
             };background:${radarConfig.style.chart.backgroundColor}`">
         <div v-if="radarConfig.style.chart.title.text"
@@ -469,4 +469,7 @@ defineExpose({
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
diff --git a/src/components/vue-ui-onion.vue b/src/components/vue-ui-onion.vue
index 58dc62a4..edb8cac6 100644
--- a/src/components/vue-ui-onion.vue
+++ b/src/components/vue-ui-onion.vue
@@ -32,6 +32,7 @@ const isImaging = ref(false);
 const isPrinting = ref(false);
 const onionChart = ref(null);
 const details = ref(null);
+const step = ref(0);
 
 const onionConfig = computed(() => {
     return useNestedProp({
@@ -222,6 +223,7 @@ const selectedSerie = ref(undefined);
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -235,7 +237,7 @@ defineExpose({
 
 <template>
     <div 
-        :class="`vue-ui-onion ${onionConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" 
+        :class="`vue-ui-onion ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${onionConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" 
         ref="onionChart" 
         :id="`vue-ui-onion_${uid}`"
         :style="`font-family:${onionConfig.style.fontFamily};width:100%; text-align:center;background:${onionConfig.style.chart.backgroundColor}`"
@@ -265,6 +267,7 @@ defineExpose({
         <!-- OPTIONS -->
         <UserOptions
             ref="details"
+            :key="`user_options${step}`"
             v-if="onionConfig.userOptions.show"
             :backgroundColor="onionConfig.style.chart.backgroundColor"
             :color="onionConfig.style.chart.color"
@@ -275,6 +278,7 @@ defineExpose({
             :hasImg="true"
             hasTable
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="onionChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -566,4 +570,7 @@ circle {
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue
index fb5b1e22..4583e5e5 100644
--- a/src/components/vue-ui-quadrant.vue
+++ b/src/components/vue-ui-quadrant.vue
@@ -38,6 +38,7 @@ const quadrantChart = ref(null);
 const details = ref(null);
 const isTooltip = ref(false);
 const tooltipContent = ref("");
+const step = ref(0);
 
 onMounted(() => {
     positionAxisLabels();
@@ -493,6 +494,7 @@ function generateCsv() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -505,7 +507,7 @@ defineExpose({
 </script>
 
 <template>
-    <div :class="`vue-ui-quadrant ${quadrantConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" ref="quadrantChart" :id="`vue-ui-quadrant_${uid}`" :style="`font-family:${quadrantConfig.style.fontFamily};width:100%; text-align:center;${!quadrantConfig.style.chart.title.text ? 'padding-top: 36px' : ''};background:${quadrantConfig.style.chart.backgroundColor}`">
+    <div :class="`vue-ui-quadrant ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${quadrantConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" ref="quadrantChart" :id="`vue-ui-quadrant_${uid}`" :style="`font-family:${quadrantConfig.style.fontFamily};width:100%; text-align:center;${!quadrantConfig.style.chart.title.text ? 'padding-top: 36px' : ''};background:${quadrantConfig.style.chart.backgroundColor}`">
 
         <!-- TITLE AS DIV -->
         <div v-if="(!mutableConfig.inside || isPrinting) && quadrantConfig.style.chart.title.text" :style="`width:100%;background:${quadrantConfig.style.chart.backgroundColor};padding-bottom:12px`">
@@ -532,6 +534,7 @@ defineExpose({
         <!-- OPTIONS -->
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="quadrantConfig.userOptions.show"
             :backgroundColor="quadrantConfig.style.chart.backgroundColor"
             :color="quadrantConfig.style.chart.color"
@@ -543,6 +546,7 @@ defineExpose({
             hasTable
             hasLabel
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="quadrantChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -970,4 +974,7 @@ path, line, rect, circle, polygon {
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-radar.vue b/src/components/vue-ui-radar.vue
index fd781db2..373c8fdc 100644
--- a/src/components/vue-ui-radar.vue
+++ b/src/components/vue-ui-radar.vue
@@ -36,6 +36,7 @@ const radarChart = ref(null);
 const details = ref(null);
 const isTooltip = ref(false);
 const tooltipContent = ref("");
+const step = ref(0);
 
 const radarConfig = computed(() => {
     return useNestedProp({
@@ -322,6 +323,7 @@ function generateCsv() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -335,7 +337,7 @@ defineExpose({
 
 <template>
     <div 
-        :class="`vue-ui-radar ${radarConfig.useCssAnimation ? '' : 'vue-ui-dna'}`"
+        :class="`vue-ui-radar ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${radarConfig.useCssAnimation ? '' : 'vue-ui-dna'}`"
         ref="radarChart"
         :id="`vue-ui-radar_${uid}`"
         :style="`font-family:${radarConfig.style.fontFamily};width:100%; text-align:center;${!radarConfig.style.chart.title.text ? 'padding-top:36px' : ''};background:${radarConfig.style.chart.backgroundColor}`"
@@ -365,6 +367,7 @@ defineExpose({
         <!-- OPTIONS -->
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="radarConfig.userOptions.show"
             :backgroundColor="radarConfig.style.chart.backgroundColor"
             :color="radarConfig.style.chart.color"
@@ -375,6 +378,7 @@ defineExpose({
             :hasImg="true"
             hasTable
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="radarChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -647,4 +651,7 @@ path, line, rect, circle {
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-relation-circle.vue b/src/components/vue-ui-relation-circle.vue
index 1f24707b..d1131b80 100644
--- a/src/components/vue-ui-relation-circle.vue
+++ b/src/components/vue-ui-relation-circle.vue
@@ -28,6 +28,7 @@ const defaultConfig = ref(mainConfig.vue_ui_relation_circle);
 const isImaging = ref(false);
 const isPrinting = ref(false);
 const relationCircleChart = ref(null);
+const step = ref(0);
 
 const relationConfig = computed(() => {
     return useNestedProp({
@@ -263,6 +264,7 @@ function generateImage() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -298,6 +300,7 @@ defineExpose({
 
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="relationConfig.userOptions.show"
             :hasXls="false"
             :hasImg="true"
@@ -308,6 +311,7 @@ defineExpose({
             :title="relationConfig.userOptions.title"
             :uid="uid"
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="relationCircleChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
diff --git a/src/components/vue-ui-rings.vue b/src/components/vue-ui-rings.vue
index 7664926b..1c4ab2a9 100644
--- a/src/components/vue-ui-rings.vue
+++ b/src/components/vue-ui-rings.vue
@@ -45,6 +45,7 @@ const details = ref(null);
 const isTooltip = ref(false);
 const tooltipContent = ref("");
 const selectedSerie = ref(null);
+const step = ref(0);
 
 const ringsConfig = computed(() => {
   return useNestedProp({
@@ -320,6 +321,7 @@ function generateCsv() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -334,7 +336,7 @@ defineExpose({
 <template>
   <div
     ref="ringsChart"
-    :class="`vue-ui-rings ${ringsConfig.useCssAnimation ? '' : 'vue-ui-dna'}`"
+    :class="`vue-ui-rings ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${ringsConfig.useCssAnimation ? '' : 'vue-ui-dna'}`"
     :style="`font-family:${ringsConfig.style.fontFamily};text-align:center;width:100%;background:${ringsConfig.style.chart.backgroundColor}`"
     :id="`rings_${uid}`"
     @mouseleave="
@@ -370,6 +372,7 @@ defineExpose({
     <!-- USER OPTIONS -->
     <UserOptions
         ref="details"
+        :key="`user_options_${step}`"
         v-if="ringsConfig.userOptions.show"
         :backgroundColor="ringsConfig.style.chart.backgroundColor"
         :color="ringsConfig.style.chart.color"
@@ -380,6 +383,7 @@ defineExpose({
         hasImg
         hasTable
         hasFullscreen
+        :isFullscreen="isFullscreen"
         :chartElement="ringsChart"
         @toggleFullscreen="toggleFullscreen"
         @generatePdf="generatePdf"
@@ -582,4 +586,7 @@ defineExpose({
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
diff --git a/src/components/vue-ui-scatter.vue b/src/components/vue-ui-scatter.vue
index 7a1c36fd..56513d17 100644
--- a/src/components/vue-ui-scatter.vue
+++ b/src/components/vue-ui-scatter.vue
@@ -36,6 +36,7 @@ const scatterChart = ref(null);
 const details = ref(null);
 const isTooltip = ref(false);
 const tooltipContent = ref("");
+const step = ref(0);
 
 onMounted(() => {
     const xLabel = document.getElementById(`vue-ui-scatter-xAxis-label-${uid.value}`);
@@ -303,6 +304,7 @@ function generateCsv() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -315,7 +317,7 @@ defineExpose({
 </script>
 
 <template>
-    <div :class="`vue-ui-scatter ${scatterConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" ref="scatterChart" :id="`vue-ui-scatter_${uid}`" :style="`font-family:${scatterConfig.style.fontFamily};width:100%; text-align:center;${!scatterConfig.style.title.text ? 'padding-top:36px' : ''};background:${scatterConfig.style.backgroundColor}`">
+    <div :class="`vue-ui-scatter ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${scatterConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" ref="scatterChart" :id="`vue-ui-scatter_${uid}`" :style="`font-family:${scatterConfig.style.fontFamily};width:100%; text-align:center;${!scatterConfig.style.title.text ? 'padding-top:36px' : ''};background:${scatterConfig.style.backgroundColor}`">
         
         <div v-if="(!mutableConfig.inside || isPrinting) && scatterConfig.style.title.text" :style="`width:100%;background:${scatterConfig.style.backgroundColor}`">
             <!-- TITLE AS DIV -->
@@ -342,6 +344,7 @@ defineExpose({
         <!-- OPTIONS -->
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="scatterConfig.userOptions.show"
             :backgroundColor="scatterConfig.style.backgroundColor"
             :color="scatterConfig.style.color"
@@ -352,6 +355,7 @@ defineExpose({
             :hasImg="true"
             hasTable
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="scatterChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -736,4 +740,7 @@ path, line, circle {
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-thermometer.vue b/src/components/vue-ui-thermometer.vue
index c6f565e8..21d720bc 100644
--- a/src/components/vue-ui-thermometer.vue
+++ b/src/components/vue-ui-thermometer.vue
@@ -28,6 +28,7 @@ const defaultConfig = ref(mainConfig.vue_ui_thermometer);
 const isImaging = ref(false);
 const isPrinting = ref(false);
 const thermoChart = ref(null);
+const step = ref(0);
 
 const thermoConfig = computed(() => {
     return useNestedProp({
@@ -219,6 +220,7 @@ function generateImage() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -229,7 +231,7 @@ defineExpose({
 </script>
 
 <template>
-    <div ref="thermoChart" class="vue-ui-thermometer" :style="`width:100%;background:${thermoConfig.style.chart.backgroundColor};color:${thermoConfig.style.chart.color};font-family:${thermoConfig.style.fontFamily}`" :id="`thermometer__${uid}`">
+    <div ref="thermoChart" :class="`vue-ui-thermometer ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`" :style="`width:100%;background:${thermoConfig.style.chart.backgroundColor};color:${thermoConfig.style.chart.color};font-family:${thermoConfig.style.fontFamily}`" :id="`thermometer__${uid}`">
         <!-- TITLE AS DIV -->
         <div v-if="(!mutableConfig.inside || isPrinting) && thermoConfig.style.title.text" :style="`width:100%`">
             <Title
@@ -255,6 +257,7 @@ defineExpose({
         <!-- OPTIONS -->
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="thermoConfig.userOptions.show"
             :backgroundColor="thermoConfig.style.chart.backgroundColor"
             :color="thermoConfig.style.chart.color"
@@ -264,6 +267,7 @@ defineExpose({
             :uid="uid"
             :hasImg="true"
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="thermoChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -513,4 +517,7 @@ text.vue-ui-thermometer-temperature-value {
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-tiremarks.vue b/src/components/vue-ui-tiremarks.vue
index a7270bab..4bfd187c 100644
--- a/src/components/vue-ui-tiremarks.vue
+++ b/src/components/vue-ui-tiremarks.vue
@@ -30,6 +30,7 @@ const tiremarksChart = ref(null)
 
 const isPrinting = ref(false);
 const isImaging = ref(false);
+const step = ref(0);
 
 const tiremarksConfig = computed(() => {
     return useNestedProp({
@@ -247,6 +248,7 @@ function generateImage() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -282,6 +284,7 @@ defineExpose({
 
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="tiremarksConfig.userOptions.show"
             :backgroundColor="tiremarksConfig.style.chart.backgroundColor"
             :color="tiremarksConfig.style.chart.color"
@@ -290,6 +293,7 @@ defineExpose({
             :title="tiremarksConfig.userOptions.title"
             :uid="uid"
             hasFullscreen
+            :isFullscreen="isFullscreen"
             @toggleFullscreen="toggleFullscreen"
             :chartElement="tiremarksChart"
             :hasImg="true"
diff --git a/src/components/vue-ui-vertical-bar.vue b/src/components/vue-ui-vertical-bar.vue
index f3cdaaf8..bb728aff 100644
--- a/src/components/vue-ui-vertical-bar.vue
+++ b/src/components/vue-ui-vertical-bar.vue
@@ -43,9 +43,9 @@ const verticalBarChart = ref(null);
 const details = ref(null);
 const isTooltip = ref(false);
 const tooltipContent = ref("");
-
 const barCount = ref(0);
 const hoveredBar = ref(null);
+const step = ref(0);
 
 const emit = defineEmits(['selectLegend']);
 
@@ -372,6 +372,7 @@ function generateCsv() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -385,7 +386,7 @@ defineExpose({
 </script>
 
 <template>
-    <div :class="`vue-ui-vertical-bar ${verticalBarConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" ref="verticalBarChart" :id="`vue-ui-vertical-bar_${uid}`" :style="`font-family:${verticalBarConfig.style.fontFamily};width:100%; text-align:center;${!verticalBarConfig.style.chart.title.text ? 'padding-top:36px' : ''};background:${verticalBarConfig.style.chart.backgroundColor}`">
+    <div :class="`vue-ui-vertical-bar ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${verticalBarConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" ref="verticalBarChart" :id="`vue-ui-vertical-bar_${uid}`" :style="`font-family:${verticalBarConfig.style.fontFamily};width:100%; text-align:center;${!verticalBarConfig.style.chart.title.text ? 'padding-top:36px' : ''};background:${verticalBarConfig.style.chart.backgroundColor}`">
         
         <!-- TITLE AS DIV -->
         <div v-if="(!mutableConfig.inside || isPrinting) && verticalBarConfig.style.chart.title.text" :style="`width:100%;background:${verticalBarConfig.style.chart.backgroundColor};padding-bottom:12px`">
@@ -412,6 +413,7 @@ defineExpose({
         <!-- OPTIONS -->
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="verticalBarConfig.userOptions.show"
             :backgroundColor="verticalBarConfig.style.chart.backgroundColor"
             :color="verticalBarConfig.style.chart.color"
@@ -423,6 +425,7 @@ defineExpose({
             hasTable
             hasSort
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="verticalBarChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -761,4 +764,7 @@ path, line, rect, circle, polygon {
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-waffle.vue b/src/components/vue-ui-waffle.vue
index 3e46e5ab..2fd4b0fd 100644
--- a/src/components/vue-ui-waffle.vue
+++ b/src/components/vue-ui-waffle.vue
@@ -36,6 +36,7 @@ const details = ref(null);
 const isTooltip = ref(false);
 const tooltipContent = ref("");
 const selectedSerie = ref(null);
+const step = ref(0);
 
 const waffleConfig = computed(() => {
     return useNestedProp({
@@ -377,6 +378,7 @@ const dataTable = computed(() => {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -390,7 +392,7 @@ defineExpose({
 
 <template>
     <div 
-        class="vue-ui-waffle" 
+        :class="`vue-ui-waffle ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`" 
         ref="waffleChart" 
         :id="`vue-ui-waffle_${uid}`"
         :style="`font-family:${waffleConfig.style.fontFamily};width:100%; text-align:center;${!waffleConfig.style.chart.title.text ? 'padding-top:36px' : ''};background:${waffleConfig.style.chart.backgroundColor}`"
@@ -420,6 +422,7 @@ defineExpose({
         <!-- OPTIONS -->
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="waffleConfig.userOptions.show"
             :backgroundColor="waffleConfig.style.chart.backgroundColor"
             :color="waffleConfig.style.chart.color"
@@ -430,6 +433,7 @@ defineExpose({
             :hasImg="true"
             hasTable
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="waffleChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -621,4 +625,7 @@ defineExpose({
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-wheel.vue b/src/components/vue-ui-wheel.vue
index c87bd961..6ce62e8e 100644
--- a/src/components/vue-ui-wheel.vue
+++ b/src/components/vue-ui-wheel.vue
@@ -30,6 +30,7 @@ const isImaging = ref(false);
 const isPrinting = ref(false);
 const wheelChart = ref(null);
 const details = ref(null);
+const step = ref(0);
 
 const wheelConfig = computed(() => {
     return useNestedProp({
@@ -140,6 +141,7 @@ function generateImage() {
 const isFullscreen = ref(false)
 function toggleFullscreen(state) {
     isFullscreen.value = state;
+    step.value += 1;
 }
 
 defineExpose({
@@ -180,6 +182,7 @@ defineExpose({
 
         <UserOptions
             ref="details"
+            :key="`user_options_${step}`"
             v-if="wheelConfig.userOptions.show"
             :backgroundColor="wheelConfig.style.chart.backgroundColor"
             :color="wheelConfig.style.chart.color"
@@ -190,6 +193,7 @@ defineExpose({
             :hasImg="true"
             :hasXls="false"
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="wheelChart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue
index 37f18ab8..fafacdaa 100644
--- a/src/components/vue-ui-xy.vue
+++ b/src/components/vue-ui-xy.vue
@@ -1,6 +1,6 @@
 
 <template>
-    <div :id="`vue-ui-xy_${uniqueId}`" :class="`vue-ui-xy ${chartConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" ref="chart" :style="`background:${chartConfig.chart.backgroundColor}; color:${chartConfig.chart.color};width:100%;${!chartConfig.chart.title.text ? 'padding-top:36px' : ''};font-family:${chartConfig.chart.fontFamily}`">
+    <div :id="`vue-ui-xy_${uniqueId}`" :class="`vue-ui-xy ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${chartConfig.useCssAnimation ? '' : 'vue-ui-dna'}`" ref="chart" :style="`background:${chartConfig.chart.backgroundColor}; color:${chartConfig.chart.color};width:100%;${!chartConfig.chart.title.text ? 'padding-top:36px' : ''};font-family:${chartConfig.chart.fontFamily}`">
         <!-- TITLE AS OUTSIDE DIV -->
         <div class="vue-ui-xy-title" v-if="chartConfig.chart.title.show && (!mutableConfig.titleInside || isPrinting)" :style="`font-family:${chartConfig.chart.fontFamily}`">
             <Title
@@ -25,6 +25,7 @@
 
         <UserOptions
             ref="defails"
+            :key="`user_options_${step}`"
             v-if="chartConfig.chart.userOptions.show"
             :backgroundColor="chartConfig.chart.backgroundColor"
             :color="chartConfig.chart.color"
@@ -36,6 +37,7 @@
             hasLabel
             hasTable
             hasFullscreen
+            :isFullscreen="isFullscreen"
             :chartElement="$refs.chart"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
@@ -773,6 +775,7 @@ export default {
             selectedRowIndex: null,
             segregatedSeries: [],
             uniqueId,
+            step: 0,
             slicer,
             __to__: null,
             maxX
@@ -1862,6 +1865,7 @@ export default {
         },
         toggleFullscreen(state) {
             this.isFullscreen = state;
+            this.step += 1;
         },
         showSpinnerPdf() {
             this.isPrinting = true;
@@ -2105,4 +2109,7 @@ canvas {
 .vue-data-ui-fullscreen--off {
     max-width: 100%;
 }
+.vue-data-ui-wrapper-fullscreen {
+    overflow: scroll;
+}
 </style>
\ No newline at end of file