diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.html
index 79b963b..c8b5d6f 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.html
@@ -298,10 +298,10 @@
     <tr>
         <td></td>
         <td>
-          <input [(ngModel)]="todo" placeholder="Add Todo" class="clr-input todo-input">
+          <input [(ngModel)]="todo" (keyup.enter)="addTodo(todo)" placeholder="Add Todo" class="clr-input todo-input">
         </td>
         <td style="text-align:right">
-            <a  routerLink="." color='primary' (click)="addTodo(todo)">
+            <a color='primary' (click)="addTodo(todo)" class="add-button">
                 <clr-icon shape="plus"></clr-icon>
             </a>
         </td>
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.ts
index bb3ac86..1866f1d 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 import { FilterService } from '../../common-filter/filter.service';
 import { Subscription } from 'rxjs';
 
@@ -39,16 +40,22 @@ export class ToDoChartComponent implements OnInit, OnChanges {
   currentDrilldownLevel: number = 0; // Current drilldown level (0 = base level)
   originalTodoList: string[] = [];
 
-  constructor(private filterService: FilterService) { }
+  constructor(
+    private dashboardService: Dashboard3Service,
+    private filterService: FilterService
+  ) { }
   
   ngOnInit(): void {
     // Subscribe to filter changes
     this.subscriptions.push(
       this.filterService.filterState$.subscribe(filters => {
         // When filters change, refresh the chart data
-        // For To Do chart, this would trigger a refresh of the todo list
+        this.fetchToDoData();
       })
     );
+    
+    // Initialize with default data
+    this.fetchToDoData();
   }
   
   ngOnChanges(changes: SimpleChanges): void {
@@ -76,7 +83,7 @@ export class ToDoChartComponent implements OnInit, OnChanges {
   
   data: any;
   todo: string;
-  todoList = ['todo 1'];
+  todoList: string[] = [];
   
   // Add properties for filter functionality
   private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
@@ -88,22 +95,107 @@ export class ToDoChartComponent implements OnInit, OnChanges {
   
   fetchToDoData(): void {
     // If we have the necessary data, fetch to-do data from the service
-    if (this.table) {
-      console.log('Fetching to-do data for:', { table: this.table });
+    if (this.table && this.xAxis) {
+      console.log('Fetching to-do data for:', { table: this.table, xAxis: this.xAxis, connection: this.connection });
       
-      // For to-do chart, we might want to fetch data differently
-      // This is a placeholder implementation - you may need to adjust based on your API
-      console.log('To-do chart would fetch data from table:', this.table);
+      // Convert baseFilters to filter parameters
+      let filterParams = '';
+      if (this.baseFilters && this.baseFilters.length > 0) {
+        const filterObj = {};
+        this.baseFilters.forEach(filter => {
+          if (filter.field && filter.value) {
+            filterObj[filter.field] = filter.value;
+          }
+        });
+        if (Object.keys(filterObj).length > 0) {
+          filterParams = JSON.stringify(filterObj);
+        }
+      }
       
-      // In a real implementation, you would connect to your service here
-      // For now, we'll just keep the default to-do list
+      // Add common filters to filter parameters
+      const commonFilters = this.filterService.getFilterValues();
+      console.log('Common filters from service:', commonFilters);
+      
+      if (Object.keys(commonFilters).length > 0) {
+        // Merge common filters with base filters
+        const mergedFilterObj = {};
+        
+        // Add base filters first
+        if (filterParams) {
+          try {
+            const baseFilterObj = JSON.parse(filterParams);
+            Object.assign(mergedFilterObj, baseFilterObj);
+          } catch (e) {
+            console.warn('Failed to parse base filter parameters:', e);
+          }
+        }
+        
+        // Add common filters using the field name as the key, not the filter id
+        Object.keys(commonFilters).forEach(filterId => {
+          const filterValue = commonFilters[filterId];
+          // Find the filter definition to get the field name
+          const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+          if (filterDef && filterDef.field) {
+            const fieldName = filterDef.field;
+            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+              mergedFilterObj[fieldName] = filterValue;
+            }
+          } else {
+            // Fallback to using filterId as field name if no field is defined
+            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+              mergedFilterObj[filterId] = filterValue;
+            }
+          }
+        });
+        
+        if (Object.keys(mergedFilterObj).length > 0) {
+          filterParams = JSON.stringify(mergedFilterObj);
+        }
+      }
+      
+      console.log('Final filter parameters:', filterParams);
+      
+      // Fetch data from the dashboard service
+      this.dashboardService.getChartData(this.table, 'todo', this.xAxis, '', this.connection, '', '', filterParams).subscribe(
+        (data: any) => {
+          console.log('Received to-do chart data:', data);
+          if (data === null) {
+            console.warn('To-do chart API returned null data. Check if the API endpoint is working correctly.');
+            this.todoList = [];
+            return;
+          }
+          
+          // Handle the actual data structure returned by the API
+          if (data && data.chartLabels) {
+            // Use chartLabels as the todo items
+            this.todoList = data.chartLabels;
+          } else if (data && data.labels) {
+            // Fallback to labels if chartLabels is not available
+            this.todoList = data.labels;
+          } else {
+            console.warn('To-do chart received data does not have expected structure', data);
+            this.todoList = [];
+          }
+        },
+        (error) => {
+          console.error('Error fetching to-do chart data:', error);
+          this.todoList = [];
+        }
+      );
     } else {
-      console.log('Missing required data for to-do chart:', { table: this.table });
+      console.log('Missing required data for to-do chart:', { table: this.table, xAxis: this.xAxis });
+      // Initialize with default data if no table is specified
+      if (this.todoList.length === 0) {
+        this.todoList = ['Sample Task 1', 'Sample Task 2', 'Sample Task 3'];
+      }
     }
   }
 
   public addTodo(todo: string) {
-    this.todoList.push(todo);
+    if (todo && todo.trim() !== '') {
+      this.todoList.push(todo.trim());
+      this.todo = ''; // Clear the input field
+    }
   }
 
   public removeTodo(todoIx: number) {
@@ -112,6 +204,37 @@ export class ToDoChartComponent implements OnInit, OnChanges {
     }
   }
   
+  // Navigate back to previous drilldown level
+  navigateBack(): void {
+    console.log('Navigating back, current stack:', this.drilldownStack);
+    console.log('Current level:', this.currentDrilldownLevel);
+    
+    if (this.drilldownStack.length > 0) {
+      // Remove the last entry from the stack
+      const removedEntry = this.drilldownStack.pop();
+      console.log('Removed entry from stack:', removedEntry);
+      
+      // Update the current drilldown level
+      this.currentDrilldownLevel = this.drilldownStack.length;
+      console.log('New level after pop:', this.currentDrilldownLevel);
+      console.log('Stack after pop:', this.drilldownStack);
+      
+      if (this.drilldownStack.length > 0) {
+        // Fetch data for the previous level
+        console.log('Fetching data for previous level');
+        this.fetchToDoData();
+      } else {
+        // Back to base level
+        console.log('Back to base level, resetting to original data');
+        this.todoList = [...this.originalTodoList];
+      }
+    } else {
+      // Already at base level, reset to original data
+      console.log('Already at base level, resetting to original data');
+      this.todoList = [...this.originalTodoList];
+    }
+  }
+  
   // Initialize filter values with proper default values based on type
   private initializeFilterValues(): void {
     console.log('Initializing filter values');
@@ -249,21 +372,21 @@ export class ToDoChartComponent implements OnInit, OnChanges {
   onBaseFilterChange(filter: any): void {
     console.log('Base filter changed:', filter);
     // Refresh data when filter changes
-    // For To Do chart, this would trigger a refresh of the todo list
+    this.fetchToDoData();
   }
 
   // Handle drilldown filter changes
   onDrilldownFilterChange(filter: any): void {
     console.log('Drilldown filter changed:', filter);
     // Refresh data when filter changes
-    // For To Do chart, this would trigger a refresh of the todo list
+    this.fetchToDoData();
   }
 
   // Handle layer filter changes
   onLayerFilterChange(filter: any): void {
     console.log('Layer filter changed:', filter);
     // Refresh data when filter changes
-    // For To Do chart, this would trigger a refresh of the todo list
+    this.fetchToDoData();
   }
 
   // Handle multiselect changes
@@ -286,21 +409,21 @@ export class ToDoChartComponent implements OnInit, OnChanges {
     }
     
     // Refresh data when filter changes
-    // For To Do chart, this would trigger a refresh of the todo list
+    this.fetchToDoData();
   }
 
   // Handle date range changes
   onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
     filter.value = dateRange;
     // Refresh data when filter changes
-    // For To Do chart, this would trigger a refresh of the todo list
+    this.fetchToDoData();
   }
 
   // Handle toggle changes
   onToggleChange(filter: any, checked: boolean): void {
     filter.value = checked;
     // Refresh data when filter changes
-    // For To Do chart, this would trigger a refresh of the todo list
+    this.fetchToDoData();
   }
 
   // Toggle multiselect dropdown visibility
@@ -419,7 +542,7 @@ export class ToDoChartComponent implements OnInit, OnChanges {
     this.openMultiselects.clear();
     
     // Refresh data
-    // For To Do chart, this would trigger a refresh of the todo list
+    this.fetchToDoData();
   }
   
   ngOnDestroy(): void {