diff --git a/samples/charts/data-chart/crosshair-layer-styling/App.razor b/samples/charts/data-chart/crosshair-layer-styling/App.razor
index 7da9fec56..4b42b227f 100644
--- a/samples/charts/data-chart/crosshair-layer-styling/App.razor
+++ b/samples/charts/data-chart/crosshair-layer-styling/App.razor
@@ -5,7 +5,14 @@
     <div class="container vertical">
         @if (Data != null)
         {
-        <IgbDataChart Height="100%" Width="100%" Subtitle="Renewable Energy Generated">
+        <IgbDataChart 
+            Height="100%" 
+            Width="100%" 
+            Subtitle="Renewable Energy Generated"
+            PlotAreaMarginTop="12"
+            PlotAreaMarginBottom="12"
+            PlotAreaMarginLeft="12"
+            PlotAreaMarginRight="12">
             <IgbCategoryXAxis Name="xAxis" DataSource="Data" Label="Year" />
             <IgbNumericYAxis Name="yAxis" Title="TWh" LabelLocation="AxisLabelsLocation.OutsideRight" />
 
diff --git a/samples/charts/data-chart/final-value-layer-styling/App.razor b/samples/charts/data-chart/final-value-layer-styling/App.razor
index 129ecd8d6..92d0ad62a 100644
--- a/samples/charts/data-chart/final-value-layer-styling/App.razor
+++ b/samples/charts/data-chart/final-value-layer-styling/App.razor
@@ -5,7 +5,14 @@
     <div class="container vertical">
         @if (Data != null)
         {
-        <IgbDataChart Height="100%" Width="100%" Subtitle="Renewable Energy Generated">
+        <IgbDataChart 
+            Height="100%" 
+            Width="100%" 
+            Subtitle="Renewable Energy Generated"
+            PlotAreaMarginTop="12"
+            PlotAreaMarginBottom="12"
+            PlotAreaMarginLeft="12"
+            PlotAreaMarginRight="12">
             <IgbCategoryXAxis Name="xAxis" DataSource="Data" Label="Year" />
             <IgbNumericYAxis Name="yAxis" Title="TWh" LabelLocation="AxisLabelsLocation.OutsideRight" />