diff --git a/samples/charts/data-chart/crosshair-layer-styling/App.razor b/samples/charts/data-chart/crosshair-layer-styling/App.razor
index 7da9fec56..d6f28f949 100644
--- a/samples/charts/data-chart/crosshair-layer-styling/App.razor
+++ b/samples/charts/data-chart/crosshair-layer-styling/App.razor
@@ -5,7 +5,7 @@
     <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" ComputedPlotAreaMarginMode="@ComputedPlotAreaMarginMode.Series">
             <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..a6881345e 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,7 @@
     <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" ComputedPlotAreaMarginMode="@ComputedPlotAreaMarginMode.Series">
             <IgbCategoryXAxis Name="xAxis" DataSource="Data" Label="Year" />
             <IgbNumericYAxis Name="yAxis" Title="TWh" LabelLocation="AxisLabelsLocation.OutsideRight" />