IgniteUI · HUSSAR-mtrela · Nov 19, 2025 · Nov 18, 2025 · Nov 19, 2025
diff --git a/samples/charts/data-chart/user-annotation-layer/.codesandbox/Dockerfile b/samples/charts/data-chart/user-annotation-layer/.codesandbox/Dockerfile
@@ -0,0 +1 @@
+FROM node:20
diff --git a/samples/charts/data-chart/user-annotation-layer/.codesandbox/tasks.json b/samples/charts/data-chart/user-annotation-layer/.codesandbox/tasks.json
@@ -0,0 +1,17 @@
+{
+  // These tasks will run in order when initializing your CodeSandbox project.
+  "setupTasks": [
+    {
+      "name": "Install Dependencies",
+      "command": "yarn install"
+    }
+  ],
+    // These tasks can be run from CodeSandbox. Running one will open a log in the app.
+    "tasks": {
+        "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check": {
+            "name": "Start Project",
+            "command": "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check",
+            "runAtStart": true
+        }
+    }
+}
diff --git a/samples/charts/data-chart/user-annotation-layer/.stackblitzrc b/samples/charts/data-chart/user-annotation-layer/.stackblitzrc
@@ -0,0 +1 @@
+{"installDependencies":true, "startCommand":"npm start"}
diff --git a/samples/charts/data-chart/user-annotation-layer/ReadMe.md b/samples/charts/data-chart/user-annotation-layer/ReadMe.md
@@ -0,0 +1,58 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext/samples/templates/ReadMe.md -->
+
+This folder contains Angular application with example of Actions Built In Data Chart feature using [Toolbar](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/app/app.component.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://infragistics.com/angular-demos-dv/samples/charts/toolbar-actions-built-in-data-chart" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-angular-examples/tree/master/samples/charts/toolbar/actions-built-in-data-chart?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/app.component.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+- clone and navigate to this sample in terminal window
+
+```
+git clone https://github.com/IgniteUI/igniteui-angular-examples.git
+git checkout master
+cd ../samples/charts/toolbar/actions-built-in-data-chart
+```
+<!-- cd ./igniteui-angular-examples -->
+
+- open above folder in VS Code or type:
+```
+code .
+```
+
+- In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+- open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Angular** components, check out the [Angular documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html).
diff --git a/samples/charts/data-chart/user-annotation-layer/angular.json b/samples/charts/data-chart/user-annotation-layer/angular.json
@@ -0,0 +1,140 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "demo": {
+      "schematics": {
+        "@schematics/angular:component": {
+          "prefix": "app",
+          "style": "scss",
+          "type": "component"
+        },
+        "@schematics/angular:directive": {
+          "prefix": "app",
+          "type": "directive"
+        },
+        "@schematics/angular:service": {
+          "type": "service"
+        },
+        "@schematics/angular:guard": {
+          "typeSeparator": "."
+        },
+        "@schematics/angular:interceptor": {
+          "typeSeparator": "."
+        },
+        "@schematics/angular:module": {
+          "typeSeparator": "."
+        },
+        "@schematics/angular:pipe": {
+          "typeSeparator": "."
+        },
+        "@schematics/angular:resolver": {
+          "typeSeparator": "."
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "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": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": [],
+            "stylePreprocessorOptions": {
+              "includePaths": [ "node_modules/" ]
+            }
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all",
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ]
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "demo:build:production"
+            },
+            "development": {
+              "buildTarget": "demo:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": [],
+            "assets": [
+              "src/assets"
+            ],
+            "inlineStyleLanguage": "scss",
+            "stylePreprocessorOptions": {
+              "includePaths": [ "node_modules/" ]
+            }
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
diff --git a/samples/charts/data-chart/user-annotation-layer/package.json b/samples/charts/data-chart/user-annotation-layer/package.json
@@ -0,0 +1,45 @@
+{
+  "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": "20.0.1",
+    "@angular/common": "20.0.1",
+    "@angular/compiler": "20.0.1",
+    "@angular/core": "20.0.1",
+    "@angular/forms": "20.0.1",
+    "@angular/platform-browser": "20.0.1",
+    "@angular/platform-browser-dynamic": "20.0.1",
+    "@types/hammerjs": "2.0.40",
+    "classlist.js": "1.1.20150312",
+    "hammerjs": "2.0.8",
+    "igniteui-angular-charts": "20.2.0-beta.0",
+    "igniteui-angular-core": "20.2.0-beta.0",
+    "igniteui-angular-inputs": "20.2.0-beta.0",
+    "igniteui-angular-layouts": "20.2.0-beta.0",
+    "intl": "1.2.5",
+    "jszip": "3.8.0",
+    "rxjs": "7.8.1",
+    "tslib": "2.6.1",
+    "web-animations-js": "2.3.2",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular/cli": "20.0.1",
+    "@angular/compiler-cli": "20.0.1",
+    "@angular/language-service": "20.0.1",
+    "@angular-devkit/build-angular": "20.0.1",
+    "@types/node": "18.17.0",
+    "codelyzer": "6.0.2",
+    "jasmine-core": "5.1.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "sass.js": "0.11.1",
+    "tslint": "~6.1.3",
+    "ts-node": "10.9.1",
+    "typescript": "5.8.3"
+  }
+}
diff --git a/samples/charts/data-chart/user-annotation-layer/src/CountryRenewableElectricity.ts b/samples/charts/data-chart/user-annotation-layer/src/CountryRenewableElectricity.ts
@@ -0,0 +1,34 @@
+export class CountryRenewableElectricityItem {
+    public constructor(init: Partial<CountryRenewableElectricityItem>) {
+        Object.assign(this, init);
+    }
+
+    public year: string;
+    public europe: number;
+    public china: number;
+    public america: number;
+
+}
+export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
+    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new CountryRenewableElectricityItem({ year: `2009`, europe: 34, china: 21, america: 19 }),
+                new CountryRenewableElectricityItem({ year: `2010`, europe: 43, china: 26, america: 24 }),
+                new CountryRenewableElectricityItem({ year: `2011`, europe: 66, china: 29, america: 28 }),
+                new CountryRenewableElectricityItem({ year: `2012`, europe: 69, china: 32, america: 26 }),
+                new CountryRenewableElectricityItem({ year: `2013`, europe: 58, china: 47, america: 38 }),
+                new CountryRenewableElectricityItem({ year: `2014`, europe: 40, china: 46, america: 31 }),
+                new CountryRenewableElectricityItem({ year: `2015`, europe: 78, china: 50, america: 19 }),
+                new CountryRenewableElectricityItem({ year: `2016`, europe: 13, china: 90, america: 52 }),
+                new CountryRenewableElectricityItem({ year: `2017`, europe: 78, china: 132, america: 50 }),
+                new CountryRenewableElectricityItem({ year: `2018`, europe: 40, china: 134, america: 34 }),
+                new CountryRenewableElectricityItem({ year: `2018`, europe: 40, china: 134, america: 34 }),
+                new CountryRenewableElectricityItem({ year: `2019`, europe: 80, china: 96, america: 38 }),
+            ];
+            super(...newItems.slice(0));
+        }
+    }
+}
diff --git a/samples/charts/data-chart/user-annotation-layer/src/app.component.html b/samples/charts/data-chart/user-annotation-layer/src/app.component.html
@@ -0,0 +1,71 @@
+<div class="container vertical sample">
+  <div style="display: flex; flex-direction: row">
+    <div style="margin-left: 1.25rem;">
+      <igx-toolbar
+      name="toolbar"
+      #toolbar
+      [target]="chart"
+      orientation="Horizontal">
+      </igx-toolbar>
+    </div>
+  </div>
+  <div class="container fill">
+    <igx-data-chart 
+    isHorizontalZoomEnabled="true" 
+    isVerticalZoomEnabled="true" 
+    computedPlotAreaMarginMode="Series"
+      name="chart" #chart isUserAnnotationsEnabled="true" 
+      (userAnnotationInformationRequested)="onUserAnnotationInformationRequested($event)"
+      (userAnnotationToolTipContentUpdating)="onUserAnnotationTooltipContentUpdating($event)">
+      <igx-category-x-axis name="xAxis" #xAxis [dataSource]="countryRenewableElectricity" label="year">
+      </igx-category-x-axis>
+      <igx-numeric-y-axis name="yAxis" #yAxis title="TWh" labelLocation="OutsideRight">
+      </igx-numeric-y-axis>
+
+      <igx-line-series name="lineSeries1" #lineSeries1 title="Electricity" [xAxis]="xAxis" [yAxis]="yAxis"
+        [dataSource]="countryRenewableElectricity" valueMemberPath="america">
+      </igx-line-series>
+      <igx-line-series name="LineSeries2" #lineSeries2 title="Electricity" [xAxis]="xAxis" [yAxis]="yAxis"
+        [dataSource]="countryRenewableElectricity" valueMemberPath="europe">
+      </igx-line-series>
+      <igx-line-series name="LineSeries3" #lineSeries3 title="Electricity" [xAxis]="xAxis" [yAxis]="yAxis"
+        [dataSource]="countryRenewableElectricity" valueMemberPath="china">
+      </igx-line-series>
+    </igx-data-chart>
+
+    <div class="container vertical options" id="annotationPopup"
+    style="position: fixed; display: none;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 13rem;
+    height: 21rem;
+    background-color: white;
+    border: 1px black solid;
+    border-radius: 0.25rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    box-shadow: 0.05rem 0.05rem 0.5rem 0.05rem gray;">
+
+      <label>Label:</label>
+      <input #annotationInput name="annotationInput" display-type="text" style="width: calc(100% - 0.4rem);"
+      [(ngModel)]="annotationLabel">
+
+      <label>Details:</label>
+      <textarea #annotationTextArea name="annotationTextArea" style="width: calc(100% - 0.25rem); height: 4rem; resize: none;"
+      [(ngModel)]="annotationDetails">
+      </textarea>
+
+      <label>Badge Color:</label>
+      <igx-color-editor #annotationBadgeColorEditor name="annotationBadgeColorEditor" value="black"></igx-color-editor>
+
+      <label>Main Color:</label>
+      <igx-color-editor #annotationMainColorEditor name="annotationMainColorEditor" value="black"></igx-color-editor>
+
+      <div class="container horizontal" style="height: auto; justify-content: center; align-items: center; padding: 1rem; gap: 1rem;">
+        <button (click)="onDoneBtnClick()" id="doneButton">Done</button>
+        <button (click)="onCancelBtnClick()" id="cancelButton">Cancel</button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/samples/charts/data-chart/user-annotation-layer/src/app.component.scss b/samples/charts/data-chart/user-annotation-layer/src/app.component.scss
@@ -0,0 +1,21 @@
+/* styles are loaded the Shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/
+.aboveContentSplit {
+    display: flex;
+    flex-direction: row;
+}
+.aboveContentLeftContainer {
+    margin-left: 1.25rem;
+    display: flex;
+    flex-grow: 1;
+    justify-content: flex-start;
+    align-items: flex-end;
+}
+.aboveContentRightContainer {
+    margin-right: 1.25rem;
+    display: flex;
+    flex-grow: 1;
+    justify-content: flex-end;
+    align-items: flex-end;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"installDependencies":true, "startCommand":"npm start"}