IgniteUI · pamelabrasil · May 29, 2019 · Apr 9, 2019 · Apr 10, 2019 · Apr 10, 2019
diff --git a/en/components/bulletgraph.md b/en/components/bulletgraph.md
@@ -31,14 +31,12 @@ The features of the bullet graph include configurable orientation and direction,
 
 When installing the gauge package, the core package must also be installed.
 
-**npm install igniteui-angular-gauges igniteui-angular-core**
+-   **npm install --save igniteui-angular-core**
+-   **npm install --save igniteui-angular-gauges**
 
-The bullet graph is exported as an `NgModule`, you need to import the
-`IgxBulletGraphModule` inside your `AppModule`:
+### Required Modules
 
-<!-- -->
-
-<!-- -->
+The `IgxBulletGraph` requires the following modules:
 
 ```typescript
 // app.module.ts
@@ -109,7 +107,7 @@ Performance value is the primary measure displayed by the component and it is vi
 ```
 
 <div class="sample-container loading" style="height: 125px">
-    <iframe id="bullet-graph-measures-iframe" data-src='{environment:demosBaseUrl}/gauges/bullet-graph-measures' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
+    <iframe id="bullet-graph-measures-iframe" src='{environment:demosBaseUrl}/gauges/bullet-graph-measures' width="100%" height="100%" seamless="" frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn"   data-iframe-id="bullet-graph-measures-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
@@ -146,7 +144,7 @@ The ranges are visual elements that highlight a specified range of values on a s
 ```
 
 <div class="sample-container loading" style="height: 125px">
-    <iframe id="bullet-graph-ranges-iframe" data-src='{environment:demosBaseUrl}/gauges/bullet-graph-ranges' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
+    <iframe id="bullet-graph-ranges-iframe" src='{environment:demosBaseUrl}/gauges/bullet-graph-ranges' width="100%" height="100%" seamless="" frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn"   data-iframe-id="bullet-graph-ranges-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
@@ -181,7 +179,7 @@ The tick marks serve as a visual division of the scale into intervals in order t
 ```
 
 <div class="sample-container loading" style="height: 125px">
-    <iframe id="bullet-graph-tickmarks-iframe" data-src='{environment:demosBaseUrl}/gauges/bullet-graph-tickmarks' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
+    <iframe id="bullet-graph-tickmarks-iframe" src='{environment:demosBaseUrl}/gauges/bullet-graph-tickmarks' width="100%" height="100%" seamless="" frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn"   data-iframe-id="bullet-graph-tickmarks-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
@@ -207,7 +205,7 @@ The labels indicate the measures on the scale.
 ```
 
 <div class="sample-container loading" style="height: 125px">
-    <iframe id="bullet-graph-labels-iframe" data-src='{environment:demosBaseUrl}/gauges/bullet-graph-labels' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
+    <iframe id="bullet-graph-labels-iframe" src='{environment:demosBaseUrl}/gauges/bullet-graph-labels' width="100%" height="100%" seamless="" frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn"   data-iframe-id="bullet-graph-labels-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
@@ -232,7 +230,7 @@ The backing element represents background and border of the bullet graph compone
 ```
 
 <div class="sample-container loading" style="height: 125px">
-    <iframe id="bullet-graph-background-iframe" data-src='{environment:demosBaseUrl}/gauges/bullet-graph-background' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
+    <iframe id="bullet-graph-background-iframe" src='{environment:demosBaseUrl}/gauges/bullet-graph-background' width="100%" height="100%" seamless="" frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn"   data-iframe-id="bullet-graph-background-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
@@ -258,7 +256,7 @@ The scale is visual element that highlights the full range of values in the gaug
 ```
 
 <div class="sample-container loading" style="height: 125px">
-    <iframe id="bullet-graph-scale-iframe" data-src='{environment:demosBaseUrl}/gauges/bullet-graph-scale' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
+    <iframe id="bullet-graph-scale-iframe" src='{environment:demosBaseUrl}/gauges/bullet-graph-scale' width="100%" height="100%" seamless="" frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
     <button data-localize="stackblitz" disabled class="stackblitz-btn"   data-iframe-id="bullet-graph-scale-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz

diff --git a/en/components/categorychart.md b/en/components/categorychart.md
@@ -1,7 +1,7 @@
 ---
-title: Category Chart | Data Visualization Tools | Ignite UI for Angular | Infragistics 
+title: Category Chart | Data Visualization Tools | Ignite UI for Angular | Infragistics
 _description: Use the category chart component to analyze and  automatically choose the best chart type to represent data. Learn about our chart types for visualization.
-_keywords: category chart, Ignite UI for Angular, infragistics 
+_keywords: category chart, Ignite UI for Angular, infragistics
 ---
 
 ## Category Chart
@@ -43,14 +43,12 @@ Another example of the intuitive behavior of the category chart component is tha
 
 When installing the chart package, the core package must also be installed.
 
-**npm install igniteui-angular-charts igniteui-angular-core**
+-   **npm install --save igniteui-angular-core**
+-   **npm install --save igniteui-angular-charts**
 
-The category chart is exported as an `NgModule`, you need to import the
-`IgxCategoryChartModule` inside your `AppModule`:
+### Required Modules
 
-<!-- -->
-
-<!-- -->
+The `IgxCategoryChart` requires the following modules:
 
 ```typescript
 // app.module.ts

