+          
             
               Filter {{i + 1}}
-              
@@ -343,7 +343,7 @@
               
                 
               
               
@@ -353,7 +353,7 @@
               
 
               
               
-                
+                
                   
                 
               
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts
index 3412715..7b3006e 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts
@@ -142,7 +142,8 @@ export class EditnewdashComponent implements OnInit {
     drilldownXAxis: '',
     drilldownYAxis: '',
     drilldownParameter: '', // Add drilldown parameter property
-    baseFilters: [] as any[], // Add base filters
+    baseFilters: [] as any[], // Add base filters for API
+    drilldownFilters: [] as any[], // Add separate drilldown filters
     // Multi-layer drilldown configurations
     drilldownLayers: [] as any[],
   };
@@ -530,6 +531,11 @@ export class EditnewdashComponent implements OnInit {
       this.gadgetsEditdata['baseFilters'] = []; 
     }
     
+    // Initialize drilldown filters if not present
+    if (item['drilldownFilters'] === undefined) { 
+      this.gadgetsEditdata['drilldownFilters'] = []; 
+    }
+    
     // Initialize drilldown layers if not present
     if (item['drilldownLayers'] === undefined) { 
       this.gadgetsEditdata['drilldownLayers'] = []; 
@@ -550,6 +556,11 @@ export class EditnewdashComponent implements OnInit {
     // Reset drilldown column data
     this.drilldownColumnData = [];
     
+    // If drilldown is enabled and we have a drilldown API URL, fetch the drilldown column data
+    if (this.gadgetsEditdata.drilldownEnabled && this.gadgetsEditdata.drilldownApiUrl) {
+      this.refreshBaseDrilldownColumns();
+    }
+    
     if (item.datastore !== undefined || '' || null) {
       const datastore = item.datastore;
       this.getTables(datastore);
@@ -649,6 +660,7 @@ export class EditnewdashComponent implements OnInit {
         xyz.drilldownYAxis = this.gadgetsEditdata.drilldownYAxis;
         xyz.drilldownParameter = this.gadgetsEditdata.drilldownParameter;
         xyz.baseFilters = this.gadgetsEditdata.baseFilters; // Add base filters
+        xyz.drilldownFilters = this.gadgetsEditdata.drilldownFilters; // Add drilldown filters
         xyz.drilldownLayers = this.gadgetsEditdata.drilldownLayers;
         
         console.log(xyz);
@@ -693,6 +705,7 @@ export class EditnewdashComponent implements OnInit {
       drilldownYAxis: item['drilldownYAxis'],
       drilldownParameter: item['drilldownParameter'], // Add drilldown parameter
       baseFilters: item['baseFilters'] || [], // Add base filters
+      drilldownFilters: item['drilldownFilters'] || [], // Add drilldown filters
       // Multi-layer drilldown configurations
       drilldownLayers: item['drilldownLayers'] || []
     };
@@ -740,6 +753,7 @@ export class EditnewdashComponent implements OnInit {
         updatedItem.drilldownYAxis = this.gadgetsEditdata.drilldownYAxis;
         updatedItem.drilldownParameter = this.gadgetsEditdata.drilldownParameter;
         updatedItem.baseFilters = this.gadgetsEditdata.baseFilters; // Add base filters
+        updatedItem.drilldownFilters = this.gadgetsEditdata.drilldownFilters; // Add drilldown filters
         updatedItem.drilldownLayers = this.gadgetsEditdata.drilldownLayers;
         
         console.log('Updated item:', updatedItem);
@@ -973,6 +987,20 @@ export class EditnewdashComponent implements OnInit {
     this.gadgetsEditdata.baseFilters.splice(index, 1);
   }
   
+  // Add method to add a drilldown filter
+  addDrilldownFilter() {
+    const newFilter = {
+      field: '',
+      value: ''
+    };
+    this.gadgetsEditdata.drilldownFilters.push(newFilter);
+  }
+  
+  // Add method to remove a drilldown filter
+  removeDrilldownFilter(index: number) {
+    this.gadgetsEditdata.drilldownFilters.splice(index, 1);
+  }
+  
   // Add method to add a layer filter
   addLayerFilter(layerIndex: number) {
     const newFilter = {
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/bar-chart.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/bar-chart.component.ts
index ee6b1f5..aed77dc 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/bar-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/bar-chart.component.ts
@@ -30,6 +30,7 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
   @Input() drilldownYAxis: string;
   @Input() drilldownParameter: string; // Add drilldown parameter input
   @Input() baseFilters: any[] = []; // Add base filters input
+  @Input() drilldownFilters: any[] = []; // Add drilldown filters input
   // Multi-layer drilldown configuration inputs
   @Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
 
@@ -72,6 +73,7 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
     const tableChanged = changes.table && !changes.table.firstChange;
     const connectionChanged = changes.connection && !changes.connection.firstChange;
     const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
+    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.firstChange;
     // Drilldown configuration changes
     const drilldownEnabledChanged = changes.drilldownEnabled && !changes.drilldownEnabled.firstChange;
     const drilldownApiUrlChanged = changes.drilldownApiUrl && !changes.drilldownApiUrl.firstChange;
@@ -80,7 +82,7 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
     const drilldownLayersChanged = changes.drilldownLayers && !changes.drilldownLayers.firstChange;
     
     // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged ||
+    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
         drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
         drilldownLayersChanged)) {
       console.log('Chart configuration changed, fetching new data');
@@ -296,10 +298,31 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
         filterParams = JSON.stringify(filterObj);
       }
     }
+    console.log('Drilldown layer filter parameters:', filterParams);
     
-    // Fetch data from the dashboard service with parameter field and value
-    // Backend handles filtering, we just pass the parameter field and value
-    const subscription = this.dashboardService.getChartData(actualApiUrl, 'bar', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).subscribe(
+    // Convert drilldownFilters to filter parameters for drilldown level
+    let drilldownFilterParams = '';
+    if (this.drilldownFilters && this.drilldownFilters.length > 0) {
+      const filterObj = {};
+      this.drilldownFilters.forEach(filter => {
+        if (filter.field && filter.value) {
+          filterObj[filter.field] = filter.value;
+        }
+      });
+      if (Object.keys(filterObj).length > 0) {
+        drilldownFilterParams = JSON.stringify(filterObj);
+      }
+    }
+    console.log('Drilldown filter parameters:', drilldownFilterParams);
+    
+    // For drilldown level, we pass the parameter value from the drilldown stack and drilldown filters
+    const subscription = this.dashboardService.getChartData(
+      drilldownConfig.apiUrl, 'bar', 
+      this.drilldownXAxis, this.drilldownYAxis, 
+      this.connection, 
+      parameterField, parameterValue,
+      drilldownFilterParams
+    ).subscribe(
       (data: any) => {
         console.log('Received drilldown data:', data);
         if (data === null) {
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bubble-chart/bubble-chart.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bubble-chart/bubble-chart.component.ts
index 01da800..c231cea 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bubble-chart/bubble-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bubble-chart/bubble-chart.component.ts
@@ -30,6 +30,7 @@ export class BubbleChartComponent implements OnInit, OnChanges {
   @Input() drilldownYAxis: string;
   @Input() drilldownParameter: string; // Add drilldown parameter input
   @Input() baseFilters: any[] = []; // Add base filters input
+  @Input() drilldownFilters: any[] = []; // Add drilldown filters input
   // Multi-layer drilldown configuration inputs
   @Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
 
@@ -110,6 +111,7 @@ export class BubbleChartComponent implements OnInit, OnChanges {
     const tableChanged = changes.table && !changes.table.firstChange;
     const connectionChanged = changes.connection && !changes.connection.firstChange;
     const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
+    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.firstChange;
     // Drilldown configuration changes
     const drilldownEnabledChanged = changes.drilldownEnabled && !changes.drilldownEnabled.firstChange;
     const drilldownApiUrlChanged = changes.drilldownApiUrl && !changes.drilldownApiUrl.firstChange;
@@ -118,7 +120,7 @@ export class BubbleChartComponent implements OnInit, OnChanges {
     const drilldownLayersChanged = changes.drilldownLayers && !changes.drilldownLayers.firstChange;
     
     // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged ||
+    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
         drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
         drilldownLayersChanged)) {
       console.log('Chart configuration changed, fetching new data');
@@ -305,13 +307,32 @@ export class BubbleChartComponent implements OnInit, OnChanges {
       }
     }
     
+    // Convert drilldownFilters to filter parameters for drilldown level
+    let drilldownFilterParams = '';
+    if (this.drilldownFilters && this.drilldownFilters.length > 0) {
+      const filterObj = {};
+      this.drilldownFilters.forEach(filter => {
+        if (filter.field && filter.value) {
+          filterObj[filter.field] = filter.value;
+        }
+      });
+      if (Object.keys(filterObj).length > 0) {
+        drilldownFilterParams = JSON.stringify(filterObj);
+      }
+    }
+    console.log('Drilldown filter parameters:', drilldownFilterParams);
+    
+    // Use drilldown filters if available, otherwise use layer filters
+    const finalFilterParams = drilldownFilterParams || filterParams;
+    console.log('Final filter parameters:', finalFilterParams);
+    
     // Log the URL that will be called
     const url = `chart/getdashjson/bubble?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
     console.log('Drilldown data URL:', url);
     
     // Fetch data from the dashboard service with parameter field and value
     // Backend handles filtering, we just pass the parameter field and value
-    this.dashboardService.getChartData(actualApiUrl, 'bubble', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).subscribe(
+    this.dashboardService.getChartData(actualApiUrl, 'bubble', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, finalFilterParams).subscribe(
       (data: any) => {
         console.log('Received drilldown data:', data);
         if (data === null) {
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/doughnut-chart/doughnut-chart.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/doughnut-chart/doughnut-chart.component.ts
index a1e5d36..9ca6a50 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/doughnut-chart/doughnut-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/doughnut-chart/doughnut-chart.component.ts
@@ -29,6 +29,7 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
   @Input() drilldownYAxis: string;
   @Input() drilldownParameter: string; // Add drilldown parameter input
   @Input() baseFilters: any[] = []; // Add base filters input
+  @Input() drilldownFilters: any[] = []; // Add drilldown filters input
   // Multi-layer drilldown configuration inputs
   @Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
 
@@ -153,6 +154,7 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
     const tableChanged = changes.table && !changes.table.firstChange;
     const connectionChanged = changes.connection && !changes.connection.firstChange;
     const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
+    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.firstChange;
     // Drilldown configuration changes
     const drilldownEnabledChanged = changes.drilldownEnabled && !changes.drilldownEnabled.firstChange;
     const drilldownApiUrlChanged = changes.drilldownApiUrl && !changes.drilldownApiUrl.firstChange;
@@ -161,7 +163,7 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
     const drilldownLayersChanged = changes.drilldownLayers && !changes.drilldownLayers.firstChange;
     
     // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged ||
+    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
         drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
         drilldownLayersChanged)) {
       console.log('Chart configuration changed, fetching new data');
@@ -400,13 +402,32 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
       }
     }
     
+    // Convert drilldownFilters to filter parameters for drilldown level
+    let drilldownFilterParams = '';
+    if (this.drilldownFilters && this.drilldownFilters.length > 0) {
+      const filterObj = {};
+      this.drilldownFilters.forEach(filter => {
+        if (filter.field && filter.value) {
+          filterObj[filter.field] = filter.value;
+        }
+      });
+      if (Object.keys(filterObj).length > 0) {
+        drilldownFilterParams = JSON.stringify(filterObj);
+      }
+    }
+    console.log('Drilldown filter parameters:', drilldownFilterParams);
+    
+    // Use drilldown filters if available, otherwise use layer filters
+    const finalFilterParams = drilldownFilterParams || filterParams;
+    console.log('Final filter parameters:', finalFilterParams);
+    
     // Log the URL that will be called
     const url = `chart/getdashjson/doughnut?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
     console.log('Drilldown data URL:', url);
     
     // Fetch data from the dashboard service with parameter field and value
     // Backend handles filtering, we just pass the parameter field and value
-    this.dashboardService.getChartData(actualApiUrl, 'doughnut', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).subscribe(
+    this.dashboardService.getChartData(actualApiUrl, 'doughnut', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, finalFilterParams).subscribe(
       (data: any) => {
         console.log('Received drilldown data:', data);
         if (data === null) {
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/dynamic-chart/dynamic-chart.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/dynamic-chart/dynamic-chart.component.ts
index cc46f31..b567bd5 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/dynamic-chart/dynamic-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/dynamic-chart/dynamic-chart.component.ts
@@ -31,6 +31,7 @@ export class DynamicChartComponent implements OnInit, OnChanges {
   @Input() drilldownYAxis: string;
   @Input() drilldownParameter: string; // Add drilldown parameter input
   @Input() baseFilters: any[] = []; // Add base filters input
+  @Input() drilldownFilters: any[] = []; // Add drilldown filters input
   // Multi-layer drilldown configuration inputs
   @Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
 
@@ -52,6 +53,7 @@ export class DynamicChartComponent implements OnInit, OnChanges {
     const tableChanged = changes.table && !changes.table.firstChange;
     const connectionChanged = changes.connection && !changes.connection.firstChange;
     const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
+    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.firstChange;
     // Drilldown configuration changes
     const drilldownEnabledChanged = changes.drilldownEnabled && !changes.drilldownEnabled.firstChange;
     const drilldownApiUrlChanged = changes.drilldownApiUrl && !changes.drilldownApiUrl.firstChange;
@@ -60,7 +62,7 @@ export class DynamicChartComponent implements OnInit, OnChanges {
     const drilldownLayersChanged = changes.drilldownLayers && !changes.drilldownLayers.firstChange;
     
     // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged ||
+    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
         drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
         drilldownLayersChanged)) {
       console.log('Chart configuration changed, fetching new data');
@@ -296,13 +298,32 @@ export class DynamicChartComponent implements OnInit, OnChanges {
       }
     }
     
+    // Convert drilldownFilters to filter parameters for drilldown level
+    let drilldownFilterParams = '';
+    if (this.drilldownFilters && this.drilldownFilters.length > 0) {
+      const filterObj = {};
+      this.drilldownFilters.forEach(filter => {
+        if (filter.field && filter.value) {
+          filterObj[filter.field] = filter.value;
+        }
+      });
+      if (Object.keys(filterObj).length > 0) {
+        drilldownFilterParams = JSON.stringify(filterObj);
+      }
+    }
+    console.log('Drilldown filter parameters:', drilldownFilterParams);
+    
+    // Use drilldown filters if available, otherwise use layer filters
+    const finalFilterParams = drilldownFilterParams || filterParams;
+    console.log('Final filter parameters:', finalFilterParams);
+    
     // Log the URL that will be called
     const url = `chart/getdashjson/dynamic?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
     console.log('Drilldown data URL:', url);
     
     // Fetch data from the dashboard service with parameter field and value
     // Backend handles filtering, we just pass the parameter field and value
-    this.dashboardService.getChartData(actualApiUrl, 'dynamic', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).subscribe(
+    this.dashboardService.getChartData(actualApiUrl, 'dynamic', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, finalFilterParams).subscribe(
       (data: any) => {
         console.log('Received drilldown data:', data);
         if (data === null) {
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/financial-chart/financial-chart.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/financial-chart/financial-chart.component.ts
index 5e3b85b..adcbf29 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/financial-chart/financial-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/financial-chart/financial-chart.component.ts
@@ -29,6 +29,7 @@ export class FinancialChartComponent implements OnInit, OnChanges {
   @Input() drilldownYAxis: string;
   @Input() drilldownParameter: string; // Add drilldown parameter input
   @Input() baseFilters: any[] = []; // Add base filters input
+  @Input() drilldownFilters: any[] = []; // Add drilldown filters input
   // Multi-layer drilldown configuration inputs
   @Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
 
@@ -48,6 +49,7 @@ export class FinancialChartComponent implements OnInit, OnChanges {
     const tableChanged = changes.table && !changes.table.firstChange;
     const connectionChanged = changes.connection && !changes.connection.firstChange;
     const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
+    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.firstChange;
     // Drilldown configuration changes
     const drilldownEnabledChanged = changes.drilldownEnabled && !changes.drilldownEnabled.firstChange;
     const drilldownApiUrlChanged = changes.drilldownApiUrl && !changes.drilldownApiUrl.firstChange;
@@ -56,7 +58,7 @@ export class FinancialChartComponent implements OnInit, OnChanges {
     const drilldownLayersChanged = changes.drilldownLayers && !changes.drilldownLayers.firstChange;
     
     // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged ||
+    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
         drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
         drilldownLayersChanged)) {
       console.log('Chart configuration changed, fetching new data');
@@ -287,13 +289,32 @@ export class FinancialChartComponent implements OnInit, OnChanges {
       }
     }
     
+    // Convert drilldownFilters to filter parameters for drilldown level
+    let drilldownFilterParams = '';
+    if (this.drilldownFilters && this.drilldownFilters.length > 0) {
+      const filterObj = {};
+      this.drilldownFilters.forEach(filter => {
+        if (filter.field && filter.value) {
+          filterObj[filter.field] = filter.value;
+        }
+      });
+      if (Object.keys(filterObj).length > 0) {
+        drilldownFilterParams = JSON.stringify(filterObj);
+      }
+    }
+    console.log('Drilldown filter parameters:', drilldownFilterParams);
+    
+    // Use drilldown filters if available, otherwise use layer filters
+    const finalFilterParams = drilldownFilterParams || filterParams;
+    console.log('Final filter parameters:', finalFilterParams);
+    
     // Log the URL that will be called
     const url = `chart/getdashjson/financial?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
     console.log('Drilldown data URL:', url);
     
     // Fetch data from the dashboard service with parameter field and value
     // Backend handles filtering, we just pass the parameter field and value
-    this.dashboardService.getChartData(actualApiUrl, 'financial', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).subscribe(
+    this.dashboardService.getChartData(actualApiUrl, 'financial', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, finalFilterParams).subscribe(
       (data: any) => {
         console.log('Received drilldown data:', data);
         if (data === null) {
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/line-chart/line-chart.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/line-chart/line-chart.component.ts
index eba99f3..4315b6c 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/line-chart/line-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/line-chart/line-chart.component.ts
@@ -29,6 +29,7 @@ export class LineChartComponent implements OnInit, OnChanges {
   @Input() drilldownYAxis: string;
   @Input() drilldownParameter: string; // Add drilldown parameter input
   @Input() baseFilters: any[] = []; // Add base filters input
+  @Input() drilldownFilters: any[] = []; // Add drilldown filters input
   // Multi-layer drilldown configuration inputs
   @Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
 
@@ -98,6 +99,7 @@ export class LineChartComponent implements OnInit, OnChanges {
     const tableChanged = changes.table && !changes.table.firstChange;
     const connectionChanged = changes.connection && !changes.connection.firstChange;
     const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
+    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.firstChange;
     // Drilldown configuration changes
     const drilldownEnabledChanged = changes.drilldownEnabled && !changes.drilldownEnabled.firstChange;
     const drilldownApiUrlChanged = changes.drilldownApiUrl && !changes.drilldownApiUrl.firstChange;
@@ -106,7 +108,7 @@ export class LineChartComponent implements OnInit, OnChanges {
     const drilldownLayersChanged = changes.drilldownLayers && !changes.drilldownLayers.firstChange;
     
     // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged ||
+    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
         drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
         drilldownLayersChanged)) {
       console.log('Chart configuration changed, fetching new data');
@@ -311,13 +313,32 @@ export class LineChartComponent implements OnInit, OnChanges {
       }
     }
     
+    // Convert drilldownFilters to filter parameters for drilldown level
+    let drilldownFilterParams = '';
+    if (this.drilldownFilters && this.drilldownFilters.length > 0) {
+      const filterObj = {};
+      this.drilldownFilters.forEach(filter => {
+        if (filter.field && filter.value) {
+          filterObj[filter.field] = filter.value;
+        }
+      });
+      if (Object.keys(filterObj).length > 0) {
+        drilldownFilterParams = JSON.stringify(filterObj);
+      }
+    }
+    console.log('Drilldown filter parameters:', drilldownFilterParams);
+    
+    // Use drilldown filters if available, otherwise use layer filters
+    const finalFilterParams = drilldownFilterParams || filterParams;
+    console.log('Final filter parameters:', finalFilterParams);
+    
     // Log the URL that will be called
     const url = `chart/getdashjson/line?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
     console.log('Drilldown data URL:', url);
     
     // Fetch data from the dashboard service with parameter field and value
     // Backend handles filtering, we just pass the parameter field and value
-    this.dashboardService.getChartData(actualApiUrl, 'line', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).subscribe(
+    this.dashboardService.getChartData(actualApiUrl, 'line', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, finalFilterParams).subscribe(
       (data: any) => {
         console.log('Received drilldown data:', data);
         if (data === null) {
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 d102ecf..6a09c89 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
@@ -29,6 +29,7 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
   @Input() drilldownYAxis: string;
   @Input() drilldownParameter: string; // Add drilldown parameter input
   @Input() baseFilters: any[] = []; // Add base filters input
+  @Input() drilldownFilters: any[] = []; // Add drilldown filters input
   // Multi-layer drilldown configuration inputs
   @Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
 
@@ -122,6 +123,7 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
     const tableChanged = changes.table && !changes.table.firstChange;
     const connectionChanged = changes.connection && !changes.connection.firstChange;
     const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
+    const drilldownFiltersChanged = changes.drilldownFilters && !changes.drilldownFilters.firstChange;
     // Drilldown configuration changes
     const drilldownEnabledChanged = changes.drilldownEnabled && !changes.drilldownEnabled.firstChange;
     const drilldownApiUrlChanged = changes.drilldownApiUrl && !changes.drilldownApiUrl.firstChange;
@@ -130,7 +132,7 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
     const drilldownLayersChanged = changes.drilldownLayers && !changes.drilldownLayers.firstChange;
     
     // Only fetch data if the actual chart configuration changed and we're not already fetching
-    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged ||
+    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
         drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
         drilldownLayersChanged)) {
       console.log('Chart configuration changed, fetching new data');
@@ -360,13 +362,32 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
       }
     }
     
+    // Convert drilldownFilters to filter parameters for drilldown level
+    let drilldownFilterParams = '';
+    if (this.drilldownFilters && this.drilldownFilters.length > 0) {
+      const filterObj = {};
+      this.drilldownFilters.forEach(filter => {
+        if (filter.field && filter.value) {
+          filterObj[filter.field] = filter.value;
+        }
+      });
+      if (Object.keys(filterObj).length > 0) {
+        drilldownFilterParams = JSON.stringify(filterObj);
+      }
+    }
+    console.log('Drilldown filter parameters:', drilldownFilterParams);
+    
+    // Use drilldown filters if available, otherwise use layer filters
+    const finalFilterParams = drilldownFilterParams || filterParams;
+    console.log('Final filter parameters:', finalFilterParams);
+    
     // Log the URL that will be called
     const url = `chart/getdashjson/pie?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
     console.log('Drilldown data URL:', url);
     
     // Fetch data from the dashboard service with parameter field and value
     // Backend handles filtering, we just pass the parameter field and value
-    this.dashboardService.getChartData(actualApiUrl, 'pie', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).subscribe(
+    this.dashboardService.getChartData(actualApiUrl, 'pie', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, finalFilterParams).subscribe(
       (data: any) => {
         console.log('Received drilldown data:', data);
         if (data === null) {
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/polar-chart/polar-chart.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/polar-chart/polar-chart.component.html
index caac3dc..421e078 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/polar-chart/polar-chart.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/polar-chart/polar-chart.component.html
@@ -1,28 +1,10 @@
+
 
-  
-  
 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
-    Drilldown Level: {{currentDrilldownLevel}}
-    
-      Back to Level {{currentDrilldownLevel - 1}}
-    
-    
-      Back to Main View
-    
-  
-  
-  
-  
-    No data available
-  
-  
-  
-  
-    
-  
-
\ No newline at end of file
+  
+