diff --git a/browser/scripts/browser.js b/browser/scripts/browser.js
index 17f962346..2a8fbb8cd 100644
--- a/browser/scripts/browser.js
+++ b/browser/scripts/browser.js
@@ -163,6 +163,8 @@ function getSampleInfo(samplePath, sampleCallback, sampleFile) {
     info.SourceModuleTS = "";             // e.g. ./samples/charts/data-chart/axis-sharing/src/app.module.ts
     info.SourceDataFiles = [];            // e.g. ./samples/charts/data-chart/axis-sharing/src/SampleFinancialData.ts
     info.SourceFiles = [];  // all above
+    info.ImportsLines = [];
+    info.ImportsModules = [];
 
     // getting path to files in a given sample's source path:
     gulp.src([
diff --git a/browser/src/assets/stats.json b/browser/src/assets/stats.json
index fa67616b7..ae9c3795e 100644
--- a/browser/src/assets/stats.json
+++ b/browser/src/assets/stats.json
@@ -1,6 +1,6 @@
 [
-  { "browser": false, "xplat": false, "path": "charts/category-chart/annotations-all" },
   { "browser": true,  "xplat": false, "path": "charts/category-chart/annotations" },
+  { "browser": false, "xplat": false, "path": "charts/category-chart/annotations-all" },
   { "browser": false, "xplat": false, "path": "charts/category-chart/annotations-callouts" },
   { "browser": false, "xplat": false, "path": "charts/category-chart/annotations-crosshairs" },
   { "browser": false, "xplat": false, "path": "charts/category-chart/annotations-custom" },
@@ -13,12 +13,13 @@
   { "browser": false, "xplat": false, "path": "charts/category-chart/axis-gridlines" },
   { "browser": false, "xplat": false, "path": "charts/category-chart/axis-inverted" },
   { "browser": false, "xplat": false, "path": "charts/category-chart/axis-labels" },
-  { "browser": false, "xplat": false, "path": "charts/category-chart/axis-options" },
   { "browser": false, "xplat": false, "path": "charts/category-chart/axis-locations" },
+  { "browser": false, "xplat": false, "path": "charts/category-chart/axis-options" },
   { "browser": false, "xplat": false, "path": "charts/category-chart/axis-overlap" },
   { "browser": false, "xplat": false, "path": "charts/category-chart/axis-range" },
-  { "browser": false, "xplat": false, "path": "charts/category-chart/axis-titles" },
   { "browser": false, "xplat": false, "path": "charts/category-chart/axis-tickmarks" },
+  { "browser": false, "xplat": false, "path": "charts/category-chart/axis-titles" },
+  { "browser": false, "xplat": false, "path": "charts/category-chart/chart-highlight-filter" },
   { "browser": false, "xplat": false, "path": "charts/category-chart/column-chart-multiple-sources" },
   { "browser": false, "xplat": false, "path": "charts/category-chart/column-chart-single-source" },
   { "browser": false, "xplat": false, "path": "charts/category-chart/column-chart-styling" },
@@ -70,41 +71,6 @@
   { "browser": false, "xplat": false, "path": "charts/doughnut-chart/overview" },
   { "browser": false, "xplat": false, "path": "charts/doughnut-chart/rings" },
   { "browser": false, "xplat": false, "path": "charts/doughnut-chart/selection" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/annotations" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/axis-types" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/data-legend" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/data-legend-formatting-currency" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/data-legend-styling-props" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/data-tooltip" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/data-tooltip-formatting-currency" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/data-tooltip-styling-props" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/format-specifiers" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/high-frequency" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/high-volume" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/indicator-customization" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/indicator-types" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/multiple-data" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/multiple-feeds" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/overview" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/panes" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/performance" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/scrollbars" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/stock-index-chart" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/styling" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/theming" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/time-based-data" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/titles" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/tooltip-template" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/tooltip-types" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/trendlines" },
-  { "browser": false, "xplat": false, "path": "charts/financial-chart/volume-types" },
-  { "browser": false, "xplat": false, "path": "charts/pie-chart/animation" },
-  { "browser": false, "xplat": false, "path": "charts/pie-chart/explosion" },
-  { "browser": false, "xplat": false, "path": "charts/pie-chart/legend" },
-  { "browser": false, "xplat": false, "path": "charts/pie-chart/others" },
-  { "browser": false, "xplat": false, "path": "charts/pie-chart/overview" },
-  { "browser": false, "xplat": false, "path": "charts/pie-chart/selection" },
-  { "browser": false, "xplat": false, "path": "charts/pie-chart/styling" },
   { "browser": false, "xplat": false, "path": "charts/data-chart/annotations-custom" },
   { "browser": false, "xplat": false, "path": "charts/data-chart/axis-annotations" },
   { "browser": false, "xplat": false, "path": "charts/data-chart/axis-annotations-corner-radius" },
@@ -120,6 +86,9 @@
   { "browser": false, "xplat": false, "path": "charts/data-chart/bar-chart-single-source" },
   { "browser": false, "xplat": false, "path": "charts/data-chart/bar-chart-styling" },
   { "browser": false, "xplat": false, "path": "charts/data-chart/callout-layer-styling" },
+  { "browser": false, "xplat": false, "path": "charts/data-chart/chart-highlight-filter" },
+  { "browser": false, "xplat": false, "path": "charts/data-chart/chart-highlight-filter-datasource" },
+  { "browser": false, "xplat": false, "path": "charts/data-chart/chart-highlight-filter-multiple-series" },
   { "browser": false, "xplat": false, "path": "charts/data-chart/chart-navigation" },
   { "browser": false, "xplat": false, "path": "charts/data-chart/chart-overview" },
   { "browser": false, "xplat": false, "path": "charts/data-chart/chart-performance" },
@@ -220,8 +189,8 @@
   { "browser": false, "xplat": false, "path": "charts/data-chart/type-scatter-series" },
   { "browser": false, "xplat": false, "path": "charts/data-chart/type-scatter-spline-series" },
   { "browser": false, "xplat": false, "path": "charts/data-chart/type-shape-series" },
-  { "browser": false, "xplat": false, "path": "charts/data-chart/type-stacked-100-bar-series" },
   { "browser": false, "xplat": false, "path": "charts/data-chart/type-stacked-100-area-series" },
+  { "browser": false, "xplat": false, "path": "charts/data-chart/type-stacked-100-bar-series" },
   { "browser": false, "xplat": false, "path": "charts/data-chart/type-stacked-100-column-series" },
   { "browser": false, "xplat": false, "path": "charts/data-chart/type-stacked-100-line-series" },
   { "browser": false, "xplat": false, "path": "charts/data-chart/type-stacked-100-spline-area-series" },
@@ -233,6 +202,41 @@
   { "browser": false, "xplat": false, "path": "charts/data-chart/type-stacked-spline-area-series" },
   { "browser": false, "xplat": false, "path": "charts/data-chart/type-stacked-spline-series" },
   { "browser": false, "xplat": false, "path": "charts/data-chart/waterfall-chart" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/annotations" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/axis-types" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/data-legend" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/data-legend-formatting-currency" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/data-legend-styling-props" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/data-tooltip" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/data-tooltip-formatting-currency" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/data-tooltip-styling-props" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/format-specifiers" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/high-frequency" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/high-volume" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/indicator-customization" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/indicator-types" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/multiple-data" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/multiple-feeds" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/overview" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/panes" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/performance" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/scrollbars" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/stock-index-chart" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/styling" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/theming" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/time-based-data" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/titles" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/tooltip-template" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/tooltip-types" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/trendlines" },
+  { "browser": false, "xplat": false, "path": "charts/financial-chart/volume-types" },
+  { "browser": false, "xplat": false, "path": "charts/pie-chart/animation" },
+  { "browser": false, "xplat": false, "path": "charts/pie-chart/explosion" },
+  { "browser": false, "xplat": false, "path": "charts/pie-chart/legend" },
+  { "browser": false, "xplat": false, "path": "charts/pie-chart/others" },
+  { "browser": false, "xplat": false, "path": "charts/pie-chart/overview" },
+  { "browser": false, "xplat": false, "path": "charts/pie-chart/selection" },
+  { "browser": false, "xplat": false, "path": "charts/pie-chart/styling" },
   { "browser": false, "xplat": false, "path": "charts/sparkline/display-area" },
   { "browser": false, "xplat": false, "path": "charts/sparkline/display-column" },
   { "browser": false, "xplat": false, "path": "charts/sparkline/display-lines" },
@@ -271,6 +275,27 @@
   { "browser": false, "xplat": false, "path": "excel/spreadsheet/data-validation" },
   { "browser": false, "xplat": false, "path": "excel/spreadsheet/hyperlinks" },
   { "browser": false, "xplat": false, "path": "excel/spreadsheet/overview" },
+  { "browser": false, "xplat": false, "path": "gauges/bullet-graph/animation" },
+  { "browser": false, "xplat": false, "path": "gauges/bullet-graph/background" },
+  { "browser": false, "xplat": false, "path": "gauges/bullet-graph/labels" },
+  { "browser": false, "xplat": false, "path": "gauges/bullet-graph/measures" },
+  { "browser": false, "xplat": false, "path": "gauges/bullet-graph/ranges" },
+  { "browser": false, "xplat": false, "path": "gauges/bullet-graph/scale" },
+  { "browser": false, "xplat": false, "path": "gauges/bullet-graph/tickmarks" },
+  { "browser": false, "xplat": false, "path": "gauges/linear-gauge/animation" },
+  { "browser": false, "xplat": false, "path": "gauges/linear-gauge/backing" },
+  { "browser": false, "xplat": false, "path": "gauges/linear-gauge/labels" },
+  { "browser": false, "xplat": false, "path": "gauges/linear-gauge/needle" },
+  { "browser": false, "xplat": false, "path": "gauges/linear-gauge/ranges" },
+  { "browser": false, "xplat": false, "path": "gauges/linear-gauge/scale" },
+  { "browser": false, "xplat": false, "path": "gauges/linear-gauge/tickmarks" },
+  { "browser": false, "xplat": false, "path": "gauges/radial-gauge/animation" },
+  { "browser": false, "xplat": false, "path": "gauges/radial-gauge/backing" },
+  { "browser": false, "xplat": false, "path": "gauges/radial-gauge/labels" },
+  { "browser": false, "xplat": false, "path": "gauges/radial-gauge/needle" },
+  { "browser": false, "xplat": false, "path": "gauges/radial-gauge/ranges" },
+  { "browser": false, "xplat": false, "path": "gauges/radial-gauge/scale" },
+  { "browser": false, "xplat": false, "path": "gauges/radial-gauge/tickmarks" },
   { "browser": false, "xplat": false, "path": "maps/geo-map/binding-data-csv" },
   { "browser": false, "xplat": false, "path": "maps/geo-map/binding-data-json-points" },
   { "browser": false, "xplat": false, "path": "maps/geo-map/binding-data-model" },
@@ -297,26 +322,5 @@
   { "browser": false, "xplat": false, "path": "maps/geo-map/type-scatter-density-series" },
   { "browser": false, "xplat": false, "path": "maps/geo-map/type-scatter-symbol-series" },
   { "browser": false, "xplat": false, "path": "maps/geo-map/type-shape-polygon-series" },
-  { "browser": false, "xplat": false, "path": "maps/geo-map/type-shape-polyline-series" },
-  { "browser": false, "xplat": false, "path": "gauges/bullet-graph/animation" },
-  { "browser": false, "xplat": false, "path": "gauges/bullet-graph/background" },
-  { "browser": false, "xplat": false, "path": "gauges/bullet-graph/labels" },
-  { "browser": false, "xplat": false, "path": "gauges/bullet-graph/measures" },
-  { "browser": false, "xplat": false, "path": "gauges/bullet-graph/ranges" },
-  { "browser": false, "xplat": false, "path": "gauges/bullet-graph/scale" },
-  { "browser": false, "xplat": false, "path": "gauges/bullet-graph/tickmarks" },
-  { "browser": false, "xplat": false, "path": "gauges/linear-gauge/animation" },
-  { "browser": false, "xplat": false, "path": "gauges/linear-gauge/backing" },
-  { "browser": false, "xplat": false, "path": "gauges/linear-gauge/labels" },
-  { "browser": false, "xplat": false, "path": "gauges/linear-gauge/needle" },
-  { "browser": false, "xplat": false, "path": "gauges/linear-gauge/ranges" },
-  { "browser": false, "xplat": false, "path": "gauges/linear-gauge/scale" },
-  { "browser": false, "xplat": false, "path": "gauges/linear-gauge/tickmarks" },
-  { "browser": false, "xplat": false, "path": "gauges/radial-gauge/animation" },
-  { "browser": false, "xplat": false, "path": "gauges/radial-gauge/backing" },
-  { "browser": false, "xplat": false, "path": "gauges/radial-gauge/labels" },
-  { "browser": false, "xplat": false, "path": "gauges/radial-gauge/needle" },
-  { "browser": false, "xplat": false, "path": "gauges/radial-gauge/ranges" },
-  { "browser": false, "xplat": false, "path": "gauges/radial-gauge/scale" },
-  { "browser": false, "xplat": false, "path": "gauges/radial-gauge/tickmarks" }
+  { "browser": false, "xplat": false, "path": "maps/geo-map/type-shape-polyline-series" }
 ]
\ No newline at end of file
diff --git a/samples/charts/category-chart/chart-highlight-filter/ReadMe.md b/samples/charts/category-chart/chart-highlight-filter/ReadMe.md
new file mode 100644
index 000000000..58a2a42ad
--- /dev/null
+++ b/samples/charts/category-chart/chart-highlight-filter/ReadMe.md
@@ -0,0 +1,50 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext/samples/templates/ReadMe.md -->
+
+This folder contains Angular application with example of Chart Highlight Filter feature using [CategoryChart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/app/app.component.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://infragistics.com/angular-demos-dv/samples/charts/category-chart-chart-highlight-filter" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-angular-examples/tree/master/samples/charts/category-chart/chart-highlight-filter?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/app.component.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-angular-examples.git
+cd ./igniteui-angular-examples
+cd ../samples/charts/category-chart/chart-highlight-filter
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Angular** components, check out the [Angular documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html).
diff --git a/samples/charts/category-chart/format-specifiers/src/app.component.html b/samples/charts/category-chart/format-specifiers/src/app.component.html
index 47f4172f9..914d5ee45 100644
--- a/samples/charts/category-chart/format-specifiers/src/app.component.html
+++ b/samples/charts/category-chart/format-specifiers/src/app.component.html
@@ -22,7 +22,7 @@
       dataToolTipValueFormatMode="Currency"
       dataToolTipValueFormatString="${0} Billion"
       yAxisLabelFormat="{0}B"
-      [yAxisLabelFormatSpecifiers]="NumberFormatSpecifier1">
+      [yAxisLabelFormatSpecifiers]="numberFormatSpecifier1">
       </igx-category-chart>
   </div>
 </div>
diff --git a/samples/charts/data-chart/chart-highlight-filter-datasource/ReadMe.md b/samples/charts/data-chart/chart-highlight-filter-datasource/ReadMe.md
new file mode 100644
index 000000000..118dad9f9
--- /dev/null
+++ b/samples/charts/data-chart/chart-highlight-filter-datasource/ReadMe.md
@@ -0,0 +1,50 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext/samples/templates/ReadMe.md -->
+
+This folder contains Angular application with example of Chart Highlight Filter Datasource feature using [DataChart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/app/app.component.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://infragistics.com/angular-demos-dv/samples/charts/data-chart-chart-highlight-filter-datasource" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-angular-examples/tree/master/samples/charts/data-chart/chart-highlight-filter-datasource?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/app.component.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-angular-examples.git
+cd ./igniteui-angular-examples
+cd ../samples/charts/data-chart/chart-highlight-filter-datasource
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Angular** components, check out the [Angular documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html).
diff --git a/samples/charts/data-chart/chart-highlight-filter-multiple-series/ReadMe.md b/samples/charts/data-chart/chart-highlight-filter-multiple-series/ReadMe.md
new file mode 100644
index 000000000..a21af7c85
--- /dev/null
+++ b/samples/charts/data-chart/chart-highlight-filter-multiple-series/ReadMe.md
@@ -0,0 +1,50 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext/samples/templates/ReadMe.md -->
+
+This folder contains Angular application with example of Chart Highlight Filter Multiple Series feature using [DataChart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/app/app.component.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://infragistics.com/angular-demos-dv/samples/charts/data-chart-chart-highlight-filter-multiple-series" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-angular-examples/tree/master/samples/charts/data-chart/chart-highlight-filter-multiple-series?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/app.component.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-angular-examples.git
+cd ./igniteui-angular-examples
+cd ../samples/charts/data-chart/chart-highlight-filter-multiple-series
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Angular** components, check out the [Angular documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html).
diff --git a/samples/charts/data-chart/chart-highlight-filter/ReadMe.md b/samples/charts/data-chart/chart-highlight-filter/ReadMe.md
new file mode 100644
index 000000000..328b16f9c
--- /dev/null
+++ b/samples/charts/data-chart/chart-highlight-filter/ReadMe.md
@@ -0,0 +1,50 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext/samples/templates/ReadMe.md -->
+
+This folder contains Angular application with example of Chart Highlight Filter feature using [DataChart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/app/app.component.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://infragistics.com/angular-demos-dv/samples/charts/data-chart-chart-highlight-filter" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-angular-examples/tree/master/samples/charts/data-chart/chart-highlight-filter?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/app.component.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-angular-examples.git
+cd ./igniteui-angular-examples
+cd ../samples/charts/data-chart/chart-highlight-filter
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Angular** components, check out the [Angular documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html).
diff --git a/samples/charts/data-chart/format-specifiers/src/app.component.html b/samples/charts/data-chart/format-specifiers/src/app.component.html
index a5e48b04f..8a048de82 100644
--- a/samples/charts/data-chart/format-specifiers/src/app.component.html
+++ b/samples/charts/data-chart/format-specifiers/src/app.component.html
@@ -32,7 +32,7 @@
           title="Billions of U.S. Dollars"
           labelFormat="{0}B"
           abbreviateLargeNumbers="false"
-          [labelFormatSpecifiers]="NumberFormatSpecifier1">
+          [labelFormatSpecifiers]="numberFormatSpecifier1">
           </igx-numeric-x-axis>
           <igx-bar-series
           name="BarSeries1"
diff --git a/samples/charts/financial-chart/format-specifiers/src/app.component.html b/samples/charts/financial-chart/format-specifiers/src/app.component.html
index 6b6154b9a..e00ce34ae 100644
--- a/samples/charts/financial-chart/format-specifiers/src/app.component.html
+++ b/samples/charts/financial-chart/format-specifiers/src/app.component.html
@@ -24,9 +24,9 @@
       dataToolTipHeaderFormatTime="None"
       zoomSliderType="None"
       yAxisLabelFormat="{0}"
-      [yAxisLabelFormatSpecifiers]="NumberFormatSpecifier1"
+      [yAxisLabelFormatSpecifiers]="numberFormatSpecifier1"
       xAxisLabelFormat="{0}"
-      [xAxisLabelFormatSpecifiers]="DateTimeFormatSpecifier1">
+      [xAxisLabelFormatSpecifiers]="dateTimeFormatSpecifier1">
       </igx-financial-chart>
   </div>
 </div>