diff --git a/samples/charts/category-chart/annotations-all/package.json b/samples/charts/category-chart/annotations-all/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/annotations-all/package.json
+++ b/samples/charts/category-chart/annotations-all/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/annotations-callouts/package.json b/samples/charts/category-chart/annotations-callouts/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/annotations-callouts/package.json
+++ b/samples/charts/category-chart/annotations-callouts/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/annotations-crosshairs/package.json b/samples/charts/category-chart/annotations-crosshairs/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/annotations-crosshairs/package.json
+++ b/samples/charts/category-chart/annotations-crosshairs/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/annotations-custom/package.json b/samples/charts/category-chart/annotations-custom/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/annotations-custom/package.json
+++ b/samples/charts/category-chart/annotations-custom/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/annotations-final-value/package.json b/samples/charts/category-chart/annotations-final-value/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/annotations-final-value/package.json
+++ b/samples/charts/category-chart/annotations-final-value/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/annotations-highlighting/package.json b/samples/charts/category-chart/annotations-highlighting/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/annotations-highlighting/package.json
+++ b/samples/charts/category-chart/annotations-highlighting/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/axis-gap/package.json b/samples/charts/category-chart/axis-gap/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/axis-gap/package.json
+++ b/samples/charts/category-chart/axis-gap/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/axis-gridlines/package.json b/samples/charts/category-chart/axis-gridlines/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/axis-gridlines/package.json
+++ b/samples/charts/category-chart/axis-gridlines/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/axis-inverted/package.json b/samples/charts/category-chart/axis-inverted/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/axis-inverted/package.json
+++ b/samples/charts/category-chart/axis-inverted/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/axis-labels/package.json b/samples/charts/category-chart/axis-labels/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/axis-labels/package.json
+++ b/samples/charts/category-chart/axis-labels/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/axis-locations/package.json b/samples/charts/category-chart/axis-locations/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/axis-locations/package.json
+++ b/samples/charts/category-chart/axis-locations/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/axis-overlap/package.json b/samples/charts/category-chart/axis-overlap/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/axis-overlap/package.json
+++ b/samples/charts/category-chart/axis-overlap/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/axis-range/package.json b/samples/charts/category-chart/axis-range/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/axis-range/package.json
+++ b/samples/charts/category-chart/axis-range/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/axis-tickmarks/package.json b/samples/charts/category-chart/axis-tickmarks/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/axis-tickmarks/package.json
+++ b/samples/charts/category-chart/axis-tickmarks/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/chart-highlight-filter/package.json b/samples/charts/category-chart/chart-highlight-filter/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/chart-highlight-filter/package.json
+++ b/samples/charts/category-chart/chart-highlight-filter/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/column-chart-with-tooltips/package.json b/samples/charts/category-chart/column-chart-with-tooltips/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/column-chart-with-tooltips/package.json
+++ b/samples/charts/category-chart/column-chart-with-tooltips/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/data-aggregations/package.json b/samples/charts/category-chart/data-aggregations/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/data-aggregations/package.json
+++ b/samples/charts/category-chart/data-aggregations/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/data-filter/package.json b/samples/charts/category-chart/data-filter/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/data-filter/package.json
+++ b/samples/charts/category-chart/data-filter/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/data-tooltip-positioning/package.json b/samples/charts/category-chart/data-tooltip-positioning/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/data-tooltip-positioning/package.json
+++ b/samples/charts/category-chart/data-tooltip-positioning/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/highlighting-behavior/package.json b/samples/charts/category-chart/highlighting-behavior/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/highlighting-behavior/package.json
+++ b/samples/charts/category-chart/highlighting-behavior/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/highlighting-mode/package.json b/samples/charts/category-chart/highlighting-mode/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/highlighting-mode/package.json
+++ b/samples/charts/category-chart/highlighting-mode/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/marker-options/package.json b/samples/charts/category-chart/marker-options/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/marker-options/package.json
+++ b/samples/charts/category-chart/marker-options/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/category-chart/value-lines/package.json b/samples/charts/category-chart/value-lines/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/category-chart/value-lines/package.json
+++ b/samples/charts/category-chart/value-lines/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.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/axis-label-rotation/package.json b/samples/charts/data-chart/axis-label-rotation/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/data-chart/axis-label-rotation/package.json
+++ b/samples/charts/data-chart/axis-label-rotation/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.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/chart-highlight-filter-datasource/package.json b/samples/charts/data-chart/chart-highlight-filter-datasource/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/data-chart/chart-highlight-filter-datasource/package.json
+++ b/samples/charts/data-chart/chart-highlight-filter-datasource/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.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/chart-highlight-filter-multiple-series/package.json b/samples/charts/data-chart/chart-highlight-filter-multiple-series/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/data-chart/chart-highlight-filter-multiple-series/package.json
+++ b/samples/charts/data-chart/chart-highlight-filter-multiple-series/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.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/chart-highlight-filter/package.json b/samples/charts/data-chart/chart-highlight-filter/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/data-chart/chart-highlight-filter/package.json
+++ b/samples/charts/data-chart/chart-highlight-filter/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.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/data-legend/src/app.component.html b/samples/charts/data-chart/data-legend/src/app.component.html
index 555001940..34688ac31 100644
--- a/samples/charts/data-chart/data-legend/src/app.component.html
+++ b/samples/charts/data-chart/data-legend/src/app.component.html
@@ -38,7 +38,7 @@
           xMemberPath="deathRate"
           yMemberPath="birthRate"
           radiusMemberPath="population"
