diff --git a/src/components/core/lume-chart/lume-chart.vue b/src/components/core/lume-chart/lume-chart.vue
index acd220c6..eafb8216 100644
--- a/src/components/core/lume-chart/lume-chart.vue
+++ b/src/components/core/lume-chart/lume-chart.vue
@@ -40,7 +40,7 @@
           <vue-portal
             v-if="allOptions.withLegend !== false"
             :disabled="allOptions.legendPosition !== 'bottom'"
-            to="legend-bottom"
+            :to="`legend-bottom-${chartID}`"
             slim
           >
             <lume-chart-legend
@@ -146,7 +146,7 @@
 
       <!-- bottom chart legend -->
       <vue-portal-target
-        name="legend-bottom"
+        :name="`legend-bottom-${chartID}`"
         slim
       />
     </template>
@@ -239,13 +239,8 @@ export default defineComponent({
 
     const { allOptions } = useOptions<ChartOptions>(options);
 
-    const { internalData, computedLabels, containerSize, updateSize } = useBase(
-      data,
-      labels,
-      color,
-      allOptions,
-      orientation
-    );
+    const { internalData, computedLabels, containerSize, updateSize, chartID } =
+      useBase(data, labels, color, allOptions, orientation);
 
     const { xScale, yScale } = useBaseScales(
       internalData,
@@ -395,6 +390,7 @@ export default defineComponent({
       updateSize,
       xAxisTitle,
       yAxisTitle,
+      chartID,
     };
   },
 });