From 20993dee947534f2f40ef4e10367448414c0d4a9 Mon Sep 17 00:00:00 2001
From: HUSSAR-mtrela <martin.trela@gmail.com>
Date: Wed, 18 Oct 2023 14:14:36 -0400
Subject: [PATCH] export new samples

---
 .../custom-selection/.stackblitzrc            |   1 +
 .../custom-selection/angular.json             | 103 ++++++++++++++++
 .../custom-selection/package.json             |  44 +++++++
 .../custom-selection/sandbox.config.json      |   5 +
 .../custom-selection/src/SelectableData.ts    | 111 ++++++++++++++++++
 .../custom-selection/src/app.component.html   |  32 +++++
 .../custom-selection/src/app.component.scss   |   3 +
 .../custom-selection/src/app.component.ts     |  61 ++++++++++
 .../custom-selection/src/app.module.ts        |  27 +++++
 .../src/config/tsconfig-es5.app.json          |   6 +
 .../src/config/tsconfig.app.json              |  12 ++
 .../src/config/tsconfig.base.json             |  23 ++++
 .../src/config/tsconfig.spec.json             |  19 +++
 .../src/config/tsconfig.worker.json           |  14 +++
 .../src/environments/environment.prod.ts      |   3 +
 .../src/environments/environment.ts           |  16 +++
 .../custom-selection/src/index.html           |  23 ++++
 .../custom-selection/src/main.ts              |  15 +++
 .../custom-selection/src/polyfills.ts         |  65 ++++++++++
 .../custom-selection/src/styles.scss          |   9 ++
 .../custom-selection/src/typings.d.ts         |   5 +
 .../custom-selection/tsconfig.json            |  20 ++++
 .../custom-selection/tslint.json              |  31 +++++
 .../format-specifiers/.stackblitzrc           |   1 +
 .../format-specifiers/angular.json            | 103 ++++++++++++++++
 .../format-specifiers/package.json            |  46 ++++++++
 .../format-specifiers/sandbox.config.json     |   5 +
 .../src/HighestGrossingMovies.ts              |  51 ++++++++
 .../format-specifiers/src/app.component.html  |  28 +++++
 .../format-specifiers/src/app.component.scss  |   3 +
 .../format-specifiers/src/app.component.ts    |  62 ++++++++++
 .../format-specifiers/src/app.module.ts       |  28 +++++
 .../src/config/tsconfig-es5.app.json          |   6 +
 .../src/config/tsconfig.app.json              |  12 ++
 .../src/config/tsconfig.base.json             |  23 ++++
 .../src/config/tsconfig.spec.json             |  19 +++
 .../src/config/tsconfig.worker.json           |  14 +++
 .../src/environments/environment.prod.ts      |   3 +
 .../src/environments/environment.ts           |  16 +++
 .../format-specifiers/src/index.html          |  23 ++++
 .../format-specifiers/src/main.ts             |  15 +++
 .../format-specifiers/src/polyfills.ts        |  65 ++++++++++
 .../format-specifiers/src/styles.scss         |   9 ++
 .../format-specifiers/src/typings.d.ts        |   5 +
 .../format-specifiers/tsconfig.json           |  20 ++++
 .../format-specifiers/tslint.json             |  31 +++++
 .../format-specifiers/.stackblitzrc           |   1 +
 .../data-chart/format-specifiers/angular.json | 103 ++++++++++++++++
 .../data-chart/format-specifiers/package.json |  44 +++++++
 .../format-specifiers/sandbox.config.json     |   5 +
 .../src/HighestGrossingMovies.ts              |  51 ++++++++
 .../format-specifiers/src/app.component.html  |  65 ++++++++++
 .../format-specifiers/src/app.component.scss  |   3 +
 .../format-specifiers/src/app.component.ts    |  59 ++++++++++
 .../format-specifiers/src/app.module.ts       |  31 +++++
 .../src/config/tsconfig-es5.app.json          |   6 +
 .../src/config/tsconfig.app.json              |  12 ++
 .../src/config/tsconfig.base.json             |  23 ++++
 .../src/config/tsconfig.spec.json             |  19 +++
 .../src/config/tsconfig.worker.json           |  14 +++
 .../src/environments/environment.prod.ts      |   3 +
 .../src/environments/environment.ts           |  16 +++
 .../format-specifiers/src/index.html          |  23 ++++
 .../data-chart/format-specifiers/src/main.ts  |  15 +++
 .../format-specifiers/src/polyfills.ts        |  65 ++++++++++
 .../format-specifiers/src/styles.scss         |   9 ++
 .../format-specifiers/src/typings.d.ts        |   5 +
 .../format-specifiers/tsconfig.json           |  20 ++++
 .../data-chart/format-specifiers/tslint.json  |  31 +++++
 .../format-specifiers/.stackblitzrc           |   1 +
 .../format-specifiers/angular.json            | 103 ++++++++++++++++
 .../format-specifiers/package.json            |  44 +++++++
 .../format-specifiers/sandbox.config.json     |   5 +
 .../format-specifiers/src/MultipleStocks.ts   | 107 +++++++++++++++++
 .../format-specifiers/src/app.component.html  |  32 +++++
 .../format-specifiers/src/app.component.scss  |   3 +
 .../format-specifiers/src/app.component.ts    |  65 ++++++++++
 .../format-specifiers/src/app.module.ts       |  27 +++++
 .../src/config/tsconfig-es5.app.json          |   6 +
 .../src/config/tsconfig.app.json              |  12 ++
 .../src/config/tsconfig.base.json             |  23 ++++
 .../src/config/tsconfig.spec.json             |  19 +++
 .../src/config/tsconfig.worker.json           |  14 +++
 .../src/environments/environment.prod.ts      |   3 +
 .../src/environments/environment.ts           |  16 +++
 .../format-specifiers/src/index.html          |  23 ++++
 .../format-specifiers/src/main.ts             |  15 +++
 .../format-specifiers/src/polyfills.ts        |  65 ++++++++++
 .../format-specifiers/src/styles.scss         |   9 ++
 .../format-specifiers/src/typings.d.ts        |   5 +
 .../format-specifiers/tsconfig.json           |  20 ++++
 .../format-specifiers/tslint.json             |  31 +++++
 92 files changed, 2507 insertions(+)
 create mode 100644 samples/charts/category-chart/custom-selection/.stackblitzrc
 create mode 100644 samples/charts/category-chart/custom-selection/angular.json
 create mode 100644 samples/charts/category-chart/custom-selection/package.json
 create mode 100644 samples/charts/category-chart/custom-selection/sandbox.config.json
 create mode 100644 samples/charts/category-chart/custom-selection/src/SelectableData.ts
 create mode 100644 samples/charts/category-chart/custom-selection/src/app.component.html
 create mode 100644 samples/charts/category-chart/custom-selection/src/app.component.scss
 create mode 100644 samples/charts/category-chart/custom-selection/src/app.component.ts
 create mode 100644 samples/charts/category-chart/custom-selection/src/app.module.ts
 create mode 100644 samples/charts/category-chart/custom-selection/src/config/tsconfig-es5.app.json
 create mode 100644 samples/charts/category-chart/custom-selection/src/config/tsconfig.app.json
 create mode 100644 samples/charts/category-chart/custom-selection/src/config/tsconfig.base.json
 create mode 100644 samples/charts/category-chart/custom-selection/src/config/tsconfig.spec.json
 create mode 100644 samples/charts/category-chart/custom-selection/src/config/tsconfig.worker.json
 create mode 100644 samples/charts/category-chart/custom-selection/src/environments/environment.prod.ts
 create mode 100644 samples/charts/category-chart/custom-selection/src/environments/environment.ts
 create mode 100644 samples/charts/category-chart/custom-selection/src/index.html
 create mode 100644 samples/charts/category-chart/custom-selection/src/main.ts
 create mode 100644 samples/charts/category-chart/custom-selection/src/polyfills.ts
 create mode 100644 samples/charts/category-chart/custom-selection/src/styles.scss
 create mode 100644 samples/charts/category-chart/custom-selection/src/typings.d.ts
 create mode 100644 samples/charts/category-chart/custom-selection/tsconfig.json
 create mode 100644 samples/charts/category-chart/custom-selection/tslint.json
 create mode 100644 samples/charts/category-chart/format-specifiers/.stackblitzrc
 create mode 100644 samples/charts/category-chart/format-specifiers/angular.json
 create mode 100644 samples/charts/category-chart/format-specifiers/package.json
 create mode 100644 samples/charts/category-chart/format-specifiers/sandbox.config.json
 create mode 100644 samples/charts/category-chart/format-specifiers/src/HighestGrossingMovies.ts
 create mode 100644 samples/charts/category-chart/format-specifiers/src/app.component.html
 create mode 100644 samples/charts/category-chart/format-specifiers/src/app.component.scss
 create mode 100644 samples/charts/category-chart/format-specifiers/src/app.component.ts
 create mode 100644 samples/charts/category-chart/format-specifiers/src/app.module.ts
 create mode 100644 samples/charts/category-chart/format-specifiers/src/config/tsconfig-es5.app.json
 create mode 100644 samples/charts/category-chart/format-specifiers/src/config/tsconfig.app.json
 create mode 100644 samples/charts/category-chart/format-specifiers/src/config/tsconfig.base.json
 create mode 100644 samples/charts/category-chart/format-specifiers/src/config/tsconfig.spec.json
 create mode 100644 samples/charts/category-chart/format-specifiers/src/config/tsconfig.worker.json
 create mode 100644 samples/charts/category-chart/format-specifiers/src/environments/environment.prod.ts
 create mode 100644 samples/charts/category-chart/format-specifiers/src/environments/environment.ts
 create mode 100644 samples/charts/category-chart/format-specifiers/src/index.html
 create mode 100644 samples/charts/category-chart/format-specifiers/src/main.ts
 create mode 100644 samples/charts/category-chart/format-specifiers/src/polyfills.ts
 create mode 100644 samples/charts/category-chart/format-specifiers/src/styles.scss
 create mode 100644 samples/charts/category-chart/format-specifiers/src/typings.d.ts
 create mode 100644 samples/charts/category-chart/format-specifiers/tsconfig.json
 create mode 100644 samples/charts/category-chart/format-specifiers/tslint.json
 create mode 100644 samples/charts/data-chart/format-specifiers/.stackblitzrc
 create mode 100644 samples/charts/data-chart/format-specifiers/angular.json
 create mode 100644 samples/charts/data-chart/format-specifiers/package.json
 create mode 100644 samples/charts/data-chart/format-specifiers/sandbox.config.json
 create mode 100644 samples/charts/data-chart/format-specifiers/src/HighestGrossingMovies.ts
 create mode 100644 samples/charts/data-chart/format-specifiers/src/app.component.html
 create mode 100644 samples/charts/data-chart/format-specifiers/src/app.component.scss
 create mode 100644 samples/charts/data-chart/format-specifiers/src/app.component.ts
 create mode 100644 samples/charts/data-chart/format-specifiers/src/app.module.ts
 create mode 100644 samples/charts/data-chart/format-specifiers/src/config/tsconfig-es5.app.json
 create mode 100644 samples/charts/data-chart/format-specifiers/src/config/tsconfig.app.json
 create mode 100644 samples/charts/data-chart/format-specifiers/src/config/tsconfig.base.json
 create mode 100644 samples/charts/data-chart/format-specifiers/src/config/tsconfig.spec.json
 create mode 100644 samples/charts/data-chart/format-specifiers/src/config/tsconfig.worker.json
 create mode 100644 samples/charts/data-chart/format-specifiers/src/environments/environment.prod.ts
 create mode 100644 samples/charts/data-chart/format-specifiers/src/environments/environment.ts
 create mode 100644 samples/charts/data-chart/format-specifiers/src/index.html
 create mode 100644 samples/charts/data-chart/format-specifiers/src/main.ts
 create mode 100644 samples/charts/data-chart/format-specifiers/src/polyfills.ts
 create mode 100644 samples/charts/data-chart/format-specifiers/src/styles.scss
 create mode 100644 samples/charts/data-chart/format-specifiers/src/typings.d.ts
 create mode 100644 samples/charts/data-chart/format-specifiers/tsconfig.json
 create mode 100644 samples/charts/data-chart/format-specifiers/tslint.json
 create mode 100644 samples/charts/financial-chart/format-specifiers/.stackblitzrc
 create mode 100644 samples/charts/financial-chart/format-specifiers/angular.json
 create mode 100644 samples/charts/financial-chart/format-specifiers/package.json
 create mode 100644 samples/charts/financial-chart/format-specifiers/sandbox.config.json
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/MultipleStocks.ts
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/app.component.html
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/app.component.scss
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/app.component.ts
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/app.module.ts
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/config/tsconfig-es5.app.json
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/config/tsconfig.app.json
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/config/tsconfig.base.json
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/config/tsconfig.spec.json
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/config/tsconfig.worker.json
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/environments/environment.prod.ts
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/environments/environment.ts
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/index.html
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/main.ts
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/polyfills.ts
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/styles.scss
 create mode 100644 samples/charts/financial-chart/format-specifiers/src/typings.d.ts
 create mode 100644 samples/charts/financial-chart/format-specifiers/tsconfig.json
 create mode 100644 samples/charts/financial-chart/format-specifiers/tslint.json