-          [radiusScale]="sizeScale1"
+          [radiusScale]="SizeScale1"
           title="Africa"
           radiusMemberAsLegendLabel="Population: "
           xMemberAsLegendLabel="Death Rate: "
@@ -53,7 +53,7 @@
           xMemberPath="deathRate"
           yMemberPath="birthRate"
           radiusMemberPath="population"
-          [radiusScale]="sizeScale2"
+          [radiusScale]="SizeScale2"
           title="Europe"
           radiusMemberAsLegendLabel="Population: "
           xMemberAsLegendLabel="Death Rate: "
diff --git a/samples/charts/data-chart/data-tooltip/src/app.component.html b/samples/charts/data-chart/data-tooltip/src/app.component.html
index fd3c33ce7..778bd3970 100644
--- a/samples/charts/data-chart/data-tooltip/src/app.component.html
+++ b/samples/charts/data-chart/data-tooltip/src/app.component.html
@@ -31,7 +31,7 @@
           xMemberPath="deathRate"
           yMemberPath="birthRate"
           radiusMemberPath="population"
-          [radiusScale]="sizeScale1"
+          [radiusScale]="SizeScale1"
           title="Africa"
           radiusMemberAsLegendLabel="Population: "
           xMemberAsLegendLabel="Death Rate: "
@@ -46,7 +46,7 @@
           xMemberPath="deathRate"
           yMemberPath="birthRate"
           radiusMemberPath="population"
-          [radiusScale]="sizeScale2"
+          [radiusScale]="SizeScale2"
           title="Europe"
           radiusMemberAsLegendLabel="Population: "
           xMemberAsLegendLabel="Death Rate: "
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 45bc6e299..2323c210d 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
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.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..8ef10c444 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
@@ -58,7 +58,7 @@
           xMemberPath="population"
           yMemberPath="publicDebt"
           radiusMemberPath="gdpPerCapita"
-          [radiusScale]="sizeScale1"
+          [radiusScale]="SizeScale1"
           fillMemberPath="gdpPerCapita"
           [xAxis]="xAxis"
           [yAxis]="yAxis"
@@ -66,7 +66,7 @@
           markerType="Circle"
           markerOutline="black"
           showDefaultTooltip="true"
-          [fillScale]="valueBrushScale1">
+          [fillScale]="ValueBrushScale1">
           </igx-bubble-series>
       </igx-data-chart>
   </div>
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..8621fb96e 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
@@ -56,7 +56,7 @@ export class AppComponent implements AfterViewInit
 	        valueBrushScale1.isLogarithmic = false;
 	        valueBrushScale1.minimumValue = 0;
 	        valueBrushScale1.maximumValue = 100000;
-	        valueBrushScale1.brushes = ["rgba(26, 161, 226, 1)", "rgba(24, 154, 217, 1)", "rgba(22, 146, 206, 1)", "rgba(19, 133, 188, 1)", "rgba(15, 121, 171, 1)", "rgba(12, 107, 153, 1)", "rgba(9, 94, 136, 1)", "rgba(5, 82, 119, 1)", "rgba(2, 70, 105, 1)", "rgba(0, 63, 94, 1)"];
+	        valueBrushScale1.brushes = "rgba(26, 161, 226, 1) rgba(24, 154, 217, 1) rgba(22, 146, 206, 1) rgba(19, 133, 188, 1) rgba(15, 121, 171, 1) rgba(12, 107, 153, 1) rgba(9, 94, 136, 1) rgba(5, 82, 119, 1) rgba(2, 70, 105, 1) rgba(0, 63, 94, 1)";
 
 	        this._valueBrushScale1 = valueBrushScale1;
 	    }
