diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.html
index 5fa8fc6..0e9c001 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.html
@@ -281,7 +281,7 @@
   
   <div class="chart-wrapper">
     <!-- Show loading indicator -->
-    <div class="loading-indicator" *ngIf="pieChartLabels.length === 0 && pieChartData.length === 0 && !noDataAvailable">
+    <div class="loading-indicator" *ngIf="pieChartLabels.length === 0 && pieChartData.length === 0 && !noDataAvailable && !isFetchingData">
       <div class="spinner"></div>
       <p>Loading chart data...</p>
     </div>
@@ -291,15 +291,15 @@
       <p>No chart data available</p>
     </div>
     
-    <!-- Show chart when data is available -->
+    <!-- Show chart when data is available or show default data -->
     <canvas baseChart 
-      *ngIf="pieChartLabels.length > 0 && pieChartData.length > 0"
-      [data]="pieChartData" 
+      [datasets]="pieChartDatasets" 
       [labels]="pieChartLabels" 
       [type]="pieChartType"
       [options]="pieChartOptions"
       (chartHover)="chartHovered($event)"
-      (chartClick)="chartClicked($event)">
+      (chartClick)="chartClicked($event)"
+      [style.display]="shouldShowChart() ? 'block' : 'none'">
     </canvas>
   </div>
   <div class="chart-legend" *ngIf="showlabel && pieChartLabels && pieChartLabels.length > 0">
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.ts
index 4b735de..eabb63c 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.ts
@@ -37,6 +37,12 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
 
   public pieChartLabels: string[] = ['Category A', 'Category B', 'Category C'];
   public pieChartData: number[] = [30, 50, 20];
+  public pieChartDatasets: any[] = [
+    {
+      data: [30, 50, 20],
+      label: 'Dataset 1'
+    }
+  ];
   public pieChartType: string = 'pie';
   public pieChartOptions: any = {
     responsive: true,
@@ -96,7 +102,7 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
   noDataAvailable: boolean = false;
   
   // Flag to prevent infinite loops
-  private isFetchingData: boolean = false;
+   isFetchingData: boolean = false;
   
   // Subscriptions to unsubscribe on destroy
   private subscriptions: Subscription[] = [];
@@ -132,7 +138,17 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
     console.log('PieChartComponent initialized with default data:', { labels: this.pieChartLabels, data: this.pieChartData });
     // Validate initial data
     this.validateChartData();
-    this.fetchChartData();
+    // Initialize datasets with default data
+    this.pieChartDatasets = [
+      {
+        data: this.pieChartData,
+        label: 'Dataset 1'
+      }
+    ];
+    // Only fetch data if we have the required inputs, otherwise show default data
+    if (this.table && this.xAxis && this.yAxis) {
+      this.fetchChartData();
+    }
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -165,6 +181,12 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
       console.log('Chart configuration changed, fetching new data');
       this.fetchChartData();
     }
+    
+    // If we have the required inputs and haven't fetched data yet, fetch it
+    if ((xAxisChanged || yAxisChanged || tableChanged) && this.table && this.xAxis && this.yAxis && !this.isFetchingData) {
+      console.log('Required inputs available, fetching data');
+      this.fetchChartData();
+    }
   }
 
   ngOnDestroy(): void {
@@ -576,8 +598,6 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
           if (data === null) {
             console.warn('API returned null data. Check if the API endpoint is working correctly.');
             this.noDataAvailable = true;
-            this.pieChartLabels = [];
-            this.pieChartData = [];
             // Reset flag after fetching
             this.isFetchingData = false;
             return;
@@ -588,9 +608,24 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
             // Backend has already filtered the data, just display it
             this.noDataAvailable = data.chartLabels.length === 0;
             this.pieChartLabels = data.chartLabels;
-            this.pieChartData = data.chartData;
+            
+            // Extract the actual data values from the chartData array
+            // chartData is an array with one object containing the data
+            if (data.chartData.length > 0 && data.chartData[0].data) {
+              this.pieChartData = data.chartData[0].data;
+            } else {
+              this.pieChartData = [];
+            }
+            
             // Trigger change detection
+            this.pieChartLabels = [...this.pieChartLabels];
             this.pieChartData = [...this.pieChartData];
+            this.pieChartDatasets = [
+              {
+                data: this.pieChartData,
+                label: 'Dataset 1'
+              }
+            ];
             console.log('Updated pie chart with data:', { labels: this.pieChartLabels, data: this.pieChartData });
           } else if (data && data.labels && data.datasets) {
             // Backend has already filtered the data, just display it
@@ -598,13 +633,29 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
             this.pieChartLabels = data.labels;
             this.pieChartData = data.datasets[0]?.data || [];
             // Trigger change detection
+            this.pieChartLabels = [...this.pieChartLabels];
             this.pieChartData = [...this.pieChartData];
+            this.pieChartDatasets = [
+              {
+                data: this.pieChartData,
+                label: 'Dataset 1'
+              }
+            ];
             console.log('Updated pie chart with legacy data format:', { labels: this.pieChartLabels, data: this.pieChartData });
           } else {
             console.warn('Received data does not have expected structure', data);
             this.noDataAvailable = true;
-            this.pieChartLabels = [];
-            this.pieChartData = [];
+            // Keep default data if no data is available
+            if (this.pieChartLabels.length === 0 && this.pieChartData.length === 0) {
+              this.pieChartLabels = ['Category A', 'Category B', 'Category C'];
+              this.pieChartData = [30, 50, 20];
+              this.pieChartDatasets = [
+                {
+                  data: this.pieChartData,
+                  label: 'Dataset 1'
+                }
+              ];
+            }
           }
           // Reset flag after fetching
           this.isFetchingData = false;
@@ -612,18 +663,13 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
         (error) => {
           console.error('Error fetching pie chart data:', error);
           this.noDataAvailable = true;
-          this.pieChartLabels = [];
-          this.pieChartData = [];
           // Reset flag after fetching
           this.isFetchingData = false;
-          // Keep default data in case of error
         }
       );
     } else {
       console.log('Missing required data for chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
       this.noDataAvailable = true;
-      this.pieChartLabels = [];
-      this.pieChartData = [];
       // Reset flag after fetching
       this.isFetchingData = false;
     }
@@ -652,8 +698,6 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
       } else {
         console.warn('Invalid drilldown layer index:', layerIndex);
         this.noDataAvailable = true;
-        this.pieChartLabels = [];
-        this.pieChartData = [];
         return;
       }
     }
