diff --git a/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue b/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue
index 992260f9..a4a7c16a 100644
--- a/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue
+++ b/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue
@@ -41,6 +41,8 @@ const emits = defineEmits<{
 type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
 
+const chartRef = Math.random().toString(36).substring(2, 9)
+
 const index = computed(() => props.index as KeyOfT)
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
 
@@ -64,7 +66,7 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
     <VisXYContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
       <svg width="0" height="0">
         <defs>
-          <linearGradient v-for="(color, i) in colors" :id="`color-${i}`" :key="i" x1="0" y1="0" x2="0" y2="1">
+          <linearGradient v-for="(color, i) in colors" :id="`${chartRef}-color-${i}`" :key="i" x1="0" y1="0" x2="0" y2="1">
             <template v-if="showGradiant">
               <stop offset="5%" :stop-color="color" stop-opacity="0.4" />
               <stop offset="95%" :stop-color="color" stop-opacity="0" />
@@ -86,7 +88,7 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
           :curve-type="curveType"
           :attributes="{
             [Area.selectors.area]: {
-              fill: `url(#color-${i})`,
+              fill: `url(#${chartRef}-color-${i})`,
             },
           }"
           :opacity="legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1"
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue
index ea8cb522..689a2b11 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue
@@ -41,6 +41,8 @@ const emits = defineEmits<{
 type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
 
+const chartRef = Math.random().toString(36).substring(2, 9)
+
 const index = computed(() => props.index as KeyOfT)
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
 
@@ -64,7 +66,7 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
     <VisXYContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
       <svg width="0" height="0">
         <defs>
-          <linearGradient v-for="(color, i) in colors" :id="`color-${i}`" :key="i" x1="0" y1="0" x2="0" y2="1">
+          <linearGradient v-for="(color, i) in colors" :id="`${chartRef}-color-${i}`" :key="i" x1="0" y1="0" x2="0" y2="1">
             <template v-if="showGradiant">
               <stop offset="5%" :stop-color="color" stop-opacity="0.4" />
               <stop offset="95%" :stop-color="color" stop-opacity="0" />
@@ -86,7 +88,7 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
           :curve-type="curveType"
           :attributes="{
             [Area.selectors.area]: {
-              fill: `url(#color-${i})`,
+              fill: `url(#${chartRef}-color-${i})`,
             },
           }"
           :opacity="legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1"