diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.html
index e69de29..d7b3c4a 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.html
@@ -0,0 +1,33 @@
+<div class="chart-template-form">
+  <form clrForm (ngSubmit)="onSubmit()" #chartTemplateForm="ngForm">
+    <clr-input-container>
+      <label>Template Name <span class="required">*</span></label>
+      <input clrInput type="text" [(ngModel)]="chartTemplate.templateName" name="templateName" required />
+    </clr-input-container>
+    
+    <clr-textarea-container>
+      <label>HTML Template</label>
+      <textarea clrTextarea [(ngModel)]="chartTemplate.templateHtml" name="templateHtml" rows="5" placeholder="<div class='chart-container'>...</div>"></textarea>
+    </clr-textarea-container>
+    
+    <clr-textarea-container>
+      <label>CSS Template</label>
+      <textarea clrTextarea [(ngModel)]="chartTemplate.templateCss" name="templateCss" rows="5" placeholder=".chart-container { ... }"></textarea>
+    </clr-textarea-container>
+    
+    <clr-checkbox-container>
+      <label>Is Default</label>
+      <clr-checkbox-wrapper>
+        <input type="checkbox" clrCheckbox [(ngModel)]="chartTemplate.isDefault" name="isDefault" />
+        <label>Default Template</label>
+      </clr-checkbox-wrapper>
+    </clr-checkbox-container>
+    
+    <div class="form-actions">
+      <button class="btn btn-primary" type="submit" [disabled]="!chartTemplate.templateName">
+        {{ isEdit ? 'Update' : 'Save' }}
+      </button>
+      <button class="btn" type="button" (click)="onCancel()">Cancel</button>
+    </div>
+  </form>
+</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.scss
index e69de29..d58ef48 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.scss
@@ -0,0 +1,17 @@
+.chart-template-form {
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.form-actions {
+  margin-top: 20px;
+  display: flex;
+  gap: 10px;
+}
+
+textarea {
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.ts
index e69de29..b488f33 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-template-form.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ChartTemplate } from '../chart-config-manager.component';
+
+@Component({
+  selector: 'app-chart-template-form',
+  templateUrl: './chart-template-form.component.html',
+  styleUrls: ['./chart-template-form.component.scss']
+})
+export class ChartTemplateFormComponent {
+  @Input() chartTemplate: Partial<ChartTemplate> = {};
+  @Input() isEdit = false;
+  @Output() save = new EventEmitter<Partial<ChartTemplate>>();
+  @Output() cancel = new EventEmitter<void>();
+
+  onSubmit(): void {
+    this.save.emit(this.chartTemplate);
+  }
+
+  onCancel(): void {
+    this.cancel.emit();
+  }
+}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.html
index e69de29..cad41f7 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.html
@@ -0,0 +1,33 @@
+<div class="chart-type-form">
+  <form clrForm (ngSubmit)="onSubmit()" #chartTypeForm="ngForm">
+    <clr-input-container>
+      <label>Name <span class="required">*</span></label>
+      <input clrInput type="text" [(ngModel)]="chartType.name" name="chartTypeName" required />
+    </clr-input-container>
+    
+    <clr-input-container>
+      <label>Display Name</label>
+      <input clrInput type="text" [(ngModel)]="chartType.displayName" name="chartTypeDisplayName" />
+    </clr-input-container>
+    
+    <clr-textarea-container>
+      <label>Description</label>
+      <textarea clrTextarea [(ngModel)]="chartType.description" name="chartTypeDescription" rows="3"></textarea>
+    </clr-textarea-container>
+    
+    <clr-checkbox-container>
+      <label>Is Active</label>
+      <clr-checkbox-wrapper>
+        <input type="checkbox" clrCheckbox [(ngModel)]="chartType.isActive" name="chartTypeIsActive" />
+        <label>Active</label>
+      </clr-checkbox-wrapper>
+    </clr-checkbox-container>
+    
+    <div class="form-actions">
+      <button class="btn btn-primary" type="submit" [disabled]="!chartType.name">
+        {{ isEdit ? 'Update' : 'Save' }}
+      </button>
+      <button class="btn" type="button" (click)="onCancel()">Cancel</button>
+    </div>
+  </form>
+</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.scss
index e69de29..2262bef 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.scss
@@ -0,0 +1,12 @@
+.chart-type-form {
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.form-actions {
+  margin-top: 20px;
+  display: flex;
+  gap: 10px;
+}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.ts
index e69de29..9873aba 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/chart-type-form.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ChartType } from '../chart-config-manager.component';
+
+@Component({
+  selector: 'app-chart-type-form',
+  templateUrl: './chart-type-form.component.html',
+  styleUrls: ['./chart-type-form.component.scss']
+})
+export class ChartTypeFormComponent {
+  @Input() chartType: Partial<ChartType> = {};
+  @Input() isEdit = false;
+  @Output() save = new EventEmitter<Partial<ChartType>>();
+  @Output() cancel = new EventEmitter<void>();
+
+  onSubmit(): void {
+    this.save.emit(this.chartType);
+  }
+
+  onCancel(): void {
+    this.cancel.emit();
+  }
+}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.html
index e69de29..28ec0d6 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.html
@@ -0,0 +1,28 @@
+<div class="component-property-form">
+  <form clrForm (ngSubmit)="onSubmit()" #componentPropertyForm="ngForm">
+    <clr-input-container>
+      <label>Property Name <span class="required">*</span></label>
+      <input clrInput type="text" [(ngModel)]="componentProperty.propertyName" name="propertyName" required />
+    </clr-input-container>
+    
+    <clr-input-container>
+      <label>Property Value</label>
+      <input clrInput type="text" [(ngModel)]="componentProperty.propertyValue" name="propertyValue" />
+    </clr-input-container>
+    
+    <clr-select-container>
+      <label>Property Type</label>
+      <select clrSelect [(ngModel)]="componentProperty.propertyType" name="propertyType">
+        <option value="">Select a type</option>
+        <option *ngFor="let type of propertyTypes" [value]="type">{{ type | titlecase }}</option>
+      </select>
+    </clr-select-container>
+    
+    <div class="form-actions">
+      <button class="btn btn-primary" type="submit" [disabled]="!componentProperty.propertyName">
+        {{ isEdit ? 'Update' : 'Save' }}
+      </button>
+      <button class="btn" type="button" (click)="onCancel()">Cancel</button>
+    </div>
+  </form>
+</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.scss
index e69de29..fa1b5ff 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.scss
@@ -0,0 +1,12 @@
+.component-property-form {
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.form-actions {
+  margin-top: 20px;
+  display: flex;
+  gap: 10px;
+}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.ts
index e69de29..84e135f 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/component-property-form.component.ts
@@ -0,0 +1,31 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ComponentProperty } from '../chart-config-manager.component';
+
+@Component({
+  selector: 'app-component-property-form',
+  templateUrl: './component-property-form.component.html',
+  styleUrls: ['./component-property-form.component.scss']
+})
+export class ComponentPropertyFormComponent {
+  @Input() componentProperty: Partial<ComponentProperty> = {};
+  @Input() isEdit = false;
+  @Output() save = new EventEmitter<Partial<ComponentProperty>>();
+  @Output() cancel = new EventEmitter<void>();
+
+  propertyTypes = [
+    'string',
+    'number',
+    'boolean',
+    'array',
+    'object',
+    'function'
+  ];
+
+  onSubmit(): void {
+    this.save.emit(this.componentProperty);
+  }
+
+  onCancel(): void {
+    this.cancel.emit();
+  }
+}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.html
index e69de29..4601665 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.html
@@ -0,0 +1,54 @@
+<div class="dynamic-field-form">
+  <form clrForm (ngSubmit)="onSubmit()" #dynamicFieldForm="ngForm">
+    <clr-input-container>
+      <label>Field Name <span class="required">*</span></label>
+      <input clrInput type="text" [(ngModel)]="dynamicField.fieldName" name="fieldName" required />
+    </clr-input-container>
+    
+    <clr-input-container>
+      <label>Field Label</label>
+      <input clrInput type="text" [(ngModel)]="dynamicField.fieldLabel" name="fieldLabel" />
+    </clr-input-container>
+    
+    <clr-select-container>
+      <label>Field Type</label>
+      <select clrSelect [(ngModel)]="dynamicField.fieldType" name="fieldType">
+        <option value="">Select a type</option>
+        <option *ngFor="let type of fieldTypes" [value]="type">{{ type | titlecase }}</option>
+      </select>
+    </clr-select-container>
+    
+    <clr-textarea-container>
+      <label>Field Options (JSON format)</label>
+      <textarea clrTextarea [(ngModel)]="dynamicField.fieldOptions" name="fieldOptions" rows="3" placeholder='{"option1": "Option 1", "option2": "Option 2"}'></textarea>
+    </clr-textarea-container>
+    
+    <clr-input-container>
+      <label>Sort Order</label>
+      <input clrInput type="number" [(ngModel)]="dynamicField.sortOrder" name="fieldSortOrder" />
+    </clr-input-container>
+    
+    <clr-checkbox-container>
+      <label>Is Required</label>
+      <clr-checkbox-wrapper>
+        <input type="checkbox" clrCheckbox [(ngModel)]="dynamicField.isRequired" name="fieldIsRequired" />
+        <label>Required</label>
+      </clr-checkbox-wrapper>
+    </clr-checkbox-container>
+    
+    <clr-checkbox-container>
+      <label>Show in UI</label>
+      <clr-checkbox-wrapper>
+        <input type="checkbox" clrCheckbox [(ngModel)]="dynamicField.showInUi" name="fieldShowInUi" />
+        <label>Show in UI</label>
+      </clr-checkbox-wrapper>
+    </clr-checkbox-container>
+    
+    <div class="form-actions">
+      <button class="btn btn-primary" type="submit" [disabled]="!dynamicField.fieldName">
+        {{ isEdit ? 'Update' : 'Save' }}
+      </button>
+      <button class="btn" type="button" (click)="onCancel()">Cancel</button>
+    </div>
+  </form>
+</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.scss
index e69de29..7034d94 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.scss
@@ -0,0 +1,17 @@
+.dynamic-field-form {
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.form-actions {
+  margin-top: 20px;
+  display: flex;
+  gap: 10px;
+}
+
+textarea {
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.ts
index e69de29..e5b43fe 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/dynamic-field-form.component.ts
@@ -0,0 +1,34 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { DynamicField } from '../chart-config-manager.component';
+
+@Component({
+  selector: 'app-dynamic-field-form',
+  templateUrl: './dynamic-field-form.component.html',
+  styleUrls: ['./dynamic-field-form.component.scss']
+})
+export class DynamicFieldFormComponent {
+  @Input() dynamicField: Partial<DynamicField> = {};
+  @Input() isEdit = false;
+  @Output() save = new EventEmitter<Partial<DynamicField>>();
+  @Output() cancel = new EventEmitter<void>();
+
+  fieldTypes = [
+    'text',
+    'number',
+    'email',
+    'password',
+    'date',
+    'select',
+    'checkbox',
+    'radio',
+    'textarea'
+  ];
+
+  onSubmit(): void {
+    this.save.emit(this.dynamicField);
+  }
+
+  onCancel(): void {
+    this.cancel.emit();
+  }
+}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.html
index e69de29..fbc9bed 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.html
@@ -0,0 +1,46 @@
+<div class="ui-component-form">
+  <form clrForm (ngSubmit)="onSubmit()" #uiComponentForm="ngForm">
+    <clr-input-container>
+      <label>Component Name <span class="required">*</span></label>
+      <input clrInput type="text" [(ngModel)]="uiComponent.componentName" name="componentName" required />
+    </clr-input-container>
+    
+    <clr-select-container>
+      <label>Component Type</label>
+      <select clrSelect [(ngModel)]="uiComponent.componentType" name="componentType">
+        <option value="">Select a type</option>
+        <option *ngFor="let type of componentTypes" [value]="type">{{ type | titlecase }}</option>
+      </select>
+    </clr-select-container>
+    
+    <clr-input-container>
+      <label>Display Label</label>
+      <input clrInput type="text" [(ngModel)]="uiComponent.displayLabel" name="displayLabel" />
+    </clr-input-container>
+    
+    <clr-input-container>
+      <label>Placeholder</label>
+      <input clrInput type="text" [(ngModel)]="uiComponent.placeholder" name="placeholder" />
+    </clr-input-container>
+    
+    <clr-input-container>
+      <label>Sort Order</label>
+      <input clrInput type="number" [(ngModel)]="uiComponent.sortOrder" name="sortOrder" />
+    </clr-input-container>
+    
+    <clr-checkbox-container>
+      <label>Is Required</label>
+      <clr-checkbox-wrapper>
+        <input type="checkbox" clrCheckbox [(ngModel)]="uiComponent.isRequired" name="isRequired" />
+        <label>Required</label>
+      </clr-checkbox-wrapper>
+    </clr-checkbox-container>
+    
+    <div class="form-actions">
+      <button class="btn btn-primary" type="submit" [disabled]="!uiComponent.componentName">
+        {{ isEdit ? 'Update' : 'Save' }}
+      </button>
+      <button class="btn" type="button" (click)="onCancel()">Cancel</button>
+    </div>
+  </form>
+</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.scss
index e69de29..8cad11e 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.scss
@@ -0,0 +1,12 @@
+.ui-component-form {
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.form-actions {
+  margin-top: 20px;
+  display: flex;
+  gap: 10px;
+}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.ts
index e69de29..edf7eff 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/forms/ui-component-form.component.ts
@@ -0,0 +1,33 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { UiComponent } from '../chart-config-manager.component';
+
+@Component({
+  selector: 'app-ui-component-form',
+  templateUrl: './ui-component-form.component.html',
+  styleUrls: ['./ui-component-form.component.scss']
+})
+export class UiComponentFormComponent {
+  @Input() uiComponent: Partial<UiComponent> = {};
+  @Input() isEdit = false;
+  @Output() save = new EventEmitter<Partial<UiComponent>>();
+  @Output() cancel = new EventEmitter<void>();
+
+  componentTypes = [
+    'input',
+    'select',
+    'checkbox',
+    'radio',
+    'textarea',
+    'datepicker',
+    'slider',
+    'toggle'
+  ];
+
+  onSubmit(): void {
+    this.save.emit(this.uiComponent);
+  }
+
+  onCancel(): void {
+    this.cancel.emit();
+  }
+}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.html
index e69de29..80d72c0 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.html
@@ -0,0 +1,4 @@
+<div class="chart-config-modal">
+  <h3>Chart Configuration Manager</h3>
+  <app-chart-config-manager></app-chart-config-manager>
+</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.scss
index e69de29..74955f7 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.scss
@@ -0,0 +1,5 @@
+.chart-config-modal {
+  padding: 20px;
+  max-height: 80vh;
+  overflow-y: auto;
+}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.ts
index e69de29..ef2819b 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/chart-config-modal.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-chart-config-modal',
+  templateUrl: './chart-config-modal.component.html',
+  styleUrls: ['./chart-config-modal.component.scss']
+})
+export class ChartConfigModalComponent {
+  // This component will be used to display the chart configuration manager in a modal
+}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html
index e8896ac..8ab587f 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html
@@ -11,6 +11,9 @@
   <button class="btn btn-primary" (click)="openCommonFilterModal()" style="margin-left: 10px;" *ngIf="!fromRunner">
     <clr-icon shape="filter"></clr-icon> Common Filter
   </button>
+  <button class="btn btn-primary" (click)="openChartConfigManager()" style="margin-left: 10px;" *ngIf="!fromRunner">
+    <clr-icon shape="cog"></clr-icon> Chart Config
+  </button>
   <div style="display: inline;">
     {{dashboardName}}
   </div>
@@ -732,6 +735,15 @@
   </div>
 </clr-modal>
 
+<clr-modal [(clrModalOpen)]="chartConfigModalOpen" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Chart Configuration Manager</h3>
+  <div class="modal-body">
+    <app-chart-config-manager></app-chart-config-manager>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline" (click)="closeChartConfigManager()">Close</button>
+  </div>
+</clr-modal>
 
 <!-- Common Filter Modal -->
 <clr-modal [(clrModalOpen)]="commonFilterModalOpen" [clrModalStaticBackdrop]="true" clrModalSize="lg">
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 3d0ac44..8e7b5ae 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
@@ -30,8 +30,6 @@ import { CompactFilterComponent } from '../common-filter';
 import { FilterService } from '../common-filter/filter.service';
 // Add the UnifiedChartComponent import
 import { UnifiedChartComponent } from '../gadgets/unified-chart';
-// Add the ChartConfigModalComponent import
-import { ChartConfigModalComponent } from './chart-config-modal.component';
 
 function isNullArray(arr) {
   return !Array.isArray(arr) || arr.length === 0;
@@ -208,6 +206,9 @@ export class EditnewdashComponent implements OnInit {
   // Add drilldown column data property
   drilldownColumnData = []; // Add drilldown column data property
 
+  // Add property for chart config modal
+  chartConfigModalOpen: boolean = false;
+
   constructor(private route: ActivatedRoute,
     private router: Router,
     private dashboardService: Dashboard3Service,
@@ -2048,4 +2049,14 @@ export class EditnewdashComponent implements OnInit {
     }
   }
 
+  // Add method to open chart configuration manager
+  openChartConfigManager(): void {
+    this.chartConfigModalOpen = true;
+  }
+  
+  // Add method to close chart configuration manager
+  closeChartConfigManager(): void {
+    this.chartConfigModalOpen = false;
+  }
+
 }