diff --git a/en/components/datachart.md b/en/components/datachart.md
@@ -25,14 +25,12 @@ The `IgxDataChart` is a charting component that provides modular design of axis,
 
 When installing the chart package, the core package must also be installed.
 
-**npm install igniteui-angular-charts igniteui-angular-core**
+-   **npm install --save igniteui-angular-core**
+-   **npm install --save igniteui-angular-charts**
 
-The data chart is exported as an `NgModule`, you need to import the
-`IgxDataChartCoreModule` inside your `AppModule`:
+### Required Modules
 
-<!-- -->
-
-<!-- -->
+The `IgxDataChart` requires the following modules:
 
 ```typescript
 // data chart's modules required for all series:

diff --git a/en/components/datachart_axis_scales.md b/en/components/datachart_axis_scales.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_axis_types.md b/en/components/datachart_axis_types.md
@@ -14,7 +14,7 @@ In the `IgxDataChart` control, an axis provides base properties for specifying a
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-axis-types' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-axis-types-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_chart_performance.md b/en/components/datachart_chart_performance.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_chart_synchronization.md b/en/components/datachart_chart_synchronization.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_data_triangulation.md b/en/components/datachart_data_triangulation.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_series_animations.md b/en/components/datachart_series_animations.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_series_errorbars.md b/en/components/datachart_series_errorbars.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_series_requirements.md b/en/components/datachart_series_requirements.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_series_types_category.md b/en/components/datachart_series_types_category.md
@@ -70,9 +70,7 @@ this.state = { dataSource: SampleCategoryData.create() }
 
 ### Required Modules
 
-<!-- Angular -->
-
-In order to use category series, you need to import the following modules in your app during load and register data chart modules:
+The category series require the following modules:
 
 ```typescript
 // axis' modules:

diff --git a/en/components/datachart_series_types_financial.md b/en/components/datachart_series_types_financial.md
@@ -92,9 +92,7 @@ this.state = { dataSource: SampleFinancialData.create() }
 
 ### Required Modules
 
-<!-- Angular -->
-
-In order to use financial series, you need to import the following modules in your app during load and register data chart modules:
+The financial series require the following modules:
 
 ```typescript
 // axis' modules:

diff --git a/en/components/datachart_series_types_polar.md b/en/components/datachart_series_types_polar.md
@@ -64,9 +64,7 @@ this.state = { dataSource: SamplePolarData.create() }
 
 ### Required Modules
 
-<!-- Angular -->
-
-In order to use polar series, you need to import the following modules in your app during load and register data chart modules:
+In order to use polar series, you need to import the following modules in your app during load:
 
 ```typescript
 // axis' modules:

diff --git a/en/components/datachart_series_types_radial.md b/en/components/datachart_series_types_radial.md
@@ -62,7 +62,7 @@ this.state = { dataSource: SampleRadialData.create() }
 
 <!-- Angular -->
 
-In order to use radial series, you need to import the following modules in your app during load and register data chart modules:
+In order to use radial series, you need to import the following modules in your app during load:
 
 ```typescript
 // axis' modules:

diff --git a/en/components/datachart_series_types_range.md b/en/components/datachart_series_types_range.md
@@ -55,9 +55,7 @@ this.state = { dataSource: SampleRangeData.create() }
 
 ### Required Modules
 
-<!-- Angular -->
-
-In order to use range series, you need to import the following modules in your app during load and register data chart modules:
+In order to use range series, you need to import the following modules in your app during load:
 
 ```typescript
 // in app.module.ts file

diff --git a/en/components/datachart_series_types_scatter_area.md b/en/components/datachart_series_types_scatter_area.md
@@ -40,8 +40,6 @@ this.state = { dataSource: SampleScatterData.create() }
 
 ### Required Modules
 
