diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartForm.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartForm.tsx
index 9dfb6f59..0a10a58d 100644
--- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartForm.tsx
+++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartForm.tsx
@@ -39,24 +39,24 @@ const ChartForm: React.FC<ChartFormProps> = ({
     ) {
       handleChange('options', {
         ...chartData.options,
-        yAxisColumn: [{ fieldName: '', label: '', color: '' }],
+        yAxisColumn: [{ fieldName: '', label: '', color: '#000000' }],
       });
     }
   }, [chartData.options.yAxisColumn]);
 
   
 
-  // useEffect(() => {
-  //   if (
-  //     !chartData.filters ||
-  //     chartData.filters.length === 0
-  //   ) {
-  //     handleChange('filters', {
-  //       ...chartData,
-  //       // filters: [{ column: '', operator: '==', value: '' }],
-  //     });
-  //   }
-  // }, [chartData.filters]);
+  useEffect(() => {
+    if (
+      !chartData.filters ||
+      chartData.filters.length === 0
+    ) {
+      handleChange('filters', {
+        ...chartData,
+        filters: [{ column: '', operator: '==', value: '' }],
+      });
+    }
+  }, [chartData.filters]);
 
   const handleYAxisColumnChange = (
     index: number,
@@ -77,7 +77,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
   const addYAxisColumn = () => {
     const newYAxisColumns = [
       ...(chartData.options.yAxisColumn ?? []),
-      { fieldName: '', label: '', color: '' },
+      { fieldName: '', label: '', color: '#000000' },
     ];
     handleChange('options', {
       ...chartData.options,
@@ -93,35 +93,37 @@ const ChartForm: React.FC<ChartFormProps> = ({
       ...chartData.options,
       yAxisColumn: newYAxisColumns,
     });
+    handleSave(chartData)
   };
 
-  // const handlefilterColumnChange = (
-  //   index: number,
-  //   field: string,
-  //   value: any
-  // ) => {
-  //   const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
-  //   const newFiltersColumns = [...currentFilters];
-  //   newFiltersColumns[index] = {
-  //     ...newFiltersColumns[index],
-  //     [field]: value,
-  //   };
-  //   handleChange('filters', newFiltersColumns); // Changed this line
-  // };
-  // const addFilterColumn = () => {
-  //   const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
-  //   const newFiltersColumns = [
-  //     ...currentFilters,
-  //     { column: '', operator: '==', value: '' },
-  //   ];
-  //   handleChange('filters', newFiltersColumns);
-  // };
+  const handlefilterColumnChange = (
+    index: number,
+    field: string,
+    value: any
+  ) => {
+    const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
+    const newFiltersColumns = [...currentFilters];
+    newFiltersColumns[index] = {
+      ...newFiltersColumns[index],
+      [field]: value,
+    };
+    handleChange('filters', newFiltersColumns); // Changed this line
+  };
+  const addFilterColumn = () => {
+    const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
+    const newFiltersColumns = [
+      ...currentFilters,
+      { column: '', operator: '==', value: '' },
+    ];
+    handleChange('filters', newFiltersColumns);
+  };
 
-  // const removeFilterColumn = (index: number) => {
-  //   const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
-  //   const newFiltersColumns = currentFilters.filter((_, i) => i !== index);
-  //   handleChange('filters', newFiltersColumns);
-  // };
+  const removeFilterColumn = (index: number) => {
+    const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : [];
+    const newFiltersColumns = currentFilters.filter((_, i) => i !== index);
+    handleChange('filters', newFiltersColumns);
+    handleSave(chartData)
+  };
   const updateChartData = (field: string, value: any) => {
     if (field === 'type') {
       const newData = {
@@ -132,7 +134,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
           yAxisColumn:
             chartData.options.yAxisColumn.length > 0
               ? chartData.options.yAxisColumn
-              : [{ fieldName: '', label: '', color: '' }],
+              : [{ fieldName: '', label: '', color: '#000000' }],
         },
       };
       handleChange(field, value);
@@ -197,7 +199,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
             { label: 'Sum', value: 'SUM' },
             { label: 'Average', value: 'AVERAGE' },
             { label: 'Count', value: 'COUNT' },
-          ]}
+          ]}  
           label="Aggregate"
           value={chartData.options.aggregateType}
           defaultValue="SUM"
@@ -380,7 +382,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
         </>
       )}
 
-      {/* <div className="flex flex-row flex-wrap justify-between  gap-4">
+      <div className="flex flex-row flex-wrap justify-between  gap-4">
         <div className="flex flex-col gap-4 ">
         {Array.isArray(chartData?.filters) && chartData?.filters?.map((column, index) => (
             <div
@@ -430,7 +432,7 @@ const ChartForm: React.FC<ChartFormProps> = ({
                 }}
                 onBlur={() => handleSave(chartData)}
               />
-              { index > 0 && (
+              {(
                 <Button onClick={() => removeFilterColumn(index)}>
                   Remove
                 </Button>
@@ -438,12 +440,12 @@ const ChartForm: React.FC<ChartFormProps> = ({
             </div>
           ))}
         </div>
-        { (
+        {(
           <Button className="mt-4 h-fit w-fit" onClick={addFilterColumn}>
             Add Filter Column
           </Button>
         )}
-      </div> */}
+      </div> 
     </div>
   );
 };
diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartsVisualize.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartsVisualize.tsx
index f3e0a6b7..566aa4a5 100644
--- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartsVisualize.tsx
+++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartsVisualize.tsx
@@ -46,7 +46,7 @@ interface ChartOptions {
 interface ChartData {
   chartId: string;
   description: string;
-  // filters: any[];
+  filters: any[];
   name: string;
   options: ChartOptions;
   resource: string;
@@ -57,7 +57,7 @@ interface ChartData {
 interface ResourceChartInput {
   chartId: string;
   description: string;
-  // filters: ChartFilters[];
+  filters: ChartFilters[];
   name: string;
   options: ChartOptions;
   resource: string;
@@ -148,7 +148,12 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
         chartsListRefetch();
       },
       onError: (err: any) => {
-        toast(`Received ${err} while deleting chart `);
+        toast(`Received ${err} while deleting chart `,{
+          action:{
+            label:'undo',
+            onClick: ()=>{}
+          }
+        });
       },
     }
   );
@@ -157,20 +162,20 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
   const [chartData, setChartData] = useState<ChartData>({
     chartId: '',
     description: '',
-    // filters: [
-    //   {
-    //     column: '',
-    //     operator: '==',
-    //     value: '',
-    //   },
-    // ],
+    filters: [
+      {
+        column: '',
+        operator: '==',
+        value: '',
+      },
+    ],
     name: '',
     options: {
       aggregateType: 'SUM',
       showLegend: true,
       xAxisColumn: '',
       xAxisLabel: '',
-      yAxisColumn: [{ fieldName: '', label: '', color: '' }],
+      yAxisColumn: [{ fieldName: '', label: '', color: '#000000' }],
       yAxisLabel: '',
       regionColumn: '',
       valueColumn: '',
@@ -220,14 +225,14 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
     const updatedData: ChartData = {
       chartId: resourceChart.id,
       description: resourceChart.description || '',
-      // filters:
-      //   resourceChart.filters?.length > 0
-      //     ? resourceChart.filters.map((filter: any) => ({
-      //         column: filter.column,
-      //         operator: filter.operator,
-      //         value: filter.value,
-      //       }))
-      //     : [{ column: '', operator: '==', value: '' }],
+      filters:
+        resourceChart.filters?.length > 0
+          ? resourceChart.filters.map((filter: any) => ({
+              column: filter.column.id,
+              operator: filter.operator,
+              value: filter.value,
+            }))
+          : [{ column: '', operator: '==', value: '' }],
       name: resourceChart.name || '',
       options: {
         aggregateType: resourceChart?.options?.aggregateType,
@@ -330,7 +335,11 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
         refetch();
       },
       onError: (err: any) => {
-        toast(`Received ${err} during resource chart saving`);
+        toast(`Received ${err} during resource chart saving`,{
+          action:{
+            label:'undo',
+            onClick: ()=>{}
+          }});
       },
     }
   );
@@ -346,7 +355,7 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
         const chartInput: ResourceChartInput = {
           chartId: updatedData.chartId,
           description: updatedData.description,
-          // filters: updatedData.filters,
+          filters: updatedData.filters,
           name: updatedData.name,
           options: {
             ...updatedData.options,
@@ -379,10 +388,10 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
         setPreviousChartData({
           ...updatedData,
           type: currentType, // Ensure previousChartData also has correct type
-          // filters:
-          //   updatedData.filters?.length > 0
-          //     ? updatedData.filters
-          //     : [{ column: '', operator: '==', value: '' }],
+          filters:
+            updatedData.filters?.length > 0
+              ? updatedData.filters
+              : [{ column: '', operator: '==', value: '' }],
         });
       }
     },
diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts
index 2d7e4c35..5c8ec9ec 100644
--- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts
+++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts
@@ -38,7 +38,10 @@ export const getResourceChartDetails = graphql(`
       }
       chart
       filters {
-        column
+        column {
+          id
+          fieldName
+        }
         operator
         value
       }
@@ -86,10 +89,13 @@ export const createChart = graphql(`
         }
         name
         filters {
-        column
-        operator
-        value
-      }
+          column {
+            id
+            fieldName
+          }
+          operator
+          value
+        }
         options {
           aggregateType
           xAxisColumn {
diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts
index 4784c61c..9f84dc8e 100644
--- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts
+++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts
@@ -28,7 +28,7 @@ export interface ChartOptions {
 export interface ChartData {
   chartId: string;
   description: string;
-  // filters: any[];
+  filters: any[];
   name: string;
   options: ChartOptions;
   resource: string;