diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/package.json b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/package.json
index 591a7aeab..aab01e53b 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/package.json
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/package.json
@@ -20,9 +20,6 @@
     "hammerjs": "2.0.8",
     "igniteui-angular-charts": "17.3.0",
     "igniteui-angular-core": "17.3.0",
-    "igniteui-angular-inputs": "17.3.0",
-    "igniteui-angular-layouts": "17.3.0",
-    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.component.html b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.component.html
index 5334a49f7..c038ab111 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.component.html
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.component.html
@@ -1,33 +1,4 @@
 <div class="container vertical sample">
-  <div class="options vertical">
-      <igx-property-editor-panel
-      name="PropertyEditor"
-      #propertyEditor
-      [componentRenderer]="renderer"
-      [target]="chart"
-      descriptionType="DataChart"
-      isHorizontal="true"
-      isWrappingEnabled="true">
-          <igx-property-editor-property-description
-          name="FillScaleMinimumValueEditor"
-          #fillScaleMinimumValueEditor
-          label="MinimumValue: "
-          valueType="Slider"
-          min="0"
-          max="20000"
-          (changed)="this.scatterBubbleSeriesFillScaleSliderChanged($event)">
-          </igx-property-editor-property-description>
-          <igx-property-editor-property-description
-          name="FillScaleMaximumValueEditor"
-          #fillScaleMaximumValueEditor
-          label="MaximumValue: "
-          valueType="Slider"
-          min="25000"
-          max="100000"
-          (changed)="this.scatterBubbleSeriesFillScaleSliderChanged($event)">
-          </igx-property-editor-property-description>
-      </igx-property-editor-panel>
-  </div>
   <div class="container fill">
       <igx-data-chart
       name="chart"
diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.component.ts b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.component.ts
index 4348e8d6a..aa7c08183 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.component.ts
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.component.ts
@@ -1,15 +1,7 @@
 import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { ComponentRenderer, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartScatterDescriptionModule, DataChartScatterCoreDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule, PropertyEditorPanelDescriptionModule } from 'igniteui-angular-core';
+import { ComponentRenderer, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartScatterDescriptionModule, DataChartScatterCoreDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-angular-core';
 import { WorldDebtAndPopulationItem, WorldDebtAndPopulation } from './WorldDebtAndPopulation';
-import { IgxPropertyEditorPropertyDescriptionChangedEventArgs, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';
-import { IgxBubbleSeriesComponent } from 'igniteui-angular-charts';
-import { EnumUtil } from 'igniteui-angular-core';
-import { IgxPropertyEditorPanelComponent } from 'igniteui-angular-layouts';
-import { IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxSizeScaleComponent, IgxValueBrushScaleComponent } from 'igniteui-angular-charts';
-
-import { defineAllComponents } from 'igniteui-webcomponents';
-
-defineAllComponents();
+import { IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxBubbleSeriesComponent, IgxSizeScaleComponent, IgxValueBrushScaleComponent } from 'igniteui-angular-charts';
 
 @Component({
     selector: "app-root",
@@ -21,12 +13,6 @@ defineAllComponents();
 export class AppComponent implements AfterViewInit
 {
 
-	@ViewChild("propertyEditor", { static: true } )
-	private propertyEditor: IgxPropertyEditorPanelComponent
-	@ViewChild("fillScaleMinimumValueEditor", { static: true } )
-	private fillScaleMinimumValueEditor: IgxPropertyEditorPropertyDescriptionComponent
-	@ViewChild("fillScaleMaximumValueEditor", { static: true } )
-	private fillScaleMaximumValueEditor: IgxPropertyEditorPropertyDescriptionComponent
 	@ViewChild("chart", { static: true } )
 	private chart: IgxDataChartComponent
 	@ViewChild("xAxis", { static: true } )
@@ -82,7 +68,6 @@ export class AppComponent implements AfterViewInit
             DataChartScatterCoreDescriptionModule.register(context);
             DataChartInteractivityDescriptionModule.register(context);
             DataChartAnnotationDescriptionModule.register(context);
-            PropertyEditorPanelDescriptionModule.register(context);
         }
         return this._componentRenderer;
     }
@@ -95,18 +80,5 @@ export class AppComponent implements AfterViewInit
 	{
 	}
 
-	public scatterBubbleSeriesFillScaleSliderChanged({ sender, args }: { sender: any, args: IgxPropertyEditorPropertyDescriptionChangedEventArgs }): void {
-	    let series: IgxBubbleSeriesComponent = this.chart.actualSeries[0] as IgxBubbleSeriesComponent;
-
-	    let fillScale = (series.fillScale as any);
-
-	    if(args.newValue >= 25000){
-	        fillScale.maximumValue = args.newValue;
-	    }
-	    else{
-	        fillScale.minimumValue = args.newValue;
-	    }
-	}
-
 }
 
diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.module.ts b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.module.ts
index 47d634286..db571d6e9 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.module.ts
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.module.ts
@@ -6,7 +6,6 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { AppComponent } from "./app.component";
 
 import { IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartScatterModule, IgxDataChartScatterCoreModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';
-import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts';
 
 @NgModule({
   bootstrap: [AppComponent],
@@ -23,8 +22,7 @@ import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts';
     IgxDataChartScatterModule,
     IgxDataChartScatterCoreModule,
     IgxDataChartInteractivityModule,
-    IgxDataChartAnnotationModule,
-    IgxPropertyEditorPanelModule
+    IgxDataChartAnnotationModule
 ],
   providers: [],
   schemas: []