-<!-- Angular -->
-
 The scatter area series requires the following modules:
 
 ```typescript

diff --git a/en/components/datachart_series_types_scatter_bubble.md b/en/components/datachart_series_types_scatter_bubble.md
@@ -41,8 +41,6 @@ this.state = { dataSource: SampleScatterStats.getCountries() }
 
 ### Required Modules
 
-<!-- Angular -->
-
 The scatter bubble series requires the following modules:
 
 ```typescript

diff --git a/en/components/datachart_series_types_scatter_contour.md b/en/components/datachart_series_types_scatter_contour.md
@@ -41,9 +41,7 @@ this.state = { dataSource: SampleScatterData.create() }
 
 ### Required Modules
 
-<!-- Angular -->
-
-The scatter area series requires the following modules:
+The scatter contour series requires the following modules:
 
 ```typescript
 // axis' modules:

diff --git a/en/components/datachart_series_types_scatter_hd.md b/en/components/datachart_series_types_scatter_hd.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/datachart_series_types_scatter_marker.md b/en/components/datachart_series_types_scatter_marker.md
@@ -56,8 +56,6 @@ this.state = { dataSource: SampleScatterStats.getCountries() }
 
 ### Required Modules
 
-<!-- Angular -->
-
 The scatter marker series requires the following modules:
 
 ```typescript

diff --git a/en/components/datachart_series_types_shape.md b/en/components/datachart_series_types_shape.md
@@ -56,9 +56,7 @@ this.state = { dataSource: SampleShapeData.create() }
 
 ### Required Modules
 
-<!-- Angular -->
-
-In order to use scatter shape series, you need to import the following modules in your app during load and register data chart modules:
+The scatter polygon series requires the following modules:
 
 ```typescript
 // axis' modules:

diff --git a/en/components/datachart_series_types_stacked.md b/en/components/datachart_series_types_stacked.md
@@ -14,7 +14,7 @@ This topic explains the various types of stacked series in the `IgxDataChart` co
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-type-stacked-series' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 
@@ -71,9 +71,7 @@ Stacked series have the following data requirements:
 
 ### Required Modules
 
-<!-- Angular -->
-
-In order to use stacked series, you need to import the following modules in your app during load:
+The stacked series requires the following modules:
 
 ```typescript
 // axis' modules:
@@ -129,7 +127,7 @@ This code demonstrates how to create an instance of data chart with `StackedColu
     <igx-stacked-fragment-series valueMemberPath="Gas"></igx-stacked-fragment-series>
     <igx-stacked-fragment-series valueMemberPath="Oil"></igx-stacked-fragment-series>
   </igx-stacked-column-series>
-    
+
 </igx-data-chart>
 ```
 
@@ -149,6 +147,6 @@ This code demonstrates how to create an instance of data chart with `StackedColu
     <igx-stacked-fragment-series valueMemberPath="Gas"></igx-stacked-fragment-series>
     <igx-stacked-fragment-series valueMemberPath="Oil"></igx-stacked-fragment-series>
   </igx-stacked-bar-series>
-    
+
 </igx-data-chart>
 ```
diff --git a/en/components/datachart_series_value_overlay.md b/en/components/datachart_series_value_overlay.md
@@ -14,7 +14,7 @@ The Data Chart is ... TODO ...
     <iframe id="data-chart-overview-iframe" src='{environment:demosBaseUrl}/charts/data-chart-overview' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="financial-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="data-chart-overview-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>
 

diff --git a/en/components/doughnutchart.md b/en/components/doughnutchart.md
@@ -24,14 +24,13 @@ The Ignite UI for Angular doughnut chart component is similar to the Pie Chart c
 ### Dependencies
 
 When installing the charts package, the core package must also be installed.
-**npm install igniteui-angular-core**
-**npm install igniteui-angular-charts**
 
-<!-- -->
+-   **npm install --save igniteui-angular-core**
+-   **npm install --save igniteui-angular-charts**
 
-The `IgxDoughnutChart` is exported as an `NgModule`, you need to import the _IgxDoughnutChartModule_ inside your `AppModule`:
+### Required Modules
 
-<!-- -->
+The `IgxDoughnutChart` requires the following modules:
 
 ```typescript
 // app.module.ts
@@ -148,6 +147,6 @@ The doughnut chart component supports the use of a legend. The legend used is th
     <iframe id="doughnut-chart-legend-iframe" src='{environment:demosBaseUrl}/charts/doughnut-chart-legend' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
-    <button data-localize="stackblitz" class="stackblitz-btn"   data-iframe-id="doughnut-chart-explosion-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
+    <button data-localize="stackblitz" class="stackblitz-btn" data-iframe-id="doughnut-chart-legend-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on StackBlitz
     </button>
 </div>