diff --git a/samples/charts/data-chart/crosshair-layer-styling/src/app.component.html b/samples/charts/data-chart/crosshair-layer-styling/src/app.component.html
index 10e5eb64d..0a1ffec68 100644
--- a/samples/charts/data-chart/crosshair-layer-styling/src/app.component.html
+++ b/samples/charts/data-chart/crosshair-layer-styling/src/app.component.html
@@ -2,7 +2,7 @@
     <div class="options vertical">
         <label id="legendTitle">Renewable Electricity Generated</label>
     </div>
-    <igx-data-chart height="100%" width="100%" >
+    <igx-data-chart height="100%" width="100%" computedPlotAreaMarginMode="Series" >
         <igx-category-x-axis #xAxis [dataSource]="data" label="Year"></igx-category-x-axis>
         <igx-numeric-y-axis #yAxis title="TWh" labelLocation="OutsideRight"></igx-numeric-y-axis>
 
diff --git a/samples/charts/data-chart/final-value-layer-styling/src/app.component.html b/samples/charts/data-chart/final-value-layer-styling/src/app.component.html
index 61f1be8a4..28215b0a7 100644
--- a/samples/charts/data-chart/final-value-layer-styling/src/app.component.html
+++ b/samples/charts/data-chart/final-value-layer-styling/src/app.component.html
@@ -2,7 +2,7 @@
     <div class="options vertical">
         <label id="legendTitle">Renewable Energy Generated</label>
     </div>
-    <igx-data-chart height="100%" width="100%" >
+    <igx-data-chart height="100%" width="100%" computedPlotAreaMarginMode="Series">
         <igx-category-x-axis #xAxis [dataSource]="data" label="Year"></igx-category-x-axis>
         <igx-numeric-y-axis #yAxis title="TWh" labelLocation="OutsideRight"></igx-numeric-y-axis>