diff --git a/samples/charts/data-chart/data-legend/src/app.component.html b/samples/charts/data-chart/data-legend/src/app.component.html
index ddc9c80dc..78be73b8b 100644
--- a/samples/charts/data-chart/data-legend/src/app.component.html
+++ b/samples/charts/data-chart/data-legend/src/app.component.html
@@ -6,21 +6,15 @@
       <igx-data-legend
       name="legend"
       #legend
-      [target]="chart">
+      [target]="chart"
+      unitsText="%"
+      includedColumns="BirthRate, DeathRate">
       </igx-data-legend>
   </div>
   <div class="container fill">
       <igx-data-chart
       name="chart"
       #chart>
-          <igx-numeric-x-axis
-          name="xAxis"
-          #xAxis
-          title="Death Rate"
-          interval="1"
-          minimumValue="4"
-          maximumValue="16">
-          </igx-numeric-x-axis>
           <igx-numeric-y-axis
           name="yAxis"
           #yAxis
@@ -29,6 +23,14 @@
           minimumValue="0"
           maximumValue="60">
           </igx-numeric-y-axis>
+          <igx-numeric-x-axis
+          name="xAxis"
+          #xAxis
+          title="Death Rate"
+          interval="1"
+          minimumValue="4"
+          maximumValue="16">
+          </igx-numeric-x-axis>
           <igx-bubble-series
           name="bubbleSeries1"
           #bubbleSeries1
diff --git a/samples/charts/data-chart/data-legend/src/app.component.ts b/samples/charts/data-chart/data-legend/src/app.component.ts
index 60b1c7c1e..63e72aea1 100644
--- a/samples/charts/data-chart/data-legend/src/app.component.ts
+++ b/samples/charts/data-chart/data-legend/src/app.component.ts
@@ -1,7 +1,7 @@
 import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { CountryDemographicAfricanItem, CountryDemographicAfrican } from './CountryDemographicAfrican';
 import { CountryDemographicEuropeItem, CountryDemographicEurope } from './CountryDemographicEurope';
-import { IgxDataLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxBubbleSeriesComponent, IgxSizeScaleComponent, IgxCrosshairLayerComponent } from 'igniteui-angular-charts';
+import { IgxDataLegendComponent, IgxDataChartComponent, IgxNumericYAxisComponent, IgxNumericXAxisComponent, IgxBubbleSeriesComponent, IgxSizeScaleComponent, IgxCrosshairLayerComponent } from 'igniteui-angular-charts';
 
 @Component({
     selector: "app-root",
@@ -17,10 +17,10 @@ export class AppComponent implements AfterViewInit
 	private legend: IgxDataLegendComponent
 	@ViewChild("chart", { static: true } )
 	private chart: IgxDataChartComponent
-	@ViewChild("xAxis", { static: true } )
-	private xAxis: IgxNumericXAxisComponent
 	@ViewChild("yAxis", { static: true } )
 	private yAxis: IgxNumericYAxisComponent
+	@ViewChild("xAxis", { static: true } )
+	private xAxis: IgxNumericXAxisComponent
 	@ViewChild("bubbleSeries1", { static: true } )
 	private bubbleSeries1: IgxBubbleSeriesComponent
 	private  _sizeScale1: IgxSizeScaleComponent | null = null;