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 2f44a0e95..b76fbf584 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
@@ -19,9 +19,10 @@
           <igx-numeric-y-axis
           name="yAxis"
           #yAxis
-          isLogarithmic="true"
-          logarithmBase="10"
-          title="Public Debt per GDP">
+          title="Public Debt per GDP (%)"
+          titleLeftMargin="5"
+          isLogarithmic="false"
+          maximumValue="120">
           </igx-numeric-y-axis>
           <igx-bubble-series
           name="bubbleSeries1"
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 c5779eb5e..b9e860ac7 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
@@ -42,8 +42,8 @@ export class AppComponent implements AfterViewInit
 	        var valueBrushScale1 = new IgxValueBrushScaleComponent();
 	        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.maximumValue = 260000;
+	        valueBrushScale1.brushes = ["rgba(137, 181, 250, 1)", "rgba(20, 108, 247, 1)", "rgba(82, 144, 242, 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 b5ca6c8fb..7e81731fb 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
@@ -24,9 +24,10 @@
           <igx-numeric-y-axis
           name="yAxis"
           #yAxis
-          title="GDP per Capita"
-          isLogarithmic="true"
-          abbreviateLargeNumbers="true">
+          title="Public Debt per GDP (%)"
+          titleLeftMargin="5"
+          isLogarithmic="false"
+          maximumValue="120">
           </igx-numeric-y-axis>
           <igx-bubble-series
           name="bubbleSeries1"
@@ -35,8 +36,11 @@
           [xAxis]="xAxis"
           [yAxis]="yAxis"
           xMemberPath="population"
-          yMemberPath="gDP"
-          radiusMemberPath="population"
+          yMemberPath="publicDebt"
+          radiusMemberPath="gdpPerPerson"
+          xMemberAsLegendLabel="Population"
+          yMemberAsLegendLabel="Debt"
+          radiusMemberAsLegendLabel="GDP"
           [dataSource]="countryStatsAfrica"
           markerType="Circle"
           showDefaultTooltip="true"
@@ -49,8 +53,11 @@
           [xAxis]="xAxis"
           [yAxis]="yAxis"
           xMemberPath="population"
-          yMemberPath="gDP"
-          radiusMemberPath="population"
+          yMemberPath="publicDebt"
+          radiusMemberPath="gdpPerPerson"
+          xMemberAsLegendLabel="Population"
+          yMemberAsLegendLabel="Debt"
+          radiusMemberAsLegendLabel="GDP"
           [dataSource]="countryStatsEurope"
           markerType="Circle"
           showDefaultTooltip="true"
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 a5b2133e0..52d98728b 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
@@ -16,9 +16,9 @@
           <igx-numeric-y-axis
           name="yAxis"
           #yAxis
-          title="Public Debt"
+          title="Public Debt per GDP (%)"
+          titleLeftMargin="5"
           isLogarithmic="false"
-          abbreviateLargeNumbers="true"
           maximumValue="120">
           </igx-numeric-y-axis>
           <igx-bubble-series
@@ -29,6 +29,9 @@
           radiusMemberPath="gdpPerPerson"
           [radiusScale]="sizeScale1"
           fillMemberPath="gdpPerPerson"
+          xMemberAsLegendLabel="Population"
+          yMemberAsLegendLabel="Debt"
+          radiusMemberAsLegendLabel="GDP"
           [xAxis]="xAxis"
           [yAxis]="yAxis"
           [dataSource]="worldStats"
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 6ac2211e3..1f275bd78 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
@@ -25,6 +25,7 @@
           name="yAxis"
           #yAxis
           title="GDP per Capita"
+          titleLeftMargin="5"
           isLogarithmic="true"
           abbreviateLargeNumbers="true">
           </igx-numeric-y-axis>
@@ -36,13 +37,16 @@
           [yAxis]="yAxis"
           xMemberPath="population"
           yMemberPath="gDP"
-          radiusMemberPath="population"
+          radiusMemberPath="workedHours"
+          xMemberAsLegendLabel="Population"
+          yMemberAsLegendLabel="GDP"
+          radiusMemberAsLegendLabel="Worked Hours"
           [dataSource]="countryStatsAfrica"
           markerType="Circle"
-          markerOutline="rgba(62, 202, 62, 1)"
-          markerBrush="rgba(69, 179, 224, 1)"
+          markerOutline="rgba(2, 158, 30, 1)"
+          markerBrush="rgba(2, 158, 30, 1)"
           markerFillOpacity="0.5"
-          markerThickness="2"
+          markerThickness="1"
           showDefaultTooltip="true"
           [radiusScale]="sizeScale1">
           </igx-bubble-series>
@@ -54,19 +58,35 @@
           [yAxis]="yAxis"
           xMemberPath="population"
           yMemberPath="gDP"
-          radiusMemberPath="population"
+          radiusMemberPath="workedHours"
+          xMemberAsLegendLabel="Population"
+          yMemberAsLegendLabel="GDP"
+          radiusMemberAsLegendLabel="Worked Hours"
           [dataSource]="countryStatsEurope"
           markerType="Circle"
-          markerOutline="rgba(171, 6, 221, 1)"
-          markerBrush="rgba(135, 156, 235, 1)"
+          markerOutline="rgba(95, 2, 171, 1)"
+          markerBrush="rgba(95, 2, 171, 1)"
           markerFillOpacity="0.5"
-          markerThickness="2"
+          markerThickness="1"
           showDefaultTooltip="true"
           [radiusScale]="sizeScale2">
           </igx-bubble-series>
           <igx-data-tool-tip-layer
           name="dataToolTipLayer"
-          #dataToolTipLayer>
+          #dataToolTipLayer
+          valueRowMarginTop="1"
+          labelTextMarginTop="1"
+          titleTextMarginTop="1"
+          unitsTextMarginTop="1"
+          valueRowMarginBottom="1"
+          labelTextMarginBottom="1"
+          titleTextMarginBottom="1"
+          unitsTextMarginBottom="1"
+          unitsTextMarginRight="5"
+          valueTextMarginLeft="10"
+          labelTextMarginLeft="5"
+          groupingMode="Grouped"
+          layoutMode="Vertical">
           </igx-data-tool-tip-layer>
       </igx-data-chart>
   </div>