graphieros · graphieros · Aug 26, 2025 · Aug 26, 2025
diff --git a/TestingArena/ArenaVueUiBullet.vue b/TestingArena/ArenaVueUiBullet.vue
@@ -74,6 +74,8 @@ const model = ref([
     { key: 'style.chart.animation.show', def: true, type: 'checkbox' },
     { key: 'style.chart.animation.animationFrames', def: 60, type:'range', min: 30, max: 255 },
 
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
+
     { key: 'style.chart.segments.baseColor', def: '#9A9A9A', type: 'color' },
     { key: 'style.chart.segments.dataLabels.show', def: true, type: 'checkbox' },
     { key: 'style.chart.segments.dataLabels.color', def: '#1A1A1A', type: 'color' },

diff --git a/TestingArena/ArenaVueUiChord.vue b/TestingArena/ArenaVueUiChord.vue
@@ -80,6 +80,7 @@ const model = ref([
     { key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.chart.legend.fontSize', def: 14, type: 'number', min: 8, max: 42},
     { key: 'style.chart.legend.bold', def: false, type: 'checkbox'},
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
 
     { key: 'style.chart.arcs.innerRadiusRatio', def: 1, type: 'number', min: 0.1, max: 1.5, step: 0.1 },
     { key: 'style.chart.arcs.outerRadiusRatio', def: 1, type: 'number', min: 0.1, max: 1.5, step: 0.1 },

diff --git a/TestingArena/ArenaVueUiDonut.vue b/TestingArena/ArenaVueUiDonut.vue
@@ -178,6 +178,7 @@ const model = ref([
     { key: 'style.chart.legend.roundingPercentage', def: 0, type: 'number', min: 0, max: 6, label: 'percentageRounding', category: 'legend' },
     { key: 'style.chart.legend.showPercentage', def: true, type: 'checkbox'},
     { key: 'style.chart.legend.showValue', def: true, type: 'checkbox'},
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
 
     { key: 'style.chart.title.text', def: 'Title', type: 'text', label: 'textContent', category: 'title' },
     { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'title' },

diff --git a/TestingArena/ArenaVueUiDonutEvolution.vue b/TestingArena/ArenaVueUiDonutEvolution.vue
@@ -131,6 +131,7 @@ const model = ref([
     { key: 'style.chart.legend.roundingValue', def: 2, type: 'number', min: 0, max: 12},
     { key: 'style.chart.legend.showValue', def: true, type: 'chexkbox'},
     { key: 'style.chart.legend.showPercentage', def: false, type: 'chexkbox'},
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
 
     { key: 'table.show', def: false, type: 'checkbox'},
     { key: 'table.responsiveBreakpoint', def: 400, type: 'number', min: 300, max: 800},

diff --git a/TestingArena/ArenaVueUiDumbbell.vue b/TestingArena/ArenaVueUiDumbbell.vue
@@ -146,6 +146,8 @@ const model = ref([
     { key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.chart.legend.fontSize', def: 14, type: 'number', min: 8, max: 48},
     { key: 'style.chart.legend.bold', def: false, type: 'checkbox'},
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
+
     { key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
     { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 48},

diff --git a/TestingArena/ArenaVueUiFlow.vue b/TestingArena/ArenaVueUiFlow.vue
@@ -169,6 +169,9 @@ const model = ref([
     { key: 'style.chart.padding.left', def: 12, type: 'number', min: 0, max: 100 },
     { key: 'style.chart.padding.right', def: 12, type: 'number', min: 0, max: 100 },
     { key: 'style.chart.padding.bottom', def: 12, type: 'number', min: 0, max: 100 },
+
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
+
     { key: 'style.chart.title.text', def: 'Lorem ipsum dolor', type: 'text' },
     { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color' },
     { key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 42 },

diff --git a/TestingArena/ArenaVueUiGalaxy.vue b/TestingArena/ArenaVueUiGalaxy.vue
@@ -73,6 +73,7 @@ const model = ref([
     { key: 'style.chart.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
     { key: 'style.chart.legend.showValue', def: false, type: 'checkbox'},
     { key: 'style.chart.legend.showPercentage', def: true, type: 'checkbox'},
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
 
     { key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
     { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},

diff --git a/TestingArena/ArenaVueUiHistoryPlot.vue b/TestingArena/ArenaVueUiHistoryPlot.vue
@@ -101,6 +101,8 @@ const model = ref([
     { key: 'style.chart.axes.y.name.offsetY', def: 0, type: 'number', min: -100, max: 100},
     { key: 'style.chart.axes.y.name.bold', def: false, type: 'checkbox' },
 
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
+
     { key: 'style.chart.plots.radius', def: 16, type: 'range', min: 8, max: 42},
     { key: 'style.chart.plots.stroke', def: '#FFFFFF', type: 'color'},
     { key: 'style.chart.plots.strokeWidth', def: 1, type: 'number', min: 0, max: 12},

diff --git a/TestingArena/ArenaVueUiMoodRadar.vue b/TestingArena/ArenaVueUiMoodRadar.vue
@@ -79,6 +79,8 @@ const model = ref([
     { key: 'style.chart.legend.show', def: true, type: 'checkbox'},
     { key: 'style.chart.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
     { key: 'style.chart.legend.roundingValue', def: 2, type: 'number', min: 0, max: 12},
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
+
     { key: 'table.show', def: false, type: 'checkbox'},
     { key: 'table.responsiveBreakpoint', def: 300, type: 'number', min: 300, max: 800},
     { key: 'table.columnNames.series', def: 'Series', type: 'text'},

diff --git a/TestingArena/ArenaVueUiNestedDonuts.vue b/TestingArena/ArenaVueUiNestedDonuts.vue
@@ -130,6 +130,7 @@ const model = ref([
     { key: 'style.chart.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
     { key: 'style.chart.legend.showValue', def: true, type: 'checkbox'},
     { key: 'style.chart.legend.showPercentage', def: true, type: 'checkbox'},
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
 
     { key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
     { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},

diff --git a/TestingArena/ArenaVueUiOnion.vue b/TestingArena/ArenaVueUiOnion.vue
@@ -120,7 +120,7 @@ const model = ref([
     { key: 'style.chart.legend.bold', def: false, type: 'checkbox', label: 'bold', category: 'legend' },
     { key: 'style.chart.legend.roundingValue', def: 0, type: 'number', min: 0, max: 6, label: ['rounding', 'is', 'value'], category: 'legend' },
     { key: 'style.chart.legend.roundingPercentage', def: 0, type: 'number', min: 0, max: 6, label: 'percentageRounding', category: 'legend' },
-    { key: 'style.chart.legend.offsetY', def: 0, type: 'number', min: -100, max: 100}, // DEPRECATED (used with useDiv set to false)
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
 
     { key: 'style.chart.tooltip.show', def: true, type: 'checkbox' },
     { key: 'style.chart.tooltip.backgroundColor', def: '#FFFFFF', type: 'color' },

diff --git a/TestingArena/ArenaVueUiParallelCoordinatePlot.vue b/TestingArena/ArenaVueUiParallelCoordinatePlot.vue
@@ -131,6 +131,8 @@ const model = ref([
     { key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color' },
     { key: 'style.chart.legend.fontSize', def: 16, type: 'number', min: 8, max: 42 },
     { key: 'style.chart.legend.bold', def: false, type: 'checkbox' },
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
+
     { key: 'style.chart.tooltip.show', def: true, type: 'checkbox' },
     { key: 'style.chart.tooltip.color', def: '#1A1A1A', type: 'color' },
     { key: 'style.chart.tooltip.backgroundColor', def: '#FFFFFF', type: 'color' },

diff --git a/TestingArena/ArenaVueUiQuadrant.vue b/TestingArena/ArenaVueUiQuadrant.vue
@@ -192,6 +192,8 @@ const model = ref([
     { key: 'style.chart.legend.backgroundColor', def: '#FFFFFF', type: 'color'},
     { key: "style.chart.legend.color", def: '#1A1A1A', type: 'color'},
     { key: 'style.chart.legend.fontSize', def: 14, type: 'range', min: 8, max: 48},
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
+
     { key: 'table.show', def: false, type: 'checkbox'},
     { key: 'table.responsiveBreakdpoint', def: 400, type: 'number', min: 300, max: 800},
     { key: 'table.th.backgroundColor', def: '#FFFFFF', type: 'color'},

diff --git a/TestingArena/ArenaVueUiQuickChart.vue b/TestingArena/ArenaVueUiQuickChart.vue
@@ -166,6 +166,8 @@ const model = ref([
     { key: 'legendFontSize', def: 12, type: 'number', min: 8, max: 48},
     { key: 'legendIcon', def: 'starFill', type: 'text'},
     { key: 'legendIconSize', def: 12, type: 'number', min: 8, max: 48},
+    { key: 'legendPosition', def: 'bottom', type: 'select', options: ['top', 'bottom']},
+
     { key: 'lineSmooth', def: true, type: 'checkbox'},
     { key: 'lineAnimated', def: false, type: 'checkbox' },
     { key: 'lineStrokeWidth', def: 2, type:'number', min: 0.5, max: 12, step: 0.5},

diff --git a/TestingArena/ArenaVueUiRadar.vue b/TestingArena/ArenaVueUiRadar.vue
@@ -178,6 +178,8 @@ const model = ref([
     { key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.chart.legend.fontSize', def: 14, type: 'range', min: 8, max: 48},
     { key: 'style.chart.legend.roundingPercentage', def: 2, type: 'range', min: 0, max: 12},
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
+
     { key: 'table.show', def: false, type: 'checkbox'},
     { key: 'table.responsiveBreakpoint', def: 400, type: 'range', min: 300, max: 800},
     { key: 'table.th.backgroundColor', def: '#FFFFFF', type: 'color'},

diff --git a/TestingArena/ArenaVueUiRings.vue b/TestingArena/ArenaVueUiRings.vue
@@ -110,6 +110,7 @@ const model = ref([
     { key: 'style.chart.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
     { key: 'style.chart.legend.showValue', def: true, type: 'checkbox' },
     { key: 'style.chart.legend.showPercentage', def: false, type: 'checkbox' },
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
 
     { key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
     { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},

diff --git a/TestingArena/ArenaVueUiScatter.vue b/TestingArena/ArenaVueUiScatter.vue
@@ -211,6 +211,7 @@ const model = ref([
     { key: 'style.legend.fontSize', def: 14, type: 'number', min: 6, max: 42 },
     { key: 'style.legend.bold', def: false, type: 'checkbox'},
     { key: 'style.legend.roundingValue', def: 0, type: 'number', min: 0, max: 6},
+    { key: 'style.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
 
     { key: 'style.tooltip.show', def: true, type: 'checkbox' },
     { key: 'style.tooltip.backgroundColor', def: '#FFFFFF', type: 'color' },

diff --git a/TestingArena/ArenaVueUiStackbar.vue b/TestingArena/ArenaVueUiStackbar.vue
@@ -116,6 +116,7 @@ const model = ref([
     { key: 'style.chart.legend.backgroundColor', def: '#FFFFFF', type: 'color'},
     { key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.chart.legend.fontSize', def: 14, type: 'number', min: 8, max: 42},
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
 
     { key: 'style.chart.zoom.show', def: true, type: 'checkbox'},
     { key: 'style.chart.zoom.color', def: '#CCCCCC', type: 'color'},

diff --git a/TestingArena/ArenaVueUiTreemap.vue b/TestingArena/ArenaVueUiTreemap.vue
@@ -198,6 +198,7 @@ const model = ref([
     { key: 'style.chart.legend.roundingPercentage', def: 1, type: 'number', min: 0, max: 12},
     { key: 'style.chart.legend.showValue', def: true, type: 'checkbox'},
     { key: 'style.chart.legend.showPercentage', def: false, type: 'checkbox'},
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
 
     { key: 'style.chart.title.text', def: "Lorem ipsum dolor sic amet", type: "text"},
     { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},

diff --git a/TestingArena/ArenaVueUiWaffle.vue b/TestingArena/ArenaVueUiWaffle.vue
@@ -147,6 +147,7 @@ const model = ref([
 
     { key: 'style.chart.legend.showValue', def: true, type: 'checkbox'},
     { key: 'style.chart.legend.showPercentage', def: false, type: 'checkbox'},
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
 ])
 
 const testCustomTooltip = ref(false);

diff --git a/TestingArena/ArenaVueUiWorld.vue b/TestingArena/ArenaVueUiWorld.vue
@@ -245,6 +245,8 @@ const model = ref([
     { key: 'style.chart.globe.waterColor', def: '#1F77B4', type: 'color'},
 
     { key: 'style.chart.tooltip.showMinimap', def: true, type: 'checkbox'},
+
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}
 ]);
 
 const projections = ref([

diff --git a/TestingArena/ArenaVueUiXy.vue b/TestingArena/ArenaVueUiXy.vue
@@ -116,13 +116,13 @@ onMounted(() => {
     setTimeout(() => {
         dataset.value = [
     {
-        name: "A",
+        name: "Serie A with a long name",
         series: [60, 100, 112, 221, 119, 75, null, -226, -243, 198, 156, 127, 120],
         type: "bar",
         dataLabels: false,
     },
     {
-        name: "B",
+        name: "Serie B with a long name",
         series: [60, 75, 119, 201, 109, 85, null, 206, 223, 204, 146, 117, 87],
         type: "line",
         dataLabels: false,
@@ -132,7 +132,7 @@ onMounted(() => {
         useProgression: true
     },
     {
-        name: "C",
+        name: "Serie C with a long name",
         series: [60, 75, 11, 20, 10, 8, null, 20, 22, 204, 146, 117, 55],
         type: "plot",
         dataLabels: false,
@@ -469,6 +469,7 @@ const model = ref([
     { key: 'chart.legend.show', def: true, type: 'checkbox', label: 'show', category: 'legend' },
     { key: 'chart.legend.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'legend' },
     { key: 'chart.legend.fontSize', def: 16, type: 'number', min: 10, max: 36, label: 'fontSize', category: 'legend' },
+    { key: 'chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
 
     { key: 'chart.title.show', def: true, type: 'checkbox', label: 'show', category: 'title' },
     { key: 'chart.title.text', def: 'Title', type: 'text', label: 'textContent', category: 'title' },

diff --git a/TestingArena/ArenaVueUiXyCanvas.vue b/TestingArena/ArenaVueUiXyCanvas.vue
@@ -131,6 +131,8 @@ const model = ref([
     { key: 'style.chart.legend.show', def: true, type: 'checkbox' },
     { key: 'style.chart.legend.fontSize', def: 16, type: 'number', min: 8, max: 42 },
     { key: 'style.chart.legend.bold', def: false, type: 'checkbox' },
+    { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']},
+
     { key: 'style.chart.title.text', def: 'Lorem ipsum placer', type: 'text' },
     { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color' },
     { key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 42 },

diff --git a/src/App.vue b/src/App.vue
@@ -125,7 +125,7 @@ const mapping = ref({
 })
 
 const options = computed(() => Object.keys(mapping.value));
-const selectedComponent = ref('VueUiHeatmap');
+const selectedComponent = ref('VueUiWorld');
 
 /**
  * Legacy testing arena where some non chart components can be tested

diff --git a/src/components/vue-ui-bullet.vue b/src/components/vue-ui-bullet.vue
@@ -49,6 +49,7 @@ const source = ref(null);
 const step = ref(0);
 const resizeObserver = ref(null);
 const observedEl = ref(null);
+const readyTeleport = ref(false);
 
 const isDataset = computed({
     get: () => {
@@ -178,7 +179,10 @@ function prepareChart() {
     }
 }
 
-onMounted(prepareChart);
+onMounted(() => {
+    readyTeleport.value = true;
+    prepareChart();
+});
 
 const uid = ref(createUid());
 
@@ -525,6 +529,8 @@ defineExpose({
             />
         </div>
 
+        <div :id="`legend-top-${uid}`" />
+
         <UserOptions
             ref="details"
             v-if="FINAL_CONFIG.userOptions.show && isDataset && (keepUserOptionState ? true : userOptionsVisible)"
@@ -720,22 +726,27 @@ defineExpose({
             <slot name="watermark" v-bind="{ isPrinting: isPrinting || isImaging }"/>
         </div>
 
-        <div ref="chartLegend">
-            <Legend 
-                v-if="FINAL_CONFIG.style.chart.legend.show"
-                :clickable="false"
-                :legendSet="legendSet"
-                :config="legendConfig"
-            >
-                <template #item="{ legend }">
-                    <div class="vue-ui-bullet-legend-item" dir="auto" v-if="!loading">
-                        <span style="margin-right:2px">{{ legend.name }}:</span>
-                        <span>{{ legend.value }}</span>
-                    </div>
-                </template>
-            </Legend>
-            <slot name="legend" v-bind:legend="legendSet" />
-        </div>
+        <div :id="`legend-bottom-${uid}`" />
+
+        <!-- LEGEND -->
+        <Teleport v-if="readyTeleport" :to="FINAL_CONFIG.style.chart.legend.position === 'top' ? `#legend-top-${uid}` : `#legend-bottom-${uid}`">
+            <div ref="chartLegend">
+                <Legend 
+                    v-if="FINAL_CONFIG.style.chart.legend.show"
+                    :clickable="false"
+                    :legendSet="legendSet"
+                    :config="legendConfig"
+                >
+                    <template #item="{ legend }">
+                        <div class="vue-ui-bullet-legend-item" dir="auto" v-if="!loading">
+                            <span style="margin-right:2px">{{ legend.name }}:</span>
+                            <span>{{ legend.value }}</span>
+                        </div>
+                    </template>
+                </Legend>
+                <slot name="legend" v-bind:legend="legendSet" />
+            </div>
+        </Teleport>
 
         <div v-if="$slots.source" ref="source" dir="auto">
             <slot name="source" />