IgniteUI · azure-pipelines · May 22, 2026
diff --git a/samples/charts/data-chart/range-bar-chart/.devcontainer/devcontainer.json b/samples/charts/data-chart/range-bar-chart/.devcontainer/devcontainer.json
@@ -0,0 +1,4 @@
+{
+    "name": "Node.js",
+    "image": "mcr.microsoft.com/devcontainers/javascript-node:22"
+}
diff --git a/samples/charts/data-chart/range-bar-chart/.eslintrc.js b/samples/charts/data-chart/range-bar-chart/.eslintrc.js
@@ -0,0 +1,78 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "no-mixed-spaces-and-tabs": 0,
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+	    "no-mixed-spaces-and-tabs": 0,
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
diff --git a/samples/charts/data-chart/range-bar-chart/index.html b/samples/charts/data-chart/range-bar-chart/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://dl.infragistics.com/x/img/browsers/react.png" >
+    <link rel="stylesheet"    href="https://dl.infragistics.com/x/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/samples/charts/data-chart/range-bar-chart/package.json b/samples/charts/data-chart/range-bar-chart/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "vite --port 4200",
+    "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-react": "^19.6.2",
+    "igniteui-react-charts": "19.6.0-beta.2",
+    "igniteui-react-core": "19.6.0-beta.2",
+    "igniteui-webcomponents": "^7.0.0",
+    "lit-html": "^3.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^24.7.1",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser": "^3.2.4",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "typescript": "^4.8.4",
+    "vite": "^7.1.9",
+    "vitest": "^3.2.4",
+    "vitest-canvas-mock": "^0.3.3",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/charts/data-chart/range-bar-chart/sandbox.config.json b/samples/charts/data-chart/range-bar-chart/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
diff --git a/samples/charts/data-chart/range-bar-chart/src/TemperatureRangeData.ts b/samples/charts/data-chart/range-bar-chart/src/TemperatureRangeData.ts
@@ -0,0 +1,35 @@
+export class TemperatureRangeDataItem {
+    public constructor(init: Partial<TemperatureRangeDataItem>) {
+        Object.assign(this, init);
+    }
+
+    public month: string;
+    public highNY: number;
+    public lowNY: number;
+    public highLA: number;
+    public lowLA: number;
+
+}
+export class TemperatureRangeData extends Array<TemperatureRangeDataItem> {
+    public constructor(items: Array<TemperatureRangeDataItem> | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new TemperatureRangeDataItem({ month: `Jan`, highNY: 10.6, lowNY: -6.6, highLA: 28.3, lowLA: 7.8 }),
+                new TemperatureRangeDataItem({ month: `Feb`, highNY: 7.8, lowNY: -9.9, highLA: 31.1, lowLA: 5.6 }),
+                new TemperatureRangeDataItem({ month: `Mar`, highNY: 12.2, lowNY: -3.8, highLA: 27.8, lowLA: 8.3 }),
+                new TemperatureRangeDataItem({ month: `Apr`, highNY: 11.7, lowNY: 2.2, highLA: 33.9, lowLA: 10.6 }),
+                new TemperatureRangeDataItem({ month: `May`, highNY: 19.4, lowNY: 1.1, highLA: 35, lowLA: 13.9 }),
+                new TemperatureRangeDataItem({ month: `Jun`, highNY: 23.3, lowNY: 10.6, highLA: 36.7, lowLA: 16.1 }),
+                new TemperatureRangeDataItem({ month: `Jul`, highNY: 27.2, lowNY: 19.4, highLA: 33.3, lowLA: 15.6 }),
+                new TemperatureRangeDataItem({ month: `Aug`, highNY: 25.6, lowNY: 16.7, highLA: 36.7, lowLA: 15.6 }),
+                new TemperatureRangeDataItem({ month: `Sep`, highNY: 22.8, lowNY: 8.9, highLA: 43.9, lowLA: 16.1 }),
+                new TemperatureRangeDataItem({ month: `Oct`, highNY: 17.8, lowNY: 0, highLA: 38.3, lowLA: 11.1 }),
+                new TemperatureRangeDataItem({ month: `Nov`, highNY: 17.8, lowNY: -1, highLA: 32.8, lowLA: 6.7 }),
+                new TemperatureRangeDataItem({ month: `Dec`, highNY: 8.3, lowNY: -6.6, highLA: 28.9, lowLA: 5.6 }),
+            ];
+            super(...newItems.slice(0));
+        }
+    }
+}
diff --git a/samples/charts/data-chart/range-bar-chart/src/index.css b/samples/charts/data-chart/range-bar-chart/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
diff --git a/samples/charts/data-chart/range-bar-chart/src/index.tsx b/samples/charts/data-chart/range-bar-chart/src/index.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+
+import { IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule, IgrLegendModule } from 'igniteui-react-charts';
+import { IgrLegend, IgrDataChart, IgrCategoryYAxis, IgrNumericXAxis, IgrRangeBarSeries, IgrDataToolTipLayer } from 'igniteui-react-charts';
+import { TemperatureRangeDataItem, TemperatureRangeData } from './TemperatureRangeData';
+
+const mods: any[] = [
+    IgrDataChartCoreModule,
+    IgrDataChartCategoryModule,
+    IgrDataChartInteractivityModule,
+    IgrDataChartAnnotationModule,
+    IgrLegendModule
+];
+mods.forEach((m) => m.register());
+
+export default class Sample extends React.Component<any, any> {
+    private legend: IgrLegend
+    private legendRef(r: IgrLegend) {
+        this.legend = r;
+        this.setState({});
+    }
+    private chart: IgrDataChart
+    private chartRef(r: IgrDataChart) {
+        this.chart = r;
+        this.setState({});
+    }
+    private yAxis: IgrCategoryYAxis
+    private xAxis: IgrNumericXAxis
+    private rangeBarSeries1: IgrRangeBarSeries
+    private rangeBarSeries2: IgrRangeBarSeries
+    private dataToolTipLayer: IgrDataToolTipLayer
+
+    constructor(props: any) {
+        super(props);
+
+        this.legendRef = this.legendRef.bind(this);
+        this.chartRef = this.chartRef.bind(this);
+    }
+
+    public render(): JSX.Element {
+        return (
+        <div className="container sample">
+
+            <div className="legend-title">
+                Monthly Temperature Range in LA and NYC
+            </div>
+
+            <div className="legend">
+                <IgrLegend
+                    ref={this.legendRef}
+                    orientation="Horizontal">
+                </IgrLegend>
+            </div>
+
+            <div className="container fill">
+                <IgrDataChart
+                    ref={this.chartRef}
+                    isHorizontalZoomEnabled="false"
+                    isVerticalZoomEnabled="false"
+                    legend={this.legend}>
+                    <IgrCategoryYAxis
+                        name="yAxis"
+                        label="month"
+                        interval="1"
+                        dataSource={this.temperatureRangeData}>
+                    </IgrCategoryYAxis>
+                    <IgrNumericXAxis
+                        name="xAxis"
+                        title="Temperature (in Celsius)"
+                        titleAngle="0"
+                        titleTopMargin="10">
+                    </IgrNumericXAxis>
+                    <IgrRangeBarSeries
+                        name="RangeBarSeries1"
+                        xAxisName="xAxis"
+                        yAxisName="yAxis"
+                        title="Los Angeles"
+                        lowMemberPath="lowLA"
+                        highMemberPath="highLA"
+                        showDefaultTooltip="false"
+                        dataSource={this.temperatureRangeData}>
+                    </IgrRangeBarSeries>
+                    <IgrRangeBarSeries
+                        name="RangeBarSeries2"
+                        xAxisName="xAxis"
+                        yAxisName="yAxis"
+                        title="New York"
+                        lowMemberPath="lowNY"
+                        highMemberPath="highNY"
+                        showDefaultTooltip="false"
+                        dataSource={this.temperatureRangeData}>
+                    </IgrRangeBarSeries>
+                    <IgrDataToolTipLayer
+                        name="dataToolTipLayer">
+                    </IgrDataToolTipLayer>
+                </IgrDataChart>
+            </div>
+        </div>
+        );
+    }
+
+    private _temperatureRangeData: TemperatureRangeData = null;
+    public get temperatureRangeData(): TemperatureRangeData {
+        if (this._temperatureRangeData == null)
+        {
+            this._temperatureRangeData = new TemperatureRangeData();
+        }
+        return this._temperatureRangeData;
+    }
+
+}
+
+// rendering above component in the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Sample/>);
diff --git a/samples/charts/data-chart/range-bar-chart/tsconfig.json b/samples/charts/data-chart/range-bar-chart/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/charts/data-chart/range-bar-chart/vite.config.js b/samples/charts/data-chart/range-bar-chart/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'build'
+  },
+  server: {
+    open: false
+  },
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/* shared styles are loaded from: */
		/* https://dl.infragistics.com/x/css/samples/shared.v8.css */