diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/index.html b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/index.html
index a291a9ae17..bd7abf4667 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/index.html
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/index.html
@@ -38,9 +38,10 @@
             <igc-numeric-y-axis
             name="yAxis"
             id="yAxis"
-            is-logarithmic="true"
-            logarithm-base="10"
-            title="Public Debt per GDP">
+            title="Public Debt per GDP (%)"
+            title-left-margin="5"
+            is-logarithmic="false"
+            maximum-value="120">
             </igc-numeric-y-axis>
             <igc-bubble-series
             name="bubbleSeries1"
diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/index.ts b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/index.ts
index 78606afebc..6d88483a8c 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/index.ts
+++ b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/index.ts
@@ -42,8 +42,8 @@ export class Sample {
             var valueBrushScale1 = new IgcValueBrushScaleComponent();
             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/index.html b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/index.html
index e4be7e0386..83588403c3 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/index.html
+++ b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/index.html
@@ -44,17 +44,21 @@
             <igc-numeric-y-axis
             name="yAxis"
             id="yAxis"
-            title="GDP per Capita"
-            is-logarithmic="true"
-            abbreviate-large-numbers="true">
+            title="Public Debt per GDP (%)"
+            title-left-margin="5"
+            is-logarithmic="false"
+            maximum-value="120">
             </igc-numeric-y-axis>
             <igc-bubble-series
             name="bubbleSeries1"
             id="bubbleSeries1"
             title="African Countries"
             x-member-path="population"
-            y-member-path="gDP"
-            radius-member-path="population"
+            y-member-path="publicDebt"
+            radius-member-path="gdpPerPerson"
+            x-member-as-legend-label="Population"
+            y-member-as-legend-label="Debt"
+            radius-member-as-legend-label="GDP"
             marker-type="Circle"
             show-default-tooltip="true">
             </igc-bubble-series>
@@ -63,8 +67,11 @@
             id="bubbleSeries2"
             title="European Countries"
             x-member-path="population"
-            y-member-path="gDP"
-            radius-member-path="population"
+            y-member-path="publicDebt"
+            radius-member-path="gdpPerPerson"
+            x-member-as-legend-label="Population"
+            y-member-as-legend-label="Debt"
+            radius-member-as-legend-label="GDP"
             marker-type="Circle"
             show-default-tooltip="true">
             </igc-bubble-series>
diff --git a/samples/charts/data-chart/scatter-bubble-chart-single-source/index.html b/samples/charts/data-chart/scatter-bubble-chart-single-source/index.html
index 11c922a386..aaad03223a 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-single-source/index.html
+++ b/samples/charts/data-chart/scatter-bubble-chart-single-source/index.html
@@ -36,9 +36,9 @@
             <igc-numeric-y-axis
             name="yAxis"
             id="yAxis"
-            title="Public Debt"
+            title="Public Debt per GDP (%)"
+            title-left-margin="5"
             is-logarithmic="false"
-            abbreviate-large-numbers="true"
             maximum-value="120">
             </igc-numeric-y-axis>
             <igc-bubble-series
@@ -48,6 +48,9 @@
             y-member-path="publicDebt"
             radius-member-path="gdpPerPerson"
             fill-member-path="gdpPerPerson"
+            x-member-as-legend-label="Population"
+            y-member-as-legend-label="Debt"
+            radius-member-as-legend-label="GDP"
             marker-type="Circle"
             show-default-tooltip="true">
             </igc-bubble-series>
diff --git a/samples/charts/data-chart/scatter-bubble-chart-styling/index.html b/samples/charts/data-chart/scatter-bubble-chart-styling/index.html
index f469b5c36c..f9cb383a05 100644
--- a/samples/charts/data-chart/scatter-bubble-chart-styling/index.html
+++ b/samples/charts/data-chart/scatter-bubble-chart-styling/index.html
@@ -45,6 +45,7 @@
             name="yAxis"
             id="yAxis"
             title="GDP per Capita"
+            title-left-margin="5"
             is-logarithmic="true"
             abbreviate-large-numbers="true">
             </igc-numeric-y-axis>
@@ -54,12 +55,15 @@
             title="African Countries"
             x-member-path="population"
             y-member-path="gDP"
-            radius-member-path="population"
+            radius-member-path="workedHours"
+            x-member-as-legend-label="Population"
+            y-member-as-legend-label="GDP"
+            radius-member-as-legend-label="Worked Hours"
             marker-type="Circle"
-            marker-outline="rgba(62, 202, 62, 1)"
-            marker-brush="rgba(69, 179, 224, 1)"
+            marker-outline="rgba(2, 158, 30, 1)"
+            marker-brush="rgba(2, 158, 30, 1)"
             marker-fill-opacity="0.5"
-            marker-thickness="2"
+            marker-thickness="1"
             show-default-tooltip="true">
             </igc-bubble-series>
             <igc-bubble-series
@@ -68,17 +72,33 @@
             title="European Countries"
             x-member-path="population"
             y-member-path="gDP"
-            radius-member-path="population"
+            radius-member-path="workedHours"
+            x-member-as-legend-label="Population"
+            y-member-as-legend-label="GDP"
+            radius-member-as-legend-label="Worked Hours"
             marker-type="Circle"
-            marker-outline="rgba(171, 6, 221, 1)"
-            marker-brush="rgba(135, 156, 235, 1)"
+            marker-outline="rgba(95, 2, 171, 1)"
+            marker-brush="rgba(95, 2, 171, 1)"
             marker-fill-opacity="0.5"
-            marker-thickness="2"
+            marker-thickness="1"
             show-default-tooltip="true">
             </igc-bubble-series>
             <igc-data-tool-tip-layer
             name="dataToolTipLayer"
-            id="dataToolTipLayer">
+            id="dataToolTipLayer"
+            value-row-margin-top="1"
+            label-text-margin-top="1"
+            title-text-margin-top="1"
+            units-text-margin-top="1"
+            value-row-margin-bottom="1"
+            label-text-margin-bottom="1"
+            title-text-margin-bottom="1"
+            units-text-margin-bottom="1"
+            units-text-margin-right="5"
+            value-text-margin-left="10"
+            label-text-margin-left="5"
+            grouping-mode="Grouped"
+            layout-mode="Vertical">
             </igc-data-tool-tip-layer>
         </igc-data-chart>
     </div>