diff --git a/resources/views/components/ib-apex-chart.blade.php b/resources/views/components/ib-apex-chart.blade.php
index 0d7d0a8..d142666 100644
--- a/resources/views/components/ib-apex-chart.blade.php
+++ b/resources/views/components/ib-apex-chart.blade.php
@@ -14,7 +14,6 @@
             'show' => false,
         ],
       ],
-      
       'colors' => ['#00E396', '#0090FF'],
       'stroke' => [
         'curve' => "smooth",
@@ -55,17 +54,16 @@
         ]
       ],
       'grid' => [
+        'strokeColor' => "#000",
         'padding' => [
             'top' => 0,
             'left' => -30,
             'right' => 0,
-            'bottom' => 15
+            'bottom' => -5
         ]
       ],
       'legend' => [
         'show' => false,
-        // 'position' => 'top',
-        // 'horizontalAlign' => 'left'
       ],
     ], $data);
     $data = json_encode($data)
@@ -94,13 +92,16 @@
                         renderCustomLegend(chartContext);
                     }
                 }
-                
+
                 var chart = new ApexCharts(document.querySelector('#chart-{{ $name }}'), this.data);
 
                 chart.render();
 
                 async function renderCustomLegend(chartContext) {
-                    var legendContainer = document.querySelector('#chart-legend');
+                    var legendContainer = document.querySelector('#chart-legend-{{ $name }}');
+
+                    if (!legendContainer) return;
+
                     legendContainer.innerHTML = ''; // Clear any existing legend items
                     
                     chartContext.w.globals.seriesNames.forEach(function (seriesName, i) {
@@ -123,13 +124,13 @@
                         legendContainer.appendChild(legendItem);
 
                         // Initial visibility state
-                        console.log(chartContext.w.globals.collapsedSeriesIndices.includes(i))
                         var isCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(i);
                         if (isCollapsed) {
                             legendItem.classList.add('opacity-50');
                         }
 
                         legendItem.addEventListener('click', function () {
+                          
                             var seriesIndex = parseInt(this.getAttribute('data-series-index'), 10);
                             var isCurrentlyCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(seriesIndex);
 
@@ -144,12 +145,19 @@
                     });
                 }
 
+                function generateRandomArray(length, min, max) {
+                  const randomArray = [];
+                  for (let i = 0; i < length; i++) {
+                    randomArray.push(Math.floor(Math.random() * (max - min + 1)) + min);
+                  }
+                  return randomArray;
+                }
+
                 function generateDayWiseTimeSeries(s, count) {
-                    var values = [[
-                        4,3,10,9,29,19,25,9,12,7,19,5,13,9,17,2,7,5
-                    ], [
-                        2,3,8,7,22,16,23,7,11,5,12,5,10,4,15,2,6,2
-                    ]];
+                    var values = [
+                      generateRandomArray(20, 2, 60), 
+                      generateRandomArray(20, 2, 60)
+                    ];
                     var i = 0;
                     var series = [];
                     var x = new Date('11 Nov 2012').getTime();
diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php
index 743ffb6..96f031d 100644
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@@ -89,7 +89,7 @@ new class extends Component {
                 <div class="flex items-center">
                     
                     <h2 class="text-xl mr-4">Performance</h2>
-                    <div id="chart-legend" class="flex space-around"></div>
+                    <div id="chart-legend-dashboard" class="flex space-around"></div>
                     
                 </div>
 
@@ -110,9 +110,9 @@ new class extends Component {
             </div>
             
             <div
-                class="relative h-[280px]"
+                class="h-[280px] mb-5"
             >
-                <x-ib-apex-chart :data="[]" name="portfolio" />
+                <x-ib-apex-chart :data="[]" name="dashboard"  />
             </div>
     
 
diff --git a/resources/views/livewire/portfolio/show.blade.php b/resources/views/livewire/portfolio/show.blade.php
index b0fdc10..d5bc84f 100644
--- a/resources/views/livewire/portfolio/show.blade.php
+++ b/resources/views/livewire/portfolio/show.blade.php
@@ -81,7 +81,7 @@ new class extends Component {
                 <div class="flex items-center">
                     
                     <h2 class="text-xl mr-4">Performance</h2>
-                    <div id="chart-legend" class="flex space-around"></div>
+                    <div id="chart-legend-portfolio-{{ $portfolio->id }}" class="flex space-around"></div>
                     
                 </div>
 
@@ -101,12 +101,12 @@ new class extends Component {
                 
             </div>
             
-            <div
-                class="relative h-[280px]"
+            {{-- <div
+                class="h-[280px]"
                 
-            >
-                <x-ib-apex-chart :data="[]" name="portfolio" />
-            </div>
+            > --}}
+                <x-ib-apex-chart :data="[]" name="portfolio-{{ $portfolio->id }}" />
+            {{-- </div> --}}
 
         </x-card>