diff --git a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/app.component.html b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/app.component.html
index fc39d6b1b..ac81e3df9 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/app.component.html
+++ b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/app.component.html
@@ -40,7 +40,7 @@
           [dataSource]="countryStatsAfrica"
           markerType="Circle"
           showDefaultTooltip="true"
-          [radiusScale]="sizeScale1">
+          [radiusScale]="SizeScale1">
           </igx-bubble-series>
           <igx-bubble-series
           name="BubbleSeries2"
@@ -54,7 +54,7 @@
           [dataSource]="countryStatsEurope"
           markerType="Circle"
           showDefaultTooltip="true"
-          [radiusScale]="sizeScale2">
+          [radiusScale]="SizeScale2">
           </igx-bubble-series>
       </igx-data-chart>
   </div>
diff --git a/samples/charts/data-chart/scatter-bubble-chart-single-source/src/app.component.html b/samples/charts/data-chart/scatter-bubble-chart-single-source/src/app.component.html
index 672b6b1c7..346190e03 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-single-source/src/app.component.html
+++ b/samples/charts/data-chart/scatter-bubble-chart-single-source/src/app.component.html
@@ -27,7 +27,7 @@
           xMemberPath="population"
           yMemberPath="publicDebt"
           radiusMemberPath="gdpPerCapita"
-          [radiusScale]="sizeScale1"
+          [radiusScale]="SizeScale1"
           fillMemberPath="gdpPerCapita"
           [xAxis]="xAxis"
           [yAxis]="yAxis"
diff --git a/samples/charts/data-chart/scatter-bubble-chart-styling/src/app.component.html b/samples/charts/data-chart/scatter-bubble-chart-styling/src/app.component.html
index 7ec0ba1aa..d7da0190e 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-styling/src/app.component.html
+++ b/samples/charts/data-chart/scatter-bubble-chart-styling/src/app.component.html
@@ -44,7 +44,7 @@
           markerFillOpacity="0.5"
           markerThickness="2"
           showDefaultTooltip="true"
-          [radiusScale]="sizeScale1">
+          [radiusScale]="SizeScale1">
           </igx-bubble-series>
           <igx-bubble-series
           name="BubbleSeries2"
@@ -62,7 +62,7 @@
           markerFillOpacity="0.5"
           markerThickness="2"
           showDefaultTooltip="true"
-          [radiusScale]="sizeScale2">
+          [radiusScale]="SizeScale2">
           </igx-bubble-series>
           <igx-data-tool-tip-layer
           name="DataToolTipLayer"
diff --git a/samples/charts/data-chart/transition-event/package.json b/samples/charts/data-chart/transition-event/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/data-chart/transition-event/package.json
+++ b/samples/charts/data-chart/transition-event/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/sparkline/markers/package.json b/samples/charts/sparkline/markers/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/sparkline/markers/package.json
+++ b/samples/charts/sparkline/markers/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/sparkline/normal-range/package.json b/samples/charts/sparkline/normal-range/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/sparkline/normal-range/package.json
+++ b/samples/charts/sparkline/normal-range/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/sparkline/trendlines/package.json b/samples/charts/sparkline/trendlines/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/sparkline/trendlines/package.json
+++ b/samples/charts/sparkline/trendlines/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/sparkline/unknown-values/package.json b/samples/charts/sparkline/unknown-values/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/sparkline/unknown-values/package.json
+++ b/samples/charts/sparkline/unknown-values/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/toolbar/theming/package.json b/samples/charts/toolbar/theming/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/toolbar/theming/package.json
+++ b/samples/charts/toolbar/theming/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",
diff --git a/samples/charts/tree-map/layout/package.json b/samples/charts/tree-map/layout/package.json
index 45bc6e299..2323c210d 100644
--- a/samples/charts/tree-map/layout/package.json
+++ b/samples/charts/tree-map/layout/package.json
@@ -22,7 +22,7 @@
     "igniteui-angular-core": "17.3.0-beta.0",
     "igniteui-angular-inputs": "17.3.0-beta.0",
     "igniteui-angular-layouts": "17.3.0-beta.0",
-    "igniteui-webcomponents": "4.7.0",
+    "igniteui-webcomponents": "4.8.0",
     "intl": "1.2.5",
     "jszip": "3.8.0",
     "rxjs": "6.6.7",