Changes from igniteui-xplat-examples-output+PRs_2024.10.21.1

samples/charts/data-chart/data-legend/index.html

@@ -25,22 +25,16 @@
     <div class="legend">
         <igc-data-legend
         name="legend"
-        id="legend">
+        id="legend"
+        units-text="%"
+        included-columns="BirthRate, DeathRate">
         </igc-data-legend>
     </div>
 
     <div class="container fill">
         <igc-data-chart
         name="chart"
         id="chart">
-            <igc-numeric-x-axis
-            name="xAxis"
-            id="xAxis"
-            title="Death Rate"
-            interval="1"
-            minimum-value="4"
-            maximum-value="16">
-            </igc-numeric-x-axis>
             <igc-numeric-y-axis
             name="yAxis"
             id="yAxis"
@@ -49,6 +43,14 @@
             minimum-value="0"
             maximum-value="60">
             </igc-numeric-y-axis>
+            <igc-numeric-x-axis
+            name="xAxis"
+            id="xAxis"
+            title="Death Rate"
+            interval="1"
+            minimum-value="4"
+            maximum-value="16">
+            </igc-numeric-x-axis>
             <igc-bubble-series
             name="bubbleSeries1"
             id="bubbleSeries1"

samples/charts/data-chart/data-legend/src/index.ts

@@ -1,5 +1,5 @@
 import { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule, IgcDataLegendModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
-import { IgcDataLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcBubbleSeriesComponent, IgcSizeScaleComponent, IgcCrosshairLayerComponent } from 'igniteui-webcomponents-charts';
+import { IgcDataLegendComponent, IgcDataChartComponent, IgcNumericYAxisComponent, IgcNumericXAxisComponent, IgcBubbleSeriesComponent, IgcSizeScaleComponent, IgcCrosshairLayerComponent } from 'igniteui-webcomponents-charts';
 import { CountryDemographicAfricanItem, CountryDemographicAfrican } from './CountryDemographicAfrican';
 import { CountryDemographicEuropeItem, CountryDemographicEurope } from './CountryDemographicEurope';
 
@@ -22,8 +22,8 @@ export class Sample {
 
     private legend: IgcDataLegendComponent
     private chart: IgcDataChartComponent
-    private xAxis: IgcNumericXAxisComponent
     private yAxis: IgcNumericYAxisComponent
+    private xAxis: IgcNumericXAxisComponent
     private bubbleSeries1: IgcBubbleSeriesComponent
     private _sizeScale1: IgcSizeScaleComponent | null = null;
     public get sizeScale1(): IgcSizeScaleComponent {
@@ -58,8 +58,8 @@ export class Sample {
     constructor() {
         var legend = this.legend = document.getElementById('legend') as IgcDataLegendComponent;
         var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
-        var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
         var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
+        var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
         var bubbleSeries1 = this.bubbleSeries1 = document.getElementById('bubbleSeries1') as IgcBubbleSeriesComponent;
         var bubbleSeries2 = this.bubbleSeries2 = document.getElementById('bubbleSeries2') as IgcBubbleSeriesComponent;
         var crosshairLayer = this.crosshairLayer = document.getElementById('CrosshairLayer') as IgcCrosshairLayerComponent;