diff --git a/samples/charts/category-chart/custom-selection/.stackblitzrc b/samples/charts/category-chart/custom-selection/.stackblitzrc
new file mode 100644
index 000000000..65efbb4fd
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/.stackblitzrc
@@ -0,0 +1 @@
+{"installDependencies":true,"startCommand":"turbo start","env":{"ENABLE_CJS_IMPORTS":true}}
\ No newline at end of file
diff --git a/samples/charts/category-chart/custom-selection/angular.json b/samples/charts/category-chart/custom-selection/angular.json
new file mode 100644
index 000000000..9ec584c70
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/angular.json
@@ -0,0 +1,103 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "demo": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/demo",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/config/tsconfig.app.json",
+            "assets": [
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "demo:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "demo:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/config/tsconfig.spec.json",
+            "karmaConfig": "src/config/karma.conf.js",
+            "styles": [
+              "styles.css"
+            ],
+            "scripts": [],
+            "assets": [
+              "src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/config/tsconfig.app.json",
+              "src/config/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}
diff --git a/samples/charts/category-chart/custom-selection/package.json b/samples/charts/category-chart/custom-selection/package.json
new file mode 100644
index 000000000..28a1138db
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/package.json
@@ -0,0 +1,44 @@
+{
+  "scripts": {
+    "ng": "ng",
+    "update": "ng update",
+    "start": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng serve -o",
+    "build": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng build --configuration production",
+    "lint": "ng lint"
+  },
+  "dependencies": {
+    "@angular/animations": "16.0.1",
+    "@angular/common": "16.0.1",
+    "@angular/compiler": "16.0.1",
+    "@angular/core": "16.0.1",
+    "@angular/forms": "16.0.1",
+    "@angular/platform-browser": "16.0.1",
+    "@angular/platform-browser-dynamic": "16.0.1",
+    "@types/hammerjs": "2.0.39",
+    "classlist.js": "1.1.20150312",
+    "core-js": "3.21.0",
+    "hammerjs": "2.0.8",
+    "igniteui-angular-charts": "16.1.2-beta.0",
+    "igniteui-angular-core": "16.1.2-beta.0",
+    "intl": "1.2.5",
+    "jszip": "3.7.1",
+    "rxjs": "6.6.7",
+    "tslib": "2.3.1",
+    "web-animations-js": "2.3.2",
+    "zone.js": "0.13.0"
+  },
+  "devDependencies": {
+    "@angular/cli": "16.0.1",
+    "@angular/compiler-cli": "16.0.1",
+    "@angular/language-service": "16.0.1",
+    "@angular-devkit/build-angular": "16.0.1",
+    "@types/node": "14.14.28",
+    "codelyzer": "6.0.2",
+    "jasmine-core": "3.7.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "sass.js": "0.11.1",
+    "tslint": "~6.1.3",
+    "ts-node": "9.1.1",
+    "typescript": "5.0.4"
+  }
+}
diff --git a/samples/charts/category-chart/custom-selection/sandbox.config.json b/samples/charts/category-chart/custom-selection/sandbox.config.json
new file mode 100644
index 000000000..07f53508e
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/charts/category-chart/custom-selection/src/SelectableData.ts b/samples/charts/category-chart/custom-selection/src/SelectableData.ts
new file mode 100644
index 000000000..cf0b49e67
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/SelectableData.ts
@@ -0,0 +1,111 @@
+export class SelectableDataItem {
+    public constructor(init: Partial<SelectableDataItem>) {
+        Object.assign(this, init);
+    }
+
+    public category: string;
+    public dataValue: number;
+    public selectedValue: number;
+
+}
+export class SelectableData extends Array<SelectableDataItem> {
+    public constructor() {
+        super();
+        this.push(new SelectableDataItem(
+        {
+            category: `2010`,
+            dataValue: 20,
+            selectedValue: 20
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2011`,
+            dataValue: 40,
+            selectedValue: null
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2012`,
+            dataValue: 35,
+            selectedValue: null
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2013`,
+            dataValue: 50,
+            selectedValue: 50
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2014`,
+            dataValue: 45,
+            selectedValue: null
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2015`,
+            dataValue: 60,
+            selectedValue: 60
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2016`,
+            dataValue: 35,
+            selectedValue: null
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2017`,
+            dataValue: 40,
+            selectedValue: null
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2018`,
+            dataValue: 50,
+            selectedValue: 50
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2019`,
+            dataValue: 75,
+            selectedValue: 75
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2020`,
+            dataValue: 65,
+            selectedValue: null
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2021`,
+            dataValue: 40,
+            selectedValue: null
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2022`,
+            dataValue: 50,
+            selectedValue: null
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2023`,
+            dataValue: 65,
+            selectedValue: 65
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2024`,
+            dataValue: 70,
+            selectedValue: 70
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2025`,
+            dataValue: 85,
+            selectedValue: null
+        }));
+    }
+}
diff --git a/samples/charts/category-chart/custom-selection/src/app.component.html b/samples/charts/category-chart/custom-selection/src/app.component.html
new file mode 100644
index 000000000..4639fc79b
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/app.component.html
@@ -0,0 +1,32 @@
+<div class="container vertical sample">
+  <div class="legend-title">
+      Chart with Multiple Selectable Data Columns
+  </div>
+  <div class="legend">
+      <igx-data-legend
+      name="Legend"
+      #legend
+      summaryType="None"
+      valueFormatMaxFractions="0"
+      [target]="chart">
+      </igx-data-legend>
+  </div>
+  <div class="container fill">
+      <igx-category-chart
+      name="chart"
+      #chart
+      [dataSource]="selectableData"
+      chartType="Column"
+      xAxisOverlap="1"
+      yAxisMinimumValue="0"
+      isHorizontalZoomEnabled="false"
+      isVerticalZoomEnabled="false"
+      isSeriesHighlightingEnabled="true"
+      finalValueAnnotationsVisible="false"
+      crosshairsAnnotationEnabled="false"
+      dataToolTipSummaryType="None"
+      dataToolTipValueFormatMaxFractions="0"
+      (seriesPointerDown)="this.categoryChartCustomSelectionPointerDown($event)">
+      </igx-category-chart>
+  </div>
+</div>
diff --git a/samples/charts/category-chart/custom-selection/src/app.component.scss b/samples/charts/category-chart/custom-selection/src/app.component.scss
new file mode 100644
index 000000000..cbff781da
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/app.component.scss
@@ -0,0 +1,3 @@
+/* styles are loaded the Shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/
diff --git a/samples/charts/category-chart/custom-selection/src/app.component.ts b/samples/charts/category-chart/custom-selection/src/app.component.ts
new file mode 100644
index 000000000..aca6652c7
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/app.component.ts
@@ -0,0 +1,61 @@
+import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { SelectableDataItem, SelectableData } from './SelectableData';
+import { IgxDataLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
+
+@Component({
+    selector: "app-root",
+    styleUrls: ["./app.component.scss"],
+    templateUrl: "./app.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AppComponent {
+
+    public constructor(private _detector: ChangeDetectorRef) {
+
+    }
+
+    @ViewChild("legend", { static: true } )
+    private legend: IgxDataLegendComponent
+    @ViewChild("chart", { static: true } )
+    private chart: IgxCategoryChartComponent
+
+    private _selectableData: SelectableData = null;
+    public get selectableData(): SelectableData {
+        if (this._selectableData == null)
+        {
+            this._selectableData = new SelectableData();
+        }
+        return this._selectableData;
+    }
+
+
+    public categoryChartCustomSelectionPointerDown(e: any): void {
+
+        let oldItem = e.args.item as SelectableDataItem;
+
+        if (oldItem === null) return;
+
+        let newItem: SelectableDataItem = new SelectableDataItem({
+            category: oldItem.category,
+            dataValue: oldItem.dataValue,
+            selectedValue: oldItem.selectedValue
+        });
+
+        var selectedIndex = -1;
+        for (var i = 0; i < this.selectableData.length; i++) {
+            if (oldItem.category === this.selectableData[i].category) {
+                selectedIndex = i;
+                break;
+            }
+        }
+
+        if (oldItem.selectedValue === oldItem.dataValue)
+            newItem.selectedValue = null;
+        else
+            newItem.selectedValue = newItem.dataValue;
+
+        this.chart.notifySetItem(this.selectableData, selectedIndex, oldItem, newItem);
+    }
+
+}
+
diff --git a/samples/charts/category-chart/custom-selection/src/app.module.ts b/samples/charts/category-chart/custom-selection/src/app.module.ts
new file mode 100644
index 000000000..43068b10c
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/app.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { AppComponent } from "./app.component";
+
+import { IgxDataLegendModule, IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts';
+
+@NgModule({
+  bootstrap: [AppComponent],
+  declarations: [
+    AppComponent
+],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    CommonModule,
+    FormsModule,
+    IgxDataLegendModule,
+    IgxCategoryChartModule,
+    IgxDataChartInteractivityModule
+],
+  providers: [],
+  schemas: []
+})
+export class AppModule {}
diff --git a/samples/charts/category-chart/custom-selection/src/config/tsconfig-es5.app.json b/samples/charts/category-chart/custom-selection/src/config/tsconfig-es5.app.json
new file mode 100644
index 000000000..7e5d23397
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/config/tsconfig-es5.app.json
@@ -0,0 +1,6 @@
+{
+    "extends": "./tsconfig.app.json",
+    "compilerOptions": {
+        "target": "es2015"
+    }
+   }
diff --git a/samples/charts/category-chart/custom-selection/src/config/tsconfig.app.json b/samples/charts/category-chart/custom-selection/src/config/tsconfig.app.json
new file mode 100644
index 000000000..f722e3fe4
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/config/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "baseUrl": "./",
+    "types": []
+  },
+  "files": [
+    "../main.ts",
+    "../polyfills.ts"
+  ]
+}
diff --git a/samples/charts/category-chart/custom-selection/src/config/tsconfig.base.json b/samples/charts/category-chart/custom-selection/src/config/tsconfig.base.json
new file mode 100644
index 000000000..f5ad4b8b7
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/config/tsconfig.base.json
@@ -0,0 +1,23 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "importHelpers": true,
+    "module": "es2020",
+    "outDir": "../../dist/out-tsc",
+    "sourceMap": false,
+    "declaration": false,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "downlevelIteration": true, // required for excel library
+    "target": "es2015",
+    "typeRoots": [
+      "../../node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+}
diff --git a/samples/charts/category-chart/custom-selection/src/config/tsconfig.spec.json b/samples/charts/category-chart/custom-selection/src/config/tsconfig.spec.json
new file mode 100644
index 000000000..6eb8c055c
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/config/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "baseUrl": "./",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "../test.ts",
+    "../polyfills.ts"
+  ],
+  "include": [
+    "../**/*.spec.ts",
+    "../**/*.d.ts"
+  ]
+}
diff --git a/samples/charts/category-chart/custom-selection/src/config/tsconfig.worker.json b/samples/charts/category-chart/custom-selection/src/config/tsconfig.worker.json
new file mode 100644
index 000000000..bc0e98f11
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/config/tsconfig.worker.json
@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/worker",
+    "lib": [
+      "es2018",
+      "DOM"
+    ],
+    "types": []
+  },
+  "include": [
+    "../**/*Worker.ts"
+  ]
+}
diff --git a/samples/charts/category-chart/custom-selection/src/environments/environment.prod.ts b/samples/charts/category-chart/custom-selection/src/environments/environment.prod.ts
new file mode 100644
index 000000000..3612073bc
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/samples/charts/category-chart/custom-selection/src/environments/environment.ts b/samples/charts/category-chart/custom-selection/src/environments/environment.ts
new file mode 100644
index 000000000..7b4f817ad
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
diff --git a/samples/charts/category-chart/custom-selection/src/index.html b/samples/charts/category-chart/custom-selection/src/index.html
new file mode 100644
index 000000000..7650dfb64
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>IgniteUI for Angular | Example | infragistics</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://static.infragistics.com/xplatform/images/browsers/angular.ico" rel="icon" type="image/x-icon" >
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
+  <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet">
+  <link href="https://static.infragistics.com/xplatform/css/themes/light/bootstrap.css" rel="stylesheet">
+  <link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+</head>
+
+<body class="igx-typography">
+  <app-root></app-root>
+</body>
+
+</html>
diff --git a/samples/charts/category-chart/custom-selection/src/main.ts b/samples/charts/category-chart/custom-selection/src/main.ts
new file mode 100644
index 000000000..ec9adcd4a
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/main.ts
@@ -0,0 +1,15 @@
+// tslint:disable:no-string-literal
+import "./polyfills";
+import { enableProdMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app.module";
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
+  // ensure Angular destroys itself on hot reloads.
+  if (window["ngRef"]) {
+    window["ngRef"].destroy();
+  }
+  window["ngRef"] = ref;
+
+  // otherwise, log the boot error
+}).catch(err => console.error(err));
diff --git a/samples/charts/category-chart/custom-selection/src/polyfills.ts b/samples/charts/category-chart/custom-selection/src/polyfills.ts
new file mode 100644
index 000000000..6c0321de4
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/polyfills.ts
@@ -0,0 +1,65 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+* BROWSER POLYFILLS
+*/
+
+// import "core-js/es7/object";
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+import "classlist.js";  // run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import "core-js/es6/reflect";
+
+/* Evergreen browsers require these. */
+// used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+// import "core-js/es7/reflect";
+
+/*
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ */
+import "web-animations-js";  // run `npm install --save web-animations-js`.
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import "hammerjs/hammer";
+import "zone.js/dist/zone";  // included with Angular CLI.
+
+/***************************************************************************************************
+ * @angular/animations polyfill
+ */
+if (!Element.prototype.matches) {
+    Element.prototype.matches = (Element.prototype as any).msMatchesSelector;
+}
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import "intl";  // Run `npm install --save intl`.
+// import "intl/locale-data/jsonp/de";
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import "intl/locale-data/jsonp/en";
diff --git a/samples/charts/category-chart/custom-selection/src/styles.scss b/samples/charts/category-chart/custom-selection/src/styles.scss
new file mode 100644
index 000000000..9b431e92d
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/styles.scss
@@ -0,0 +1,9 @@
+/* autoprefixer grid: on */
+html,
+body {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    margin: 0;
+    box-sizing: border-box;
+}
diff --git a/samples/charts/category-chart/custom-selection/src/typings.d.ts b/samples/charts/category-chart/custom-selection/src/typings.d.ts
new file mode 100644
index 000000000..ef5c7bd62
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/src/typings.d.ts
@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}
diff --git a/samples/charts/category-chart/custom-selection/tsconfig.json b/samples/charts/category-chart/custom-selection/tsconfig.json
new file mode 100644
index 000000000..6a01bab30
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/tsconfig.json
@@ -0,0 +1,20 @@
+/*
+  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
+  It is not intended to be used to perform a compilation.
+
+  To learn more about this file see: https://angular.io/config/solution-tsconfig.
+*/
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./src/config/tsconfig.app.json"
+    },
+    {
+      "path": "./src/config/tsconfig.worker.json"
+    },
+    {
+      "path": "./src/config/tsconfig.spec.json"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/samples/charts/category-chart/custom-selection/tslint.json b/samples/charts/category-chart/custom-selection/tslint.json
new file mode 100644
index 000000000..777c777d9
--- /dev/null
+++ b/samples/charts/category-chart/custom-selection/tslint.json
@@ -0,0 +1,31 @@
+{
+  "extends": "tslint:latest",
+  "rules": {
+    "deprecation": {
+      "severity": "warning"
+    },
+    "arrow-parens": false,
+    "indent": [true, "spaces"],
+    "interface-name": [true, "always-prefix"],
+    "max-classes-per-file": false,
+    "no-bitwise": false,
+    "no-console": false,
+    "no-empty": false,
+    "no-duplicate-imports": false,
+    "no-implicit-dependencies": false,
+    "no-object-literal-type-assertion": false,
+    "no-submodule-imports": [false],
+    "no-string-literal": false,
+    "no-trailing-whitespace": false,
+    "no-var-keyword": false,
+    "object-literal-sort-keys": false,
+    "only-arrow-functions": false,
+    "prefer-conditional-expression": false,
+    "prefer-const": false,
+    "prefer-for-of": false,
+    "prefer-object-spread": false,
+    "space-within-parens": false,
+    "trailing-comma": [true, {"multiline": "never", "singleline": "never"}],
+    "variable-name": [true, "allow-leading-underscore"]
+  }
+}
diff --git a/samples/charts/category-chart/format-specifiers/.stackblitzrc b/samples/charts/category-chart/format-specifiers/.stackblitzrc
new file mode 100644
index 000000000..65efbb4fd
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/.stackblitzrc
@@ -0,0 +1 @@
+{"installDependencies":true,"startCommand":"turbo start","env":{"ENABLE_CJS_IMPORTS":true}}
\ No newline at end of file
diff --git a/samples/charts/category-chart/format-specifiers/angular.json b/samples/charts/category-chart/format-specifiers/angular.json
new file mode 100644
index 000000000..9ec584c70
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/angular.json
@@ -0,0 +1,103 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "demo": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/demo",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/config/tsconfig.app.json",
+            "assets": [
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "demo:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "demo:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/config/tsconfig.spec.json",
+            "karmaConfig": "src/config/karma.conf.js",
+            "styles": [
+              "styles.css"
+            ],
+            "scripts": [],
+            "assets": [
+              "src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/config/tsconfig.app.json",
+              "src/config/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}
diff --git a/samples/charts/category-chart/format-specifiers/package.json b/samples/charts/category-chart/format-specifiers/package.json
new file mode 100644
index 000000000..9a999dc97
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/package.json
@@ -0,0 +1,46 @@
+{
+  "scripts": {
+    "ng": "ng",
+    "update": "ng update",
+    "start": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng serve -o",
+    "build": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng build --configuration production",
+    "lint": "ng lint"
+  },
+  "dependencies": {
+    "@angular/animations": "16.0.1",
+    "@angular/common": "16.0.1",
+    "@angular/compiler": "16.0.1",
+    "@angular/core": "16.0.1",
+    "@angular/forms": "16.0.1",
+    "@angular/platform-browser": "16.0.1",
+    "@angular/platform-browser-dynamic": "16.0.1",
+    "@types/hammerjs": "2.0.39",
+    "classlist.js": "1.1.20150312",
+    "core-js": "3.21.0",
+    "hammerjs": "2.0.8",
+    "igniteui-angular-charts": "16.1.2-beta.0",
+    "igniteui-angular-core": "16.1.2-beta.0",
+    "igniteui-angular-inputs": "16.1.2-beta.0",
+    "igniteui-angular-layouts": "16.1.2-beta.0",
+    "intl": "1.2.5",
+    "jszip": "3.7.1",
+    "rxjs": "6.6.7",
+    "tslib": "2.3.1",
+    "web-animations-js": "2.3.2",
+    "zone.js": "0.13.0"
+  },
+  "devDependencies": {
+    "@angular/cli": "16.0.1",
+    "@angular/compiler-cli": "16.0.1",
+    "@angular/language-service": "16.0.1",
+    "@angular-devkit/build-angular": "16.0.1",
+    "@types/node": "14.14.28",
+    "codelyzer": "6.0.2",
+    "jasmine-core": "3.7.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "sass.js": "0.11.1",
+    "tslint": "~6.1.3",
+    "ts-node": "9.1.1",
+    "typescript": "5.0.4"
+  }
+}
diff --git a/samples/charts/category-chart/format-specifiers/sandbox.config.json b/samples/charts/category-chart/format-specifiers/sandbox.config.json
new file mode 100644
index 000000000..07f53508e
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/charts/category-chart/format-specifiers/src/HighestGrossingMovies.ts b/samples/charts/category-chart/format-specifiers/src/HighestGrossingMovies.ts
new file mode 100644
index 000000000..1d92f1541
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/HighestGrossingMovies.ts
@@ -0,0 +1,51 @@
+export class HighestGrossingMoviesItem {
+    public constructor(init: Partial<HighestGrossingMoviesItem>) {
+        Object.assign(this, init);
+    }
+
+    public franchise: string;
+    public totalRevenue: number;
+    public highestGrossing: number;
+
+}
+export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
+    public constructor() {
+        super();
+        this.push(new HighestGrossingMoviesItem(
+        {
+            franchise: `Marvel Universe`,
+            totalRevenue: 22.55,
+            highestGrossing: 2.8
+        }));
+        this.push(new HighestGrossingMoviesItem(
+        {
+            franchise: `Star Wars`,
+            totalRevenue: 10.32,
+            highestGrossing: 2.07
+        }));
+        this.push(new HighestGrossingMoviesItem(
+        {
+            franchise: `Harry Potter`,
+            totalRevenue: 9.19,
+            highestGrossing: 1.34
+        }));
+        this.push(new HighestGrossingMoviesItem(
+        {
+            franchise: `Avengers`,
+            totalRevenue: 7.76,
+            highestGrossing: 2.8
+        }));
+        this.push(new HighestGrossingMoviesItem(
+        {
+            franchise: `Spider Man`,
+            totalRevenue: 7.22,
+            highestGrossing: 1.28
+        }));
+        this.push(new HighestGrossingMoviesItem(
+        {
+            franchise: `James Bond`,
+            totalRevenue: 7.12,
+            highestGrossing: 1.11
+        }));
+    }
+}
diff --git a/samples/charts/category-chart/format-specifiers/src/app.component.html b/samples/charts/category-chart/format-specifiers/src/app.component.html
new file mode 100644
index 000000000..47f4172f9
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/app.component.html
@@ -0,0 +1,28 @@
+<div class="container vertical sample">
+  <div class="legend-title">
+      Highest Grossing Movie Franchises
+  </div>
+  <div class="legend">
+      <igx-data-legend
+      [target]="chart"
+      valueFormatMode="Currency"
+      valueFormatString="${0} Billion"
+      name="Legend"
+      #legend>
+      </igx-data-legend>
+  </div>
+  <div class="container fill">
+      <igx-category-chart
+      name="chart"
+      #chart
+      [dataSource]="highestGrossingMovies"
+      chartType="Column"
+      isHorizontalZoomEnabled="false"
+      isVerticalZoomEnabled="false"
+      dataToolTipValueFormatMode="Currency"
+      dataToolTipValueFormatString="${0} Billion"
+      yAxisLabelFormat="{0}B"
+      [yAxisLabelFormatSpecifiers]="NumberFormatSpecifier1">
+      </igx-category-chart>
+  </div>
+</div>
diff --git a/samples/charts/category-chart/format-specifiers/src/app.component.scss b/samples/charts/category-chart/format-specifiers/src/app.component.scss
new file mode 100644
index 000000000..cbff781da
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/app.component.scss
@@ -0,0 +1,3 @@
+/* styles are loaded the Shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/
diff --git a/samples/charts/category-chart/format-specifiers/src/app.component.ts b/samples/charts/category-chart/format-specifiers/src/app.component.ts
new file mode 100644
index 000000000..537db7978
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/app.component.ts
@@ -0,0 +1,62 @@
+import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataLegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core';
+import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
+import { IgxDataLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
+import { IgxNumberFormatSpecifier } from 'igniteui-angular-core';
+
+@Component({
+    selector: "app-root",
+    styleUrls: ["./app.component.scss"],
+    templateUrl: "./app.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AppComponent {
+
+    public constructor(private _detector: ChangeDetectorRef) {
+
+    }
+
+    @ViewChild("legend", { static: true } )
+    private legend: IgxDataLegendComponent
+    @ViewChild("chart", { static: true } )
+    private chart: IgxCategoryChartComponent
+    private _numberFormatSpecifier1: IgxNumberFormatSpecifier[] | null = null;
+    public get numberFormatSpecifier1(): IgxNumberFormatSpecifier[] {
+        if (this._numberFormatSpecifier1 == null)
+        {
+            let numberFormatSpecifier1: IgxNumberFormatSpecifier[] = [];
+            var numberFormatSpecifier2 = new IgxNumberFormatSpecifier();
+            numberFormatSpecifier2.style = "currency";
+            numberFormatSpecifier2.currency = "USD";
+            numberFormatSpecifier2.currencyDisplay = "symbol";
+            numberFormatSpecifier2.minimumFractionDigits = 0;
+
+            numberFormatSpecifier1.push(numberFormatSpecifier2)
+            this._numberFormatSpecifier1 = numberFormatSpecifier1;
+        }
+        return this._numberFormatSpecifier1;
+    }
+
+    private _highestGrossingMovies: HighestGrossingMovies = null;
+    public get highestGrossingMovies(): HighestGrossingMovies {
+        if (this._highestGrossingMovies == null)
+        {
+            this._highestGrossingMovies = new HighestGrossingMovies();
+        }
+        return this._highestGrossingMovies;
+    }
+
+    private _componentRenderer: ComponentRenderer = null;
+    public get renderer(): ComponentRenderer {
+        if (this._componentRenderer == null) {
+            this._componentRenderer = new ComponentRenderer();
+            var context = this._componentRenderer.context;
+            PropertyEditorPanelDescriptionModule.register(context);
+            DataLegendDescriptionModule.register(context);
+            CategoryChartDescriptionModule.register(context);
+        }
+        return this._componentRenderer;
+    }
+
+}
+
diff --git a/samples/charts/category-chart/format-specifiers/src/app.module.ts b/samples/charts/category-chart/format-specifiers/src/app.module.ts
new file mode 100644
index 000000000..fb76caf81
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/app.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { AppComponent } from "./app.component";
+
+import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts';
+import { IgxDataLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts';
+
+@NgModule({
+  bootstrap: [AppComponent],
+  declarations: [
+    AppComponent
+],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    CommonModule,
+    FormsModule,
+    IgxPropertyEditorPanelModule,
+    IgxDataLegendModule,
+    IgxCategoryChartModule
+],
+  providers: [],
+  schemas: []
+})
+export class AppModule {}
diff --git a/samples/charts/category-chart/format-specifiers/src/config/tsconfig-es5.app.json b/samples/charts/category-chart/format-specifiers/src/config/tsconfig-es5.app.json
new file mode 100644
index 000000000..7e5d23397
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/config/tsconfig-es5.app.json
@@ -0,0 +1,6 @@
+{
+    "extends": "./tsconfig.app.json",
+    "compilerOptions": {
+        "target": "es2015"
+    }
+   }
diff --git a/samples/charts/category-chart/format-specifiers/src/config/tsconfig.app.json b/samples/charts/category-chart/format-specifiers/src/config/tsconfig.app.json
new file mode 100644
index 000000000..f722e3fe4
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/config/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "baseUrl": "./",
+    "types": []
+  },
+  "files": [
+    "../main.ts",
+    "../polyfills.ts"
+  ]
+}
diff --git a/samples/charts/category-chart/format-specifiers/src/config/tsconfig.base.json b/samples/charts/category-chart/format-specifiers/src/config/tsconfig.base.json
new file mode 100644
index 000000000..f5ad4b8b7
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/config/tsconfig.base.json
@@ -0,0 +1,23 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "importHelpers": true,
+    "module": "es2020",
+    "outDir": "../../dist/out-tsc",
+    "sourceMap": false,
+    "declaration": false,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "downlevelIteration": true, // required for excel library
+    "target": "es2015",
+    "typeRoots": [
+      "../../node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+}
diff --git a/samples/charts/category-chart/format-specifiers/src/config/tsconfig.spec.json b/samples/charts/category-chart/format-specifiers/src/config/tsconfig.spec.json
new file mode 100644
index 000000000..6eb8c055c
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/config/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "baseUrl": "./",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "../test.ts",
+    "../polyfills.ts"
+  ],
+  "include": [
+    "../**/*.spec.ts",
+    "../**/*.d.ts"
+  ]
+}
diff --git a/samples/charts/category-chart/format-specifiers/src/config/tsconfig.worker.json b/samples/charts/category-chart/format-specifiers/src/config/tsconfig.worker.json
new file mode 100644
index 000000000..bc0e98f11
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/config/tsconfig.worker.json
@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/worker",
+    "lib": [
+      "es2018",
+      "DOM"
+    ],
+    "types": []
+  },
+  "include": [
+    "../**/*Worker.ts"
+  ]
+}
diff --git a/samples/charts/category-chart/format-specifiers/src/environments/environment.prod.ts b/samples/charts/category-chart/format-specifiers/src/environments/environment.prod.ts
new file mode 100644
index 000000000..3612073bc
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/samples/charts/category-chart/format-specifiers/src/environments/environment.ts b/samples/charts/category-chart/format-specifiers/src/environments/environment.ts
new file mode 100644
index 000000000..7b4f817ad
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
diff --git a/samples/charts/category-chart/format-specifiers/src/index.html b/samples/charts/category-chart/format-specifiers/src/index.html
new file mode 100644
index 000000000..7650dfb64
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>IgniteUI for Angular | Example | infragistics</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://static.infragistics.com/xplatform/images/browsers/angular.ico" rel="icon" type="image/x-icon" >
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
+  <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet">
+  <link href="https://static.infragistics.com/xplatform/css/themes/light/bootstrap.css" rel="stylesheet">
+  <link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+</head>
+
+<body class="igx-typography">
+  <app-root></app-root>
+</body>
+
+</html>
diff --git a/samples/charts/category-chart/format-specifiers/src/main.ts b/samples/charts/category-chart/format-specifiers/src/main.ts
new file mode 100644
index 000000000..ec9adcd4a
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/main.ts
@@ -0,0 +1,15 @@
+// tslint:disable:no-string-literal
+import "./polyfills";
+import { enableProdMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app.module";
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
+  // ensure Angular destroys itself on hot reloads.
+  if (window["ngRef"]) {
+    window["ngRef"].destroy();
+  }
+  window["ngRef"] = ref;
+
+  // otherwise, log the boot error
+}).catch(err => console.error(err));
diff --git a/samples/charts/category-chart/format-specifiers/src/polyfills.ts b/samples/charts/category-chart/format-specifiers/src/polyfills.ts
new file mode 100644
index 000000000..6c0321de4
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/polyfills.ts
@@ -0,0 +1,65 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+* BROWSER POLYFILLS
+*/
+
+// import "core-js/es7/object";
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+import "classlist.js";  // run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import "core-js/es6/reflect";
+
+/* Evergreen browsers require these. */
+// used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+// import "core-js/es7/reflect";
+
+/*
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ */
+import "web-animations-js";  // run `npm install --save web-animations-js`.
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import "hammerjs/hammer";
+import "zone.js/dist/zone";  // included with Angular CLI.
+
+/***************************************************************************************************
+ * @angular/animations polyfill
+ */
+if (!Element.prototype.matches) {
+    Element.prototype.matches = (Element.prototype as any).msMatchesSelector;
+}
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import "intl";  // Run `npm install --save intl`.
+// import "intl/locale-data/jsonp/de";
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import "intl/locale-data/jsonp/en";
diff --git a/samples/charts/category-chart/format-specifiers/src/styles.scss b/samples/charts/category-chart/format-specifiers/src/styles.scss
new file mode 100644
index 000000000..9b431e92d
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/styles.scss
@@ -0,0 +1,9 @@
+/* autoprefixer grid: on */
+html,
+body {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    margin: 0;
+    box-sizing: border-box;
+}
diff --git a/samples/charts/category-chart/format-specifiers/src/typings.d.ts b/samples/charts/category-chart/format-specifiers/src/typings.d.ts
new file mode 100644
index 000000000..ef5c7bd62
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/src/typings.d.ts
@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}
diff --git a/samples/charts/category-chart/format-specifiers/tsconfig.json b/samples/charts/category-chart/format-specifiers/tsconfig.json
new file mode 100644
index 000000000..6a01bab30
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/tsconfig.json
@@ -0,0 +1,20 @@
+/*
+  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
+  It is not intended to be used to perform a compilation.
+
+  To learn more about this file see: https://angular.io/config/solution-tsconfig.
+*/
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./src/config/tsconfig.app.json"
+    },
+    {
+      "path": "./src/config/tsconfig.worker.json"
+    },
+    {
+      "path": "./src/config/tsconfig.spec.json"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/samples/charts/category-chart/format-specifiers/tslint.json b/samples/charts/category-chart/format-specifiers/tslint.json
new file mode 100644
index 000000000..777c777d9
--- /dev/null
+++ b/samples/charts/category-chart/format-specifiers/tslint.json
@@ -0,0 +1,31 @@
+{
+  "extends": "tslint:latest",
+  "rules": {
+    "deprecation": {
+      "severity": "warning"
+    },
+    "arrow-parens": false,
+    "indent": [true, "spaces"],
+    "interface-name": [true, "always-prefix"],
+    "max-classes-per-file": false,
+    "no-bitwise": false,
+    "no-console": false,
+    "no-empty": false,
+    "no-duplicate-imports": false,
+    "no-implicit-dependencies": false,
+    "no-object-literal-type-assertion": false,
+    "no-submodule-imports": [false],
+    "no-string-literal": false,
+    "no-trailing-whitespace": false,
+    "no-var-keyword": false,
+    "object-literal-sort-keys": false,
+    "only-arrow-functions": false,
+    "prefer-conditional-expression": false,
+    "prefer-const": false,
+    "prefer-for-of": false,
+    "prefer-object-spread": false,
+    "space-within-parens": false,
+    "trailing-comma": [true, {"multiline": "never", "singleline": "never"}],
+    "variable-name": [true, "allow-leading-underscore"]
+  }
+}
diff --git a/samples/charts/data-chart/format-specifiers/.stackblitzrc b/samples/charts/data-chart/format-specifiers/.stackblitzrc
new file mode 100644
index 000000000..65efbb4fd
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/.stackblitzrc
@@ -0,0 +1 @@
+{"installDependencies":true,"startCommand":"turbo start","env":{"ENABLE_CJS_IMPORTS":true}}
\ No newline at end of file
diff --git a/samples/charts/data-chart/format-specifiers/angular.json b/samples/charts/data-chart/format-specifiers/angular.json
new file mode 100644
index 000000000..9ec584c70
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/angular.json
@@ -0,0 +1,103 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "demo": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/demo",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/config/tsconfig.app.json",
+            "assets": [
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "demo:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "demo:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/config/tsconfig.spec.json",
+            "karmaConfig": "src/config/karma.conf.js",
+            "styles": [
+              "styles.css"
+            ],
+            "scripts": [],
+            "assets": [
+              "src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/config/tsconfig.app.json",
+              "src/config/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}
diff --git a/samples/charts/data-chart/format-specifiers/package.json b/samples/charts/data-chart/format-specifiers/package.json
new file mode 100644
index 000000000..28a1138db
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/package.json
@@ -0,0 +1,44 @@
+{
+  "scripts": {
+    "ng": "ng",
+    "update": "ng update",
+    "start": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng serve -o",
+    "build": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng build --configuration production",
+    "lint": "ng lint"
+  },
+  "dependencies": {
+    "@angular/animations": "16.0.1",
+    "@angular/common": "16.0.1",
+    "@angular/compiler": "16.0.1",
+    "@angular/core": "16.0.1",
+    "@angular/forms": "16.0.1",
+    "@angular/platform-browser": "16.0.1",
+    "@angular/platform-browser-dynamic": "16.0.1",
+    "@types/hammerjs": "2.0.39",
+    "classlist.js": "1.1.20150312",
+    "core-js": "3.21.0",
+    "hammerjs": "2.0.8",
+    "igniteui-angular-charts": "16.1.2-beta.0",
+    "igniteui-angular-core": "16.1.2-beta.0",
+    "intl": "1.2.5",
+    "jszip": "3.7.1",
+    "rxjs": "6.6.7",
+    "tslib": "2.3.1",
+    "web-animations-js": "2.3.2",
+    "zone.js": "0.13.0"
+  },
+  "devDependencies": {
+    "@angular/cli": "16.0.1",
+    "@angular/compiler-cli": "16.0.1",
+    "@angular/language-service": "16.0.1",
+    "@angular-devkit/build-angular": "16.0.1",
+    "@types/node": "14.14.28",
+    "codelyzer": "6.0.2",
+    "jasmine-core": "3.7.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "sass.js": "0.11.1",
+    "tslint": "~6.1.3",
+    "ts-node": "9.1.1",
+    "typescript": "5.0.4"
+  }
+}
diff --git a/samples/charts/data-chart/format-specifiers/sandbox.config.json b/samples/charts/data-chart/format-specifiers/sandbox.config.json
new file mode 100644
index 000000000..07f53508e
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/charts/data-chart/format-specifiers/src/HighestGrossingMovies.ts b/samples/charts/data-chart/format-specifiers/src/HighestGrossingMovies.ts
new file mode 100644
index 000000000..1d92f1541
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/HighestGrossingMovies.ts
@@ -0,0 +1,51 @@
+export class HighestGrossingMoviesItem {
+    public constructor(init: Partial<HighestGrossingMoviesItem>) {
+        Object.assign(this, init);
+    }
+
+    public franchise: string;
+    public totalRevenue: number;
+    public highestGrossing: number;
+
+}
+export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
+    public constructor() {
+        super();
+        this.push(new HighestGrossingMoviesItem(
+        {
+            franchise: `Marvel Universe`,
+            totalRevenue: 22.55,
+            highestGrossing: 2.8
+        }));
+        this.push(new HighestGrossingMoviesItem(
+        {
+            franchise: `Star Wars`,
+            totalRevenue: 10.32,
+            highestGrossing: 2.07
+        }));
+        this.push(new HighestGrossingMoviesItem(
+        {
+            franchise: `Harry Potter`,
+            totalRevenue: 9.19,
+            highestGrossing: 1.34
+        }));
+        this.push(new HighestGrossingMoviesItem(
+        {
+            franchise: `Avengers`,
+            totalRevenue: 7.76,
+            highestGrossing: 2.8
+        }));
+        this.push(new HighestGrossingMoviesItem(
+        {
+            franchise: `Spider Man`,
+            totalRevenue: 7.22,
+            highestGrossing: 1.28
+        }));
+        this.push(new HighestGrossingMoviesItem(
+        {
+            franchise: `James Bond`,
+            totalRevenue: 7.12,
+            highestGrossing: 1.11
+        }));
+    }
+}
diff --git a/samples/charts/data-chart/format-specifiers/src/app.component.html b/samples/charts/data-chart/format-specifiers/src/app.component.html
new file mode 100644
index 000000000..a5e48b04f
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/app.component.html
@@ -0,0 +1,65 @@
+<div class="container vertical sample">
+  <div class="legend-title">
+      Highest Grossing Movie Franchises
+  </div>
+  <div class="legend">
+      <igx-data-legend
+      name="Legend"
+      #legend
+      [target]="chart"
+      valueFormatMode="Currency"
+      valueFormatString="${0} Billion">
+      </igx-data-legend>
+  </div>
+  <div class="container fill">
+      <igx-data-chart
+      name="chart"
+      #chart>
+          <igx-category-y-axis
+          name="yAxis"
+          #yAxis
+          label="franchise"
+          useEnhancedIntervalManagement="true"
+          enhancedIntervalPreferMoreCategoryLabels="true"
+          [dataSource]="highestGrossingMovies"
+          isInverted="true"
+          gap="0.5"
+          overlap="-0.1">
+          </igx-category-y-axis>
+          <igx-numeric-x-axis
+          name="xAxis"
+          #xAxis
+          title="Billions of U.S. Dollars"
+          labelFormat="{0}B"
+          abbreviateLargeNumbers="false"
+          [labelFormatSpecifiers]="NumberFormatSpecifier1">
+          </igx-numeric-x-axis>
+          <igx-bar-series
+          name="BarSeries1"
+          #barSeries1
+          [xAxis]="xAxis"
+          [yAxis]="yAxis"
+          title="Total Revenue of Franchise"
+          valueMemberPath="totalRevenue"
+          [dataSource]="highestGrossingMovies"
+          showDefaultTooltip="true">
+          </igx-bar-series>
+          <igx-bar-series
+          name="BarSeries2"
+          #barSeries2
+          [xAxis]="xAxis"
+          [yAxis]="yAxis"
+          title="Highest Grossing Movie in Series"
+          valueMemberPath="highestGrossing"
+          [dataSource]="highestGrossingMovies"
+          showDefaultTooltip="true">
+          </igx-bar-series>
+          <igx-data-tool-tip-layer
+          name="Tooltips"
+          #tooltips
+          valueFormatMode="Currency"
+          valueFormatString="${0} Billion">
+          </igx-data-tool-tip-layer>
+      </igx-data-chart>
+  </div>
+</div>
diff --git a/samples/charts/data-chart/format-specifiers/src/app.component.scss b/samples/charts/data-chart/format-specifiers/src/app.component.scss
new file mode 100644
index 000000000..cbff781da
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/app.component.scss
@@ -0,0 +1,3 @@
+/* styles are loaded the Shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/
diff --git a/samples/charts/data-chart/format-specifiers/src/app.component.ts b/samples/charts/data-chart/format-specifiers/src/app.component.ts
new file mode 100644
index 000000000..fc0fed04e
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/app.component.ts
@@ -0,0 +1,59 @@
+import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
+import { IgxDataLegendComponent, IgxDataChartComponent, IgxCategoryYAxisComponent, IgxNumericXAxisComponent, IgxBarSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';
+import { IgxNumberFormatSpecifier } from 'igniteui-angular-core';
+
+@Component({
+    selector: "app-root",
+    styleUrls: ["./app.component.scss"],
+    templateUrl: "./app.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AppComponent {
+
+    public constructor(private _detector: ChangeDetectorRef) {
+
+    }
+
+    @ViewChild("legend", { static: true } )
+    private legend: IgxDataLegendComponent
+    @ViewChild("chart", { static: true } )
+    private chart: IgxDataChartComponent
+    @ViewChild("yAxis", { static: true } )
+    private yAxis: IgxCategoryYAxisComponent
+    @ViewChild("xAxis", { static: true } )
+    private xAxis: IgxNumericXAxisComponent
+    private _numberFormatSpecifier1: IgxNumberFormatSpecifier[] | null = null;
+    public get numberFormatSpecifier1(): IgxNumberFormatSpecifier[] {
+        if (this._numberFormatSpecifier1 == null)
+        {
+            let numberFormatSpecifier1: IgxNumberFormatSpecifier[] = [];
+            var numberFormatSpecifier2 = new IgxNumberFormatSpecifier();
+            numberFormatSpecifier2.style = "currency";
+            numberFormatSpecifier2.currency = "USD";
+            numberFormatSpecifier2.currencyDisplay = "symbol";
+            numberFormatSpecifier2.minimumFractionDigits = 0;
+
+            numberFormatSpecifier1.push(numberFormatSpecifier2)
+            this._numberFormatSpecifier1 = numberFormatSpecifier1;
+        }
+        return this._numberFormatSpecifier1;
+    }
+    @ViewChild("barSeries1", { static: true } )
+    private barSeries1: IgxBarSeriesComponent
+    @ViewChild("barSeries2", { static: true } )
+    private barSeries2: IgxBarSeriesComponent
+    @ViewChild("tooltips", { static: true } )
+    private tooltips: IgxDataToolTipLayerComponent
+
+    private _highestGrossingMovies: HighestGrossingMovies = null;
+    public get highestGrossingMovies(): HighestGrossingMovies {
+        if (this._highestGrossingMovies == null)
+        {
+            this._highestGrossingMovies = new HighestGrossingMovies();
+        }
+        return this._highestGrossingMovies;
+    }
+
+}
+
diff --git a/samples/charts/data-chart/format-specifiers/src/app.module.ts b/samples/charts/data-chart/format-specifiers/src/app.module.ts
new file mode 100644
index 000000000..2eac7194f
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/app.module.ts
@@ -0,0 +1,31 @@
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { AppComponent } from "./app.component";
+
+import { IgxDataLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartVerticalCategoryModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts';
+
+@NgModule({
+  bootstrap: [AppComponent],
+  declarations: [
+    AppComponent
+],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    CommonModule,
+    FormsModule,
+    IgxDataLegendModule,
+    IgxDataChartCoreModule,
+    IgxDataChartCategoryCoreModule,
+    IgxDataChartCategoryModule,
+    IgxDataChartInteractivityModule,
+    IgxDataChartVerticalCategoryModule,
+    IgxDataChartAnnotationModule
+],
+  providers: [],
+  schemas: []
+})
+export class AppModule {}
diff --git a/samples/charts/data-chart/format-specifiers/src/config/tsconfig-es5.app.json b/samples/charts/data-chart/format-specifiers/src/config/tsconfig-es5.app.json
new file mode 100644
index 000000000..7e5d23397
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/config/tsconfig-es5.app.json
@@ -0,0 +1,6 @@
+{
+    "extends": "./tsconfig.app.json",
+    "compilerOptions": {
+        "target": "es2015"
+    }
+   }
diff --git a/samples/charts/data-chart/format-specifiers/src/config/tsconfig.app.json b/samples/charts/data-chart/format-specifiers/src/config/tsconfig.app.json
new file mode 100644
index 000000000..f722e3fe4
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/config/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "baseUrl": "./",
+    "types": []
+  },
+  "files": [
+    "../main.ts",
+    "../polyfills.ts"
+  ]
+}
diff --git a/samples/charts/data-chart/format-specifiers/src/config/tsconfig.base.json b/samples/charts/data-chart/format-specifiers/src/config/tsconfig.base.json
new file mode 100644
index 000000000..f5ad4b8b7
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/config/tsconfig.base.json
@@ -0,0 +1,23 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "importHelpers": true,
+    "module": "es2020",
+    "outDir": "../../dist/out-tsc",
+    "sourceMap": false,
+    "declaration": false,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "downlevelIteration": true, // required for excel library
+    "target": "es2015",
+    "typeRoots": [
+      "../../node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+}
diff --git a/samples/charts/data-chart/format-specifiers/src/config/tsconfig.spec.json b/samples/charts/data-chart/format-specifiers/src/config/tsconfig.spec.json
new file mode 100644
index 000000000..6eb8c055c
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/config/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "baseUrl": "./",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "../test.ts",
+    "../polyfills.ts"
+  ],
+  "include": [
+    "../**/*.spec.ts",
+    "../**/*.d.ts"
+  ]
+}
diff --git a/samples/charts/data-chart/format-specifiers/src/config/tsconfig.worker.json b/samples/charts/data-chart/format-specifiers/src/config/tsconfig.worker.json
new file mode 100644
index 000000000..bc0e98f11
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/config/tsconfig.worker.json
@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/worker",
+    "lib": [
+      "es2018",
+      "DOM"
+    ],
+    "types": []
+  },
+  "include": [
+    "../**/*Worker.ts"
+  ]
+}
diff --git a/samples/charts/data-chart/format-specifiers/src/environments/environment.prod.ts b/samples/charts/data-chart/format-specifiers/src/environments/environment.prod.ts
new file mode 100644
index 000000000..3612073bc
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/samples/charts/data-chart/format-specifiers/src/environments/environment.ts b/samples/charts/data-chart/format-specifiers/src/environments/environment.ts
new file mode 100644
index 000000000..7b4f817ad
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
diff --git a/samples/charts/data-chart/format-specifiers/src/index.html b/samples/charts/data-chart/format-specifiers/src/index.html
new file mode 100644
index 000000000..7650dfb64
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>IgniteUI for Angular | Example | infragistics</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://static.infragistics.com/xplatform/images/browsers/angular.ico" rel="icon" type="image/x-icon" >
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
+  <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet">
+  <link href="https://static.infragistics.com/xplatform/css/themes/light/bootstrap.css" rel="stylesheet">
+  <link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+</head>
+
+<body class="igx-typography">
+  <app-root></app-root>
+</body>
+
+</html>
diff --git a/samples/charts/data-chart/format-specifiers/src/main.ts b/samples/charts/data-chart/format-specifiers/src/main.ts
new file mode 100644
index 000000000..ec9adcd4a
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/main.ts
@@ -0,0 +1,15 @@
+// tslint:disable:no-string-literal
+import "./polyfills";
+import { enableProdMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app.module";
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
+  // ensure Angular destroys itself on hot reloads.
+  if (window["ngRef"]) {
+    window["ngRef"].destroy();
+  }
+  window["ngRef"] = ref;
+
+  // otherwise, log the boot error
+}).catch(err => console.error(err));
diff --git a/samples/charts/data-chart/format-specifiers/src/polyfills.ts b/samples/charts/data-chart/format-specifiers/src/polyfills.ts
new file mode 100644
index 000000000..6c0321de4
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/polyfills.ts
@@ -0,0 +1,65 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+* BROWSER POLYFILLS
+*/
+
+// import "core-js/es7/object";
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+import "classlist.js";  // run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import "core-js/es6/reflect";
+
+/* Evergreen browsers require these. */
+// used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+// import "core-js/es7/reflect";
+
+/*
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ */
+import "web-animations-js";  // run `npm install --save web-animations-js`.
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import "hammerjs/hammer";
+import "zone.js/dist/zone";  // included with Angular CLI.
+
+/***************************************************************************************************
+ * @angular/animations polyfill
+ */
+if (!Element.prototype.matches) {
+    Element.prototype.matches = (Element.prototype as any).msMatchesSelector;
+}
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import "intl";  // Run `npm install --save intl`.
+// import "intl/locale-data/jsonp/de";
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import "intl/locale-data/jsonp/en";
diff --git a/samples/charts/data-chart/format-specifiers/src/styles.scss b/samples/charts/data-chart/format-specifiers/src/styles.scss
new file mode 100644
index 000000000..9b431e92d
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/styles.scss
@@ -0,0 +1,9 @@
+/* autoprefixer grid: on */
+html,
+body {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    margin: 0;
+    box-sizing: border-box;
+}
diff --git a/samples/charts/data-chart/format-specifiers/src/typings.d.ts b/samples/charts/data-chart/format-specifiers/src/typings.d.ts
new file mode 100644
index 000000000..ef5c7bd62
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/src/typings.d.ts
@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}
diff --git a/samples/charts/data-chart/format-specifiers/tsconfig.json b/samples/charts/data-chart/format-specifiers/tsconfig.json
new file mode 100644
index 000000000..6a01bab30
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/tsconfig.json
@@ -0,0 +1,20 @@
+/*
+  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
+  It is not intended to be used to perform a compilation.
+
+  To learn more about this file see: https://angular.io/config/solution-tsconfig.
+*/
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./src/config/tsconfig.app.json"
+    },
+    {
+      "path": "./src/config/tsconfig.worker.json"
+    },
+    {
+      "path": "./src/config/tsconfig.spec.json"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/samples/charts/data-chart/format-specifiers/tslint.json b/samples/charts/data-chart/format-specifiers/tslint.json
new file mode 100644
index 000000000..777c777d9
--- /dev/null
+++ b/samples/charts/data-chart/format-specifiers/tslint.json
@@ -0,0 +1,31 @@
+{
+  "extends": "tslint:latest",
+  "rules": {
+    "deprecation": {
+      "severity": "warning"
+    },
+    "arrow-parens": false,
+    "indent": [true, "spaces"],
+    "interface-name": [true, "always-prefix"],
+    "max-classes-per-file": false,
+    "no-bitwise": false,
+    "no-console": false,
+    "no-empty": false,
+    "no-duplicate-imports": false,
+    "no-implicit-dependencies": false,
+    "no-object-literal-type-assertion": false,
+    "no-submodule-imports": [false],
+    "no-string-literal": false,
+    "no-trailing-whitespace": false,
+    "no-var-keyword": false,
+    "object-literal-sort-keys": false,
+    "only-arrow-functions": false,
+    "prefer-conditional-expression": false,
+    "prefer-const": false,
+    "prefer-for-of": false,
+    "prefer-object-spread": false,
+    "space-within-parens": false,
+    "trailing-comma": [true, {"multiline": "never", "singleline": "never"}],
+    "variable-name": [true, "allow-leading-underscore"]
+  }
+}
diff --git a/samples/charts/financial-chart/format-specifiers/.stackblitzrc b/samples/charts/financial-chart/format-specifiers/.stackblitzrc
new file mode 100644
index 000000000..65efbb4fd
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/.stackblitzrc
@@ -0,0 +1 @@
+{"installDependencies":true,"startCommand":"turbo start","env":{"ENABLE_CJS_IMPORTS":true}}
\ No newline at end of file
diff --git a/samples/charts/financial-chart/format-specifiers/angular.json b/samples/charts/financial-chart/format-specifiers/angular.json
new file mode 100644
index 000000000..9ec584c70
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/angular.json
@@ -0,0 +1,103 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "demo": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/demo",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/config/tsconfig.app.json",
+            "assets": [
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "demo:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "demo:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/config/tsconfig.spec.json",
+            "karmaConfig": "src/config/karma.conf.js",
+            "styles": [
+              "styles.css"
+            ],
+            "scripts": [],
+            "assets": [
+              "src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/config/tsconfig.app.json",
+              "src/config/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}
diff --git a/samples/charts/financial-chart/format-specifiers/package.json b/samples/charts/financial-chart/format-specifiers/package.json
new file mode 100644
index 000000000..28a1138db
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/package.json
@@ -0,0 +1,44 @@
+{
+  "scripts": {
+    "ng": "ng",
+    "update": "ng update",
+    "start": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng serve -o",
+    "build": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng build --configuration production",
+    "lint": "ng lint"
+  },
+  "dependencies": {
+    "@angular/animations": "16.0.1",
+    "@angular/common": "16.0.1",
+    "@angular/compiler": "16.0.1",
+    "@angular/core": "16.0.1",
+    "@angular/forms": "16.0.1",
+    "@angular/platform-browser": "16.0.1",
+    "@angular/platform-browser-dynamic": "16.0.1",
+    "@types/hammerjs": "2.0.39",
+    "classlist.js": "1.1.20150312",
+    "core-js": "3.21.0",
+    "hammerjs": "2.0.8",
+    "igniteui-angular-charts": "16.1.2-beta.0",
+    "igniteui-angular-core": "16.1.2-beta.0",
+    "intl": "1.2.5",
+    "jszip": "3.7.1",
+    "rxjs": "6.6.7",
+    "tslib": "2.3.1",
+    "web-animations-js": "2.3.2",
+    "zone.js": "0.13.0"
+  },
+  "devDependencies": {
+    "@angular/cli": "16.0.1",
+    "@angular/compiler-cli": "16.0.1",
+    "@angular/language-service": "16.0.1",
+    "@angular-devkit/build-angular": "16.0.1",
+    "@types/node": "14.14.28",
+    "codelyzer": "6.0.2",
+    "jasmine-core": "3.7.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "sass.js": "0.11.1",
+    "tslint": "~6.1.3",
+    "ts-node": "9.1.1",
+    "typescript": "5.0.4"
+  }
+}
diff --git a/samples/charts/financial-chart/format-specifiers/sandbox.config.json b/samples/charts/financial-chart/format-specifiers/sandbox.config.json
new file mode 100644
index 000000000..07f53508e
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/charts/financial-chart/format-specifiers/src/MultipleStocks.ts b/samples/charts/financial-chart/format-specifiers/src/MultipleStocks.ts
new file mode 100644
index 000000000..3688676b4
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/MultipleStocks.ts
@@ -0,0 +1,107 @@
+//begin async data
+export class MultipleStocks extends Array<Array<StockItem>> {
+    public static async fetch(): Promise<MultipleStocks> {
+        const dataSources: any[] = [
+          //await this.getAmazonStock(),
+          await this.getGoogleStock(),
+          await this.getAmazonStock(),
+          //await this.getTeslaStock()
+        ];
+        return new Promise<MultipleStocks>((resolve, reject) => {
+        resolve(dataSources);
+        });
+    }
+
+    /** gets Amazon stock OHLC prices from a .JSON file */
+    public static async getAmazonStock(): Promise<StockItem[]> {
+      let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
+      let response = await fetch(url);
+      let jsonData = await response.json();
+      let stockData = this.convertData(jsonData);
+      // setting data intent for Series Title, e.g. FinancialChart usage
+      (stockData as any).__dataIntents = {
+        close: ["SeriesTitle/Amazon"]
+      };
+      // console.log("fetchAmazonStock: ", stockData.length);
+
+      return new Promise<StockItem[]>((resolve, reject) => {
+        resolve(stockData);
+      });
+    }
+
+    /** gets Tesla stock OHLC prices from a .JSON file */
+    public static async getTeslaStock(): Promise<StockItem[]> {
+      let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
+      let response = await fetch(url);
+      let jsonData = await response.json();
+      let stockData = this.convertData(jsonData);
+      // setting data intent for Series Title, e.g. FinancialChart usage
+      (stockData as any).__dataIntents = {
+        close: ["SeriesTitle/Tesla"]
+      };
+      return new Promise<StockItem[]>((resolve, reject) => {
+        resolve(stockData);
+      });
+    }
+
+    /** gets Microsoft stock OHLC prices from a .JSON file */
+    public static async getMicrosoftStock(): Promise<StockItem[]> {
+      let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
+      let response = await fetch(url);
+      let jsonData = await response.json();
+      let stockData = this.convertData(jsonData);
+      // setting data intent for Series Title, e.g. FinancialChart usage
+      (stockData as any).__dataIntents = {
+        close: ["SeriesTitle/Microsoft"]
+      };
+      return new Promise<StockItem[]>((resolve, reject) => {
+        resolve(stockData);
+      });
+    }
+
+    /** gets Google stock OHLC prices from a .JSON file */
+    public static async getGoogleStock(): Promise<StockItem[]> {
+      let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
+      let response = await fetch(url);
+      let jsonData = await response.json();
+      let stockData = this.convertData(jsonData);
+      // setting data intent for Series Title, e.g. FinancialChart usage
+      (stockData as any).__dataIntents = {
+        close: ["SeriesTitle/Google"]
+      };
+      return new Promise<StockItem[]>((resolve, reject) => {
+        resolve(stockData);
+      });
+    }
+
+    public static convertData(jsonData: any[]): StockItem[] {
+      let stockItems: StockItem[] = [];
+
+      for (let json of jsonData) {
+        let parts = json.date.split("-"); // "2020-01-01"
+        let item = new StockItem();
+        item.date = new Date(parts[0], parts[1], parts[2]);
+        item.open = json.open;
+        item.high = json.high;
+        item.low = json.low;
+        item.close = json.close;
+        item.volume = json.volume;
+        stockItems.push(item);
+
+      }
+
+      return stockItems;
+    }
+  }
+
+  export class StockItem {
+    public open?: number;
+    public close?: number;
+    public high?: number;
+    public low?: number;
+    public volume?: number;
+
+    public date?: Date;
+
+  }
+//end async data
\ No newline at end of file
diff --git a/samples/charts/financial-chart/format-specifiers/src/app.component.html b/samples/charts/financial-chart/format-specifiers/src/app.component.html
new file mode 100644
index 000000000..6b6154b9a
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/app.component.html
@@ -0,0 +1,32 @@
+<div class="container vertical sample">
+  <div class="legend">
+      <igx-data-legend
+      name="Legend"
+      #legend
+      [target]="chart"
+      includedColumns="Close, Change, Value"
+      excludedColumns="High, Low, Open, Volume"
+      labelDisplayMode="Hidden"
+      valueFormatMode="Currency"
+      valueFormatCulture="en-GB">
+      </igx-data-legend>
+  </div>
+  <div class="container fill">
+      <igx-financial-chart
+      name="chart"
+      #chart
+      chartType="Candle"
+      [dataSource]="multipleStocks"
+      dataToolTipValueFormatMode="Currency"
+      dataToolTipValueFormatCulture="en-GB"
+      dataToolTipLabelDisplayMode="Hidden"
+      dataToolTipIncludedColumns="Close, Change, Value"
+      dataToolTipHeaderFormatTime="None"
+      zoomSliderType="None"
+      yAxisLabelFormat="{0}"
+      [yAxisLabelFormatSpecifiers]="NumberFormatSpecifier1"
+      xAxisLabelFormat="{0}"
+      [xAxisLabelFormatSpecifiers]="DateTimeFormatSpecifier1">
+      </igx-financial-chart>
+  </div>
+</div>
diff --git a/samples/charts/financial-chart/format-specifiers/src/app.component.scss b/samples/charts/financial-chart/format-specifiers/src/app.component.scss
new file mode 100644
index 000000000..cbff781da
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/app.component.scss
@@ -0,0 +1,3 @@
+/* styles are loaded the Shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/
diff --git a/samples/charts/financial-chart/format-specifiers/src/app.component.ts b/samples/charts/financial-chart/format-specifiers/src/app.component.ts
new file mode 100644
index 000000000..679762bf0
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/app.component.ts
@@ -0,0 +1,65 @@
+import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { MultipleStocks } from './MultipleStocks';
+import { IgxDataLegendComponent, IgxFinancialChartComponent } from 'igniteui-angular-charts';
+import { IgxNumberFormatSpecifier, IgxDateTimeFormatSpecifier } from 'igniteui-angular-core';
+
+@Component({
+    selector: "app-root",
+    styleUrls: ["./app.component.scss"],
+    templateUrl: "./app.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AppComponent {
+
+    public constructor(private _detector: ChangeDetectorRef) {
+
+    }
+
+    @ViewChild("legend", { static: true } )
+    private legend: IgxDataLegendComponent
+    @ViewChild("chart", { static: true } )
+    private chart: IgxFinancialChartComponent
+    private _numberFormatSpecifier1: IgxNumberFormatSpecifier[] | null = null;
+    public get numberFormatSpecifier1(): IgxNumberFormatSpecifier[] {
+        if (this._numberFormatSpecifier1 == null)
+        {
+            let numberFormatSpecifier1: IgxNumberFormatSpecifier[] = [];
+            var numberFormatSpecifier2 = new IgxNumberFormatSpecifier();
+            numberFormatSpecifier2.currency = "EUR";
+            numberFormatSpecifier2.style = "currency";
+            numberFormatSpecifier2.locale = "en-GB";
+            numberFormatSpecifier2.minimumFractionDigits = 0;
+
+            numberFormatSpecifier1.push(numberFormatSpecifier2)
+            this._numberFormatSpecifier1 = numberFormatSpecifier1;
+        }
+        return this._numberFormatSpecifier1;
+    }
+    private _dateTimeFormatSpecifier1: IgxDateTimeFormatSpecifier[] | null = null;
+    public get dateTimeFormatSpecifier1(): IgxDateTimeFormatSpecifier[] {
+        if (this._dateTimeFormatSpecifier1 == null)
+        {
+            let dateTimeFormatSpecifier1: IgxDateTimeFormatSpecifier[] = [];
+            var dateTimeFormatSpecifier2 = new IgxDateTimeFormatSpecifier();
+            dateTimeFormatSpecifier2.locale = "en-GB";
+            dateTimeFormatSpecifier2.dateStyle = "long";
+
+            dateTimeFormatSpecifier1.push(dateTimeFormatSpecifier2)
+            this._dateTimeFormatSpecifier1 = dateTimeFormatSpecifier1;
+        }
+        return this._dateTimeFormatSpecifier1;
+    }
+
+    private _multipleStocks: MultipleStocks = null;
+    private _multipleStocksFetching: boolean = false;
+    public get multipleStocks(): MultipleStocks {
+        if (this._multipleStocks == null && !this._multipleStocksFetching)
+        {
+            this._multipleStocksFetching = true;
+            ( async () => { this._multipleStocks = await (await MultipleStocks.fetch()); this._detector.markForCheck();  })();
+        }
+        return this._multipleStocks;
+    }
+
+}
+
diff --git a/samples/charts/financial-chart/format-specifiers/src/app.module.ts b/samples/charts/financial-chart/format-specifiers/src/app.module.ts
new file mode 100644
index 000000000..3b0932b7a
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/app.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { AppComponent } from "./app.component";
+
+import { IgxFinancialChartModule, IgxDataChartInteractivityModule, IgxDataLegendModule } from 'igniteui-angular-charts';
+
+@NgModule({
+  bootstrap: [AppComponent],
+  declarations: [
+    AppComponent
+],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    CommonModule,
+    FormsModule,
+    IgxFinancialChartModule,
+    IgxDataChartInteractivityModule,
+    IgxDataLegendModule
+],
+  providers: [],
+  schemas: []
+})
+export class AppModule {}
diff --git a/samples/charts/financial-chart/format-specifiers/src/config/tsconfig-es5.app.json b/samples/charts/financial-chart/format-specifiers/src/config/tsconfig-es5.app.json
new file mode 100644
index 000000000..7e5d23397
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/config/tsconfig-es5.app.json
@@ -0,0 +1,6 @@
+{
+    "extends": "./tsconfig.app.json",
+    "compilerOptions": {
+        "target": "es2015"
+    }
+   }
diff --git a/samples/charts/financial-chart/format-specifiers/src/config/tsconfig.app.json b/samples/charts/financial-chart/format-specifiers/src/config/tsconfig.app.json
new file mode 100644
index 000000000..f722e3fe4
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/config/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "baseUrl": "./",
+    "types": []
+  },
+  "files": [
+    "../main.ts",
+    "../polyfills.ts"
+  ]
+}
diff --git a/samples/charts/financial-chart/format-specifiers/src/config/tsconfig.base.json b/samples/charts/financial-chart/format-specifiers/src/config/tsconfig.base.json
new file mode 100644
index 000000000..f5ad4b8b7
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/config/tsconfig.base.json
@@ -0,0 +1,23 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "importHelpers": true,
+    "module": "es2020",
+    "outDir": "../../dist/out-tsc",
+    "sourceMap": false,
+    "declaration": false,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "downlevelIteration": true, // required for excel library
+    "target": "es2015",
+    "typeRoots": [
+      "../../node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+}
diff --git a/samples/charts/financial-chart/format-specifiers/src/config/tsconfig.spec.json b/samples/charts/financial-chart/format-specifiers/src/config/tsconfig.spec.json
new file mode 100644
index 000000000..6eb8c055c
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/config/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "baseUrl": "./",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "../test.ts",
+    "../polyfills.ts"
+  ],
+  "include": [
+    "../**/*.spec.ts",
+    "../**/*.d.ts"
+  ]
+}
diff --git a/samples/charts/financial-chart/format-specifiers/src/config/tsconfig.worker.json b/samples/charts/financial-chart/format-specifiers/src/config/tsconfig.worker.json
new file mode 100644
index 000000000..bc0e98f11
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/config/tsconfig.worker.json
@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/worker",
+    "lib": [
+      "es2018",
+      "DOM"
+    ],
+    "types": []
+  },
+  "include": [
+    "../**/*Worker.ts"
+  ]
+}
diff --git a/samples/charts/financial-chart/format-specifiers/src/environments/environment.prod.ts b/samples/charts/financial-chart/format-specifiers/src/environments/environment.prod.ts
new file mode 100644
index 000000000..3612073bc
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/samples/charts/financial-chart/format-specifiers/src/environments/environment.ts b/samples/charts/financial-chart/format-specifiers/src/environments/environment.ts
new file mode 100644
index 000000000..7b4f817ad
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
diff --git a/samples/charts/financial-chart/format-specifiers/src/index.html b/samples/charts/financial-chart/format-specifiers/src/index.html
new file mode 100644
index 000000000..7650dfb64
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>IgniteUI for Angular | Example | infragistics</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://static.infragistics.com/xplatform/images/browsers/angular.ico" rel="icon" type="image/x-icon" >
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
+  <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet">
+  <link href="https://static.infragistics.com/xplatform/css/themes/light/bootstrap.css" rel="stylesheet">
+  <link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+</head>
+
+<body class="igx-typography">
+  <app-root></app-root>
+</body>
+
+</html>
diff --git a/samples/charts/financial-chart/format-specifiers/src/main.ts b/samples/charts/financial-chart/format-specifiers/src/main.ts
new file mode 100644
index 000000000..ec9adcd4a
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/main.ts
@@ -0,0 +1,15 @@
+// tslint:disable:no-string-literal
+import "./polyfills";
+import { enableProdMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app.module";
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
+  // ensure Angular destroys itself on hot reloads.
+  if (window["ngRef"]) {
+    window["ngRef"].destroy();
+  }
+  window["ngRef"] = ref;
+
+  // otherwise, log the boot error
+}).catch(err => console.error(err));
diff --git a/samples/charts/financial-chart/format-specifiers/src/polyfills.ts b/samples/charts/financial-chart/format-specifiers/src/polyfills.ts
new file mode 100644
index 000000000..6c0321de4
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/polyfills.ts
@@ -0,0 +1,65 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+* BROWSER POLYFILLS
+*/
+
+// import "core-js/es7/object";
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+import "classlist.js";  // run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import "core-js/es6/reflect";
+
+/* Evergreen browsers require these. */
+// used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+// import "core-js/es7/reflect";
+
+/*
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ */
+import "web-animations-js";  // run `npm install --save web-animations-js`.
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import "hammerjs/hammer";
+import "zone.js/dist/zone";  // included with Angular CLI.
+
+/***************************************************************************************************
+ * @angular/animations polyfill
+ */
+if (!Element.prototype.matches) {
+    Element.prototype.matches = (Element.prototype as any).msMatchesSelector;
+}
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import "intl";  // Run `npm install --save intl`.
+// import "intl/locale-data/jsonp/de";
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import "intl/locale-data/jsonp/en";
diff --git a/samples/charts/financial-chart/format-specifiers/src/styles.scss b/samples/charts/financial-chart/format-specifiers/src/styles.scss
new file mode 100644
index 000000000..9b431e92d
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/styles.scss
@@ -0,0 +1,9 @@
+/* autoprefixer grid: on */
+html,
+body {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    margin: 0;
+    box-sizing: border-box;
+}
diff --git a/samples/charts/financial-chart/format-specifiers/src/typings.d.ts b/samples/charts/financial-chart/format-specifiers/src/typings.d.ts
new file mode 100644
index 000000000..ef5c7bd62
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/src/typings.d.ts
@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}
diff --git a/samples/charts/financial-chart/format-specifiers/tsconfig.json b/samples/charts/financial-chart/format-specifiers/tsconfig.json
new file mode 100644
index 000000000..6a01bab30
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/tsconfig.json
@@ -0,0 +1,20 @@
+/*
+  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
+  It is not intended to be used to perform a compilation.
+
+  To learn more about this file see: https://angular.io/config/solution-tsconfig.
+*/
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./src/config/tsconfig.app.json"
+    },
+    {
+      "path": "./src/config/tsconfig.worker.json"
+    },
+    {
+      "path": "./src/config/tsconfig.spec.json"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/samples/charts/financial-chart/format-specifiers/tslint.json b/samples/charts/financial-chart/format-specifiers/tslint.json
new file mode 100644
index 000000000..777c777d9
--- /dev/null
+++ b/samples/charts/financial-chart/format-specifiers/tslint.json
@@ -0,0 +1,31 @@
+{
+  "extends": "tslint:latest",
+  "rules": {
+    "deprecation": {
+      "severity": "warning"
+    },
+    "arrow-parens": false,
+    "indent": [true, "spaces"],
+    "interface-name": [true, "always-prefix"],
+    "max-classes-per-file": false,
+    "no-bitwise": false,
+    "no-console": false,
+    "no-empty": false,
+    "no-duplicate-imports": false,
+    "no-implicit-dependencies": false,
+    "no-object-literal-type-assertion": false,
+    "no-submodule-imports": [false],
+    "no-string-literal": false,
+    "no-trailing-whitespace": false,
+    "no-var-keyword": false,
+    "object-literal-sort-keys": false,
+    "only-arrow-functions": false,
+    "prefer-conditional-expression": false,
+    "prefer-const": false,
+    "prefer-for-of": false,
+    "prefer-object-spread": false,
+    "space-within-parens": false,
+    "trailing-comma": [true, {"multiline": "never", "singleline": "never"}],
+    "variable-name": [true, "allow-leading-underscore"]
+  }
+}