@@ -664,8 +708,6 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
     if (!drilldownConfig || !drilldownConfig.apiUrl || !drilldownConfig.xAxis || !drilldownConfig.yAxis) {
       console.warn('Missing drilldown configuration for level:', this.currentDrilldownLevel);
       this.noDataAvailable = true;
-      this.pieChartLabels = [];
-      this.pieChartData = [];
       return;
     }
     
@@ -762,8 +804,6 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
         if (data === null) {
           console.warn('Drilldown API returned null data. Check if the API endpoint is working correctly.');
           this.noDataAvailable = true;
-          this.pieChartLabels = [];
-          this.pieChartData = [];
           return;
         }
         
@@ -772,9 +812,24 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
           // Backend has already filtered the data, just display it
           this.noDataAvailable = data.chartLabels.length === 0;
           this.pieChartLabels = data.chartLabels;
-          this.pieChartData = data.chartData;
+          
+          // Extract the actual data values from the chartData array
+          // chartData is an array with one object containing the data
+          if (data.chartData.length > 0 && data.chartData[0].data) {
+            this.pieChartData = data.chartData[0].data;
+          } else {
+            this.pieChartData = [];
+          }
+          
           // Trigger change detection
+          this.pieChartLabels = [...this.pieChartLabels];
           this.pieChartData = [...this.pieChartData];
+          this.pieChartDatasets = [
+            {
+              data: this.pieChartData,
+              label: 'Dataset 1'
+            }
+          ];
           console.log('Updated pie chart with drilldown data:', { labels: this.pieChartLabels, data: this.pieChartData });
         } else if (data && data.labels && data.datasets) {
           // Backend has already filtered the data, just display it
@@ -782,21 +837,24 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
           this.pieChartLabels = data.labels;
           this.pieChartData = data.datasets[0]?.data || [];
           // Trigger change detection
+          this.pieChartLabels = [...this.pieChartLabels];
           this.pieChartData = [...this.pieChartData];
+          this.pieChartDatasets = [
+            {
+              data: this.pieChartData,
+              label: 'Dataset 1'
+            }
+          ];
           console.log('Updated pie chart with drilldown legacy data format:', { labels: this.pieChartLabels, data: this.pieChartData });
         } else {
           console.warn('Drilldown received data does not have expected structure', data);
           this.noDataAvailable = true;
-          this.pieChartLabels = [];
-          this.pieChartData = [];
+          // Keep current data if no data is available
         }
       },
       (error) => {
         console.error('Error fetching drilldown data:', error);
         this.noDataAvailable = true;
-        this.pieChartLabels = [];
-        this.pieChartData = [];
-        // Keep current data in case of error
       }
     );
   }
@@ -884,6 +942,26 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
   getLegendColor(index: number): string {
     return this.chartColors[index % this.chartColors.length];
   }
+  
+  // Method to determine if chart should be displayed
+  shouldShowChart(): boolean {
+    // Show chart if we have data
+    if (this.pieChartLabels.length > 0 && this.pieChartData.length > 0) {
+      return true;
+    }
+    
+    // Show chart if we're still fetching data
+    if (this.isFetchingData) {
+      return true;
+    }
+    
+    // Show chart if we have default data
+    if (this.pieChartLabels.length > 0 && this.originalPieChartLabels.length > 0) {
+      return true;
+    }
+    
+    return false;
+  }
 
   // events
   public chartClicked(e: any): void {
@@ -977,4 +1055,4 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, O
   ngAfterViewChecked(): void {
     // This lifecycle hook can be used if needed for post-render operations
   }
-}
\ No newline at end of file
+}    
\ No newline at end of file