diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs/app/index.jsx
index 0a3ea4903..1034f13ed 100644
--- a/ej2-react/code-snippet/chart/series/100-stackedarea-cs/app/index.jsx
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs/app/index.jsx
@@ -13,13 +13,13 @@ function App() {
return
-
+
-
+
-
+
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs/app/index.tsx
index 7c7adcffa..4065149ea 100644
--- a/ej2-react/code-snippet/chart/series/100-stackedarea-cs/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs/app/index.tsx
@@ -20,13 +20,13 @@ function App() {
title='Annual Temperature Comparison'>
-
+
-
+
-
+
-
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/app/datasource.jsx
new file mode 100644
index 000000000..ce0cb7c21
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/app/datasource.jsx
@@ -0,0 +1,11 @@
+export let percentData = [
+ { x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
+ { x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
+ { x: new Date(2008, 0, 1), y: 40, y1: 37, y2: 73, y3: 53 },
+ { x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
+ { x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
+ { x: new Date(2011, 0, 1), y: 37, y1: 37, y2: 37, y3: 37 },
+ { x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
+ { x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
+ { x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/app/datasource.tsx
new file mode 100644
index 000000000..5b37d492e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/app/datasource.tsx
@@ -0,0 +1,11 @@
+export let percentData: Object[] = [
+ { x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
+ { x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
+ { x: new Date(2008, 0, 1), y: 40, y1: 37, y2: 73, y3: 53 },
+ { x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
+ { x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
+ { x: new Date(2011, 0, 1), y: 37, y1: 37, y2: 37, y3: 37 },
+ { x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
+ { x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
+ { x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/app/index.jsx
new file mode 100644
index 000000000..e7f2e7a33
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/app/index.jsx
@@ -0,0 +1,31 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StackingAreaSeries } from '@syncfusion/ej2-react-charts';
+import { percentData } from './datasource';
+function App() {
+ const primaryxAxis = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ edgeLabelPlacement: 'Shift', labelFormat: 'y'
+ };
+ const primaryyAxis = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/app/index.tsx
new file mode 100644
index 000000000..29594c784
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/app/index.tsx
@@ -0,0 +1,38 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, StackingAreaSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { percentData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ edgeLabelPlacement: 'Shift', labelFormat: 'y'};
+ const primaryyAxis: AxisModel = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
+
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/index.html b/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/index.html
new file mode 100644
index 000000000..fbfbb8e2d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/index.html
@@ -0,0 +1,69 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/app/datasource.jsx
new file mode 100644
index 000000000..ce0cb7c21
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/app/datasource.jsx
@@ -0,0 +1,11 @@
+export let percentData = [
+ { x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
+ { x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
+ { x: new Date(2008, 0, 1), y: 40, y1: 37, y2: 73, y3: 53 },
+ { x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
+ { x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
+ { x: new Date(2011, 0, 1), y: 37, y1: 37, y2: 37, y3: 37 },
+ { x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
+ { x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
+ { x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/app/datasource.tsx
new file mode 100644
index 000000000..5b37d492e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/app/datasource.tsx
@@ -0,0 +1,11 @@
+export let percentData: Object[] = [
+ { x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
+ { x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
+ { x: new Date(2008, 0, 1), y: 40, y1: 37, y2: 73, y3: 53 },
+ { x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
+ { x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
+ { x: new Date(2011, 0, 1), y: 37, y1: 37, y2: 37, y3: 37 },
+ { x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
+ { x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
+ { x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/app/index.jsx
new file mode 100644
index 000000000..fde31e3c2
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/app/index.jsx
@@ -0,0 +1,31 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StackingAreaSeries } from '@syncfusion/ej2-react-charts';
+import { percentData } from './datasource';
+function App() {
+ const primaryxAxis = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ edgeLabelPlacement: 'Shift', labelFormat: 'y'
+ };
+ const primaryyAxis = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/app/index.tsx
new file mode 100644
index 000000000..5a3b8f176
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/app/index.tsx
@@ -0,0 +1,38 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, StackingAreaSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { percentData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ edgeLabelPlacement: 'Shift', labelFormat: 'y'};
+ const primaryyAxis: AxisModel = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
+
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/index.html b/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/datasource.jsx
new file mode 100644
index 000000000..ce0cb7c21
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/datasource.jsx
@@ -0,0 +1,11 @@
+export let percentData = [
+ { x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
+ { x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
+ { x: new Date(2008, 0, 1), y: 40, y1: 37, y2: 73, y3: 53 },
+ { x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
+ { x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
+ { x: new Date(2011, 0, 1), y: 37, y1: 37, y2: 37, y3: 37 },
+ { x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
+ { x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
+ { x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/datasource.tsx
new file mode 100644
index 000000000..5b37d492e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/datasource.tsx
@@ -0,0 +1,11 @@
+export let percentData: Object[] = [
+ { x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
+ { x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
+ { x: new Date(2008, 0, 1), y: 40, y1: 37, y2: 73, y3: 53 },
+ { x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
+ { x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
+ { x: new Date(2011, 0, 1), y: 37, y1: 37, y2: 37, y3: 37 },
+ { x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
+ { x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
+ { x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/index.jsx
new file mode 100644
index 000000000..0ea76aa34
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/index.jsx
@@ -0,0 +1,32 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StackingAreaSeries } from '@syncfusion/ej2-react-charts';
+import { percentData } from './datasource';
+function App() {
+ const primaryxAxis = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ edgeLabelPlacement: 'Shift', labelFormat: 'y'
+ };
+ const border = { width: 2, color: 'red' };
+ const primaryyAxis = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/index.tsx
new file mode 100644
index 000000000..82b8bb14f
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/app/index.tsx
@@ -0,0 +1,38 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, StackingAreaSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { percentData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ edgeLabelPlacement: 'Shift', labelFormat: 'y'};
+ const primaryyAxis: AxisModel = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
+ const border: object = { width: 2, color: 'red' };
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/index.html b/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs3/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/app/datasource.jsx
new file mode 100644
index 000000000..c2075ea8e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/app/datasource.jsx
@@ -0,0 +1,11 @@
+export let percentData = [
+ { x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
+ { x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
+ { x: new Date(2008, 0, 1), y: null, y1: 37, y2: 73, y3: 53 },
+ { x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
+ { x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
+ { x: new Date(2011, 0, 1), y: 37, y1: 37, y2: undefined, y3: 37 },
+ { x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
+ { x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
+ { x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/app/datasource.tsx
new file mode 100644
index 000000000..cdf5154f0
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/app/datasource.tsx
@@ -0,0 +1,11 @@
+export let percentData: Object[] = [
+ { x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
+ { x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
+ { x: new Date(2008, 0, 1), y: null, y1: 37, y2: 73, y3: 53 },
+ { x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
+ { x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
+ { x: new Date(2011, 0, 1), y: 37, y1: 37, y2: undefined, y3: 37 },
+ { x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
+ { x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
+ { x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/app/index.jsx
new file mode 100644
index 000000000..32156f4b2
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/app/index.jsx
@@ -0,0 +1,34 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StackingAreaSeries } from '@syncfusion/ej2-react-charts';
+import { percentData } from './datasource';
+function App() {
+ const primaryxAxis = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ edgeLabelPlacement: 'Shift', labelFormat: 'y'
+ };
+ const marker = { visible: true };
+ const emptyPoint = { mode: 'Average' };
+ const emptyPoint1 = { mode: 'Zero' };
+ const primaryyAxis = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/app/index.tsx
new file mode 100644
index 000000000..7f48dfd33
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/app/index.tsx
@@ -0,0 +1,43 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {
+ AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, StackingAreaSeries, Selection
+}
+ from '@syncfusion/ej2-react-charts';
+import { percentData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ edgeLabelPlacement: 'Shift', labelFormat: 'y'
+ };
+ const primaryyAxis: AxisModel = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
+ const marker: object = { visible: true };
+ const emptyPoint: object = { mode: 'Average' };
+ const emptyPoint1: object = { mode: 'Zero' };
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/index.html b/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs4/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/app/datasource.jsx
new file mode 100644
index 000000000..c2075ea8e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/app/datasource.jsx
@@ -0,0 +1,11 @@
+export let percentData = [
+ { x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
+ { x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
+ { x: new Date(2008, 0, 1), y: null, y1: 37, y2: 73, y3: 53 },
+ { x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
+ { x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
+ { x: new Date(2011, 0, 1), y: 37, y1: 37, y2: undefined, y3: 37 },
+ { x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
+ { x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
+ { x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/app/datasource.tsx
new file mode 100644
index 000000000..cdf5154f0
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/app/datasource.tsx
@@ -0,0 +1,11 @@
+export let percentData: Object[] = [
+ { x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
+ { x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
+ { x: new Date(2008, 0, 1), y: null, y1: 37, y2: 73, y3: 53 },
+ { x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
+ { x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
+ { x: new Date(2011, 0, 1), y: 37, y1: 37, y2: undefined, y3: 37 },
+ { x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
+ { x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
+ { x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/app/index.jsx
new file mode 100644
index 000000000..bbc4f0f7d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/app/index.jsx
@@ -0,0 +1,34 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StackingAreaSeries } from '@syncfusion/ej2-react-charts';
+import { percentData } from './datasource';
+function App() {
+ const primaryxAxis = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ edgeLabelPlacement: 'Shift', labelFormat: 'y'
+ };
+ const marker = { visible: true };
+ const emptyPoint = { mode: 'Average', fill: 'red' };
+ const emptyPoint1 = { mode: 'Zero' };
+ const primaryyAxis = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/app/index.tsx
new file mode 100644
index 000000000..d7bd743dc
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/app/index.tsx
@@ -0,0 +1,43 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {
+ AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, StackingAreaSeries, Selection
+}
+ from '@syncfusion/ej2-react-charts';
+import { percentData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ edgeLabelPlacement: 'Shift', labelFormat: 'y'
+ };
+ const primaryyAxis: AxisModel = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
+ const marker: object = { visible: true };
+ const emptyPoint: object = { mode: 'Average', fill: 'red' };
+ const emptyPoint1: object = { mode: 'Zero' };
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/index.html b/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs5/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/app/datasource.jsx
new file mode 100644
index 000000000..c2075ea8e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/app/datasource.jsx
@@ -0,0 +1,11 @@
+export let percentData = [
+ { x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
+ { x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
+ { x: new Date(2008, 0, 1), y: null, y1: 37, y2: 73, y3: 53 },
+ { x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
+ { x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
+ { x: new Date(2011, 0, 1), y: 37, y1: 37, y2: undefined, y3: 37 },
+ { x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
+ { x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
+ { x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/app/datasource.tsx
new file mode 100644
index 000000000..cdf5154f0
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/app/datasource.tsx
@@ -0,0 +1,11 @@
+export let percentData: Object[] = [
+ { x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
+ { x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
+ { x: new Date(2008, 0, 1), y: null, y1: 37, y2: 73, y3: 53 },
+ { x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
+ { x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
+ { x: new Date(2011, 0, 1), y: 37, y1: 37, y2: undefined, y3: 37 },
+ { x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
+ { x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
+ { x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/app/index.jsx
new file mode 100644
index 000000000..40143841b
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/app/index.jsx
@@ -0,0 +1,34 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StackingAreaSeries } from '@syncfusion/ej2-react-charts';
+import { percentData } from './datasource';
+function App() {
+ const primaryxAxis = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ edgeLabelPlacement: 'Shift', labelFormat: 'y'
+ };
+ const marker = { visible: true };
+ const emptyPoint = { mode: 'Average', fill: 'red', border: {width:2, color: 'green'} };
+ const emptyPoint1 = { mode: 'Zero' };
+ const primaryyAxis = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/app/index.tsx
new file mode 100644
index 000000000..139ea54c0
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/app/index.tsx
@@ -0,0 +1,43 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {
+ AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, StackingAreaSeries, Selection
+}
+ from '@syncfusion/ej2-react-charts';
+import { percentData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ edgeLabelPlacement: 'Shift', labelFormat: 'y'
+ };
+ const primaryyAxis: AxisModel = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
+ const marker: object = { visible: true };
+ const emptyPoint: object = { mode: 'Average', fill: 'red', border: {width:2, color: 'green'}};
+ const emptyPoint1: object = { mode: 'Zero' };
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/index.html b/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs6/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/app/datasource.jsx
new file mode 100644
index 000000000..ce0cb7c21
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/app/datasource.jsx
@@ -0,0 +1,11 @@
+export let percentData = [
+ { x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
+ { x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
+ { x: new Date(2008, 0, 1), y: 40, y1: 37, y2: 73, y3: 53 },
+ { x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
+ { x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
+ { x: new Date(2011, 0, 1), y: 37, y1: 37, y2: 37, y3: 37 },
+ { x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
+ { x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
+ { x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/app/datasource.tsx
new file mode 100644
index 000000000..5b37d492e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/app/datasource.tsx
@@ -0,0 +1,11 @@
+export let percentData: Object[] = [
+ { x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
+ { x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
+ { x: new Date(2008, 0, 1), y: 40, y1: 37, y2: 73, y3: 53 },
+ { x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
+ { x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
+ { x: new Date(2011, 0, 1), y: 37, y1: 37, y2: 37, y3: 37 },
+ { x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
+ { x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
+ { x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/app/index.jsx
new file mode 100644
index 000000000..cb29011e1
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/app/index.jsx
@@ -0,0 +1,46 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StackingAreaSeries } from '@syncfusion/ej2-react-charts';
+import { percentData } from './datasource';
+function App() {
+ const primaryxAxis = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ edgeLabelPlacement: 'Shift', labelFormat: 'y'
+ };
+ const marker = { visible: true };
+ const seriesRender = (args) => {
+ if (args.series.index === 0) {
+ args.fill = '#ff4251';
+ }
+ else if (args.series.index === 1) {
+ args.fill = '#4C4C4C';
+ }
+ else if (args.series.index === 2) {
+ args.fill = '#794F1B';
+ }
+ else if (args.series.index === 3) {
+ args.fill = '#1a9a6f';
+ }
+ };
+ const primaryyAxis = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/app/index.tsx
new file mode 100644
index 000000000..6b97bff69
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/app/index.tsx
@@ -0,0 +1,55 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {
+ AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, StackingAreaSeries, ISeriesRenderEventArgs
+}
+ from '@syncfusion/ej2-react-charts';
+import { percentData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ edgeLabelPlacement: 'Shift', labelFormat: 'y'
+ };
+ const primaryyAxis: AxisModel = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
+ const marker: object = { visible: true };
+ const seriesRender = (args: ISeriesRenderEventArgs) => {
+ if (args.series.index === 0) {
+ args.fill = '#ff4251';
+ }
+ else if (args.series.index === 1) {
+ args.fill = '#4C4C4C';
+ }
+ else if (args.series.index === 2) {
+ args.fill = '#794F1B';
+ }
+ else if (args.series.index === 3) {
+ args.fill = '#1a9a6f';
+ }
+};
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/index.html b/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs7/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/app/datasource.jsx
new file mode 100644
index 000000000..ce0cb7c21
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/app/datasource.jsx
@@ -0,0 +1,11 @@
+export let percentData = [
+ { x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
+ { x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
+ { x: new Date(2008, 0, 1), y: 40, y1: 37, y2: 73, y3: 53 },
+ { x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
+ { x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
+ { x: new Date(2011, 0, 1), y: 37, y1: 37, y2: 37, y3: 37 },
+ { x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
+ { x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
+ { x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/app/datasource.tsx
new file mode 100644
index 000000000..5b37d492e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/app/datasource.tsx
@@ -0,0 +1,11 @@
+export let percentData: Object[] = [
+ { x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
+ { x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
+ { x: new Date(2008, 0, 1), y: 40, y1: 37, y2: 73, y3: 53 },
+ { x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
+ { x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
+ { x: new Date(2011, 0, 1), y: 37, y1: 37, y2: 37, y3: 37 },
+ { x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
+ { x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
+ { x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/app/index.jsx
new file mode 100644
index 000000000..f0d0ac9f7
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/app/index.jsx
@@ -0,0 +1,40 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StackingAreaSeries } from '@syncfusion/ej2-react-charts';
+import { percentData } from './datasource';
+function App() {
+ const primaryxAxis = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ edgeLabelPlacement: 'Shift', labelFormat: 'y'
+ };
+ const marker = { visible: true };
+ const pointRender = (args) => {
+ if (args.point.index % 2 !==0) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+ };
+ const primaryyAxis = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/app/index.tsx
new file mode 100644
index 000000000..dd3f26ef2
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/app/index.tsx
@@ -0,0 +1,50 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {
+ AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, DateTime, Tooltip, DataLabel, Zoom, Crosshair, StackingAreaSeries, IPointRenderEventArgs
+}
+ from '@syncfusion/ej2-react-charts';
+import { percentData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ edgeLabelPlacement: 'Shift', labelFormat: 'y'
+ };
+ const primaryyAxis: AxisModel = { title: 'Temperature (%)', labelFormat: '{value}%', rangePadding: 'None' };
+ const marker: object = { visible: true };
+ const pointRender = (args: IPointRenderEventArgs) => {
+ if (args.point.index % 2 !==0) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+
+};
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/index.html b/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedarea-cs8/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs/app/index.jsx
index a0f97e133..146566ab4 100644
--- a/ej2-react/code-snippet/chart/series/100-stackedbar-cs/app/index.jsx
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs/app/index.jsx
@@ -13,11 +13,11 @@ function App() {
return
-
+
-
+
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs/app/index.tsx
index 3017e73dc..1b8c1bb56 100644
--- a/ej2-react/code-snippet/chart/series/100-stackedbar-cs/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs/app/index.tsx
@@ -21,11 +21,11 @@ function App() {
title='Sales Comparison'>
-
+
-
+
-
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/app/datasource.jsx
new file mode 100644
index 000000000..60faa75f6
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let stackBarData = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/app/datasource.tsx
new file mode 100644
index 000000000..bb9818c75
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let stackBarData: Object[] = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/app/index.jsx
new file mode 100644
index 000000000..3b03663bf
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/app/index.jsx
@@ -0,0 +1,29 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ return
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/app/index.tsx
new file mode 100644
index 000000000..9359a8cbe
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/app/index.tsx
@@ -0,0 +1,37 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis: AxisModel = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+
+ return
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/index.html b/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/index.html
new file mode 100644
index 000000000..e4fa03cc3
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/index.html
@@ -0,0 +1,58 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/app/datasource.jsx
new file mode 100644
index 000000000..60faa75f6
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let stackBarData = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/app/datasource.tsx
new file mode 100644
index 000000000..bb9818c75
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let stackBarData: Object[] = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/app/index.jsx
new file mode 100644
index 000000000..e07d7b006
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/app/index.jsx
@@ -0,0 +1,29 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ return
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/app/index.tsx
new file mode 100644
index 000000000..913252949
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/app/index.tsx
@@ -0,0 +1,37 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis: AxisModel = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+
+ return
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/index.html b/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/index.html
new file mode 100644
index 000000000..e4fa03cc3
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/index.html
@@ -0,0 +1,58 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/datasource.jsx
new file mode 100644
index 000000000..60faa75f6
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let stackBarData = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/datasource.tsx
new file mode 100644
index 000000000..bb9818c75
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let stackBarData: Object[] = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/index.jsx
new file mode 100644
index 000000000..e23576069
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/index.jsx
@@ -0,0 +1,30 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ const border = { width:1.5, color: 'black'};
+ return
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/index.tsx
new file mode 100644
index 000000000..da3cdbee3
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/app/index.tsx
@@ -0,0 +1,37 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis: AxisModel = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ const border: object = { width:1.5, color: 'black'};
+ return
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/index.html b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/index.html
new file mode 100644
index 000000000..e4fa03cc3
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/index.html
@@ -0,0 +1,58 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs3/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/datasource.jsx
new file mode 100644
index 000000000..60faa75f6
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let stackBarData = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/datasource.tsx
new file mode 100644
index 000000000..bb9818c75
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let stackBarData: Object[] = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/index.jsx
new file mode 100644
index 000000000..aafa7375f
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/index.jsx
@@ -0,0 +1,30 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ const border = { width:1.5, color: 'black'};
+ return
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/index.tsx
new file mode 100644
index 000000000..815bd7141
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/app/index.tsx
@@ -0,0 +1,37 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis: AxisModel = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ const border: object = { width:1.5, color: 'black'};
+ return
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/index.html b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/index.html
new file mode 100644
index 000000000..e4fa03cc3
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/index.html
@@ -0,0 +1,58 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs4/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/app/datasource.jsx
new file mode 100644
index 000000000..7b5365b12
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let stackBarData = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: null },
+ { x: 'May', y: 20, y1: null, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: null, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/app/datasource.tsx
new file mode 100644
index 000000000..1d2c98ad4
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let stackBarData: Object[] = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: null },
+ { x: 'May', y: 20, y1: null, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: null, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/app/index.jsx
new file mode 100644
index 000000000..6f7f0f0c0
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/app/index.jsx
@@ -0,0 +1,32 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ const emptyPoint = { mode: 'Zero' };
+ const emptyPoint1 = { mode: 'Gap' };
+ const emptyPoint2 = { mode: 'Average' };
+ return
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/app/index.tsx
new file mode 100644
index 000000000..3e62ec929
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/app/index.tsx
@@ -0,0 +1,39 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis: AxisModel = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ const emptyPoint: object = { mode: 'Zero' };
+ const emptyPoint1: object = { mode: 'Gap' };
+ const emptyPoint2: object = { mode: 'Average' };
+ return
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/index.html b/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/index.html
new file mode 100644
index 000000000..e4fa03cc3
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/index.html
@@ -0,0 +1,58 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs5/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/app/datasource.jsx
new file mode 100644
index 000000000..7b5365b12
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let stackBarData = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: null },
+ { x: 'May', y: 20, y1: null, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: null, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/app/datasource.tsx
new file mode 100644
index 000000000..1d2c98ad4
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let stackBarData: Object[] = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: null },
+ { x: 'May', y: 20, y1: null, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: null, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/app/index.jsx
new file mode 100644
index 000000000..89d1afc6b
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/app/index.jsx
@@ -0,0 +1,32 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ const emptyPoint = { mode: 'Zero' };
+ const emptyPoint1 = { mode: 'Gap' };
+ const emptyPoint2 = { mode: 'Average', fill: 'red' };
+ return
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/app/index.tsx
new file mode 100644
index 000000000..1d1da5d6f
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/app/index.tsx
@@ -0,0 +1,39 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis: AxisModel = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ const emptyPoint: object = { mode: 'Zero' };
+ const emptyPoint1: object = { mode: 'Gap' };
+ const emptyPoint2: object = { mode: 'Average', fill: 'red'};
+ return
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/index.html b/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/index.html
new file mode 100644
index 000000000..e4fa03cc3
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/index.html
@@ -0,0 +1,58 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs6/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/app/datasource.jsx
new file mode 100644
index 000000000..7b5365b12
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let stackBarData = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: null },
+ { x: 'May', y: 20, y1: null, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: null, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/app/datasource.tsx
new file mode 100644
index 000000000..1d2c98ad4
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let stackBarData: Object[] = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: null },
+ { x: 'May', y: 20, y1: null, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: null, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/app/index.jsx
new file mode 100644
index 000000000..8c9e67b1f
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/app/index.jsx
@@ -0,0 +1,32 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ const emptyPoint = { mode: 'Zero' };
+ const emptyPoint1 = { mode: 'Gap' };
+ const emptyPoint2 = { mode: 'Average', fill: 'red', border: { width: 2, color: 'blue'} };
+ return
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/app/index.tsx
new file mode 100644
index 000000000..a585dde2c
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/app/index.tsx
@@ -0,0 +1,39 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis: AxisModel = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ const emptyPoint: object = { mode: 'Zero' };
+ const emptyPoint1: object = { mode: 'Gap' };
+ const emptyPoint2: object = { mode: 'Average', fill: 'red', border: { width: 2, color: 'blue'} };
+ return
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/index.html b/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/index.html
new file mode 100644
index 000000000..e4fa03cc3
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/index.html
@@ -0,0 +1,58 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs7/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/app/datasource.jsx
new file mode 100644
index 000000000..60faa75f6
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let stackBarData = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/app/datasource.tsx
new file mode 100644
index 000000000..bb9818c75
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let stackBarData: Object[] = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/app/index.jsx
new file mode 100644
index 000000000..706163dd7
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/app/index.jsx
@@ -0,0 +1,40 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ const seriesRender = (args) => {
+ if (args.series.index === 0) {
+ args.fill = '#ff4251';
+ }
+ else if (args.series.index === 1) {
+ args.fill = '#4C4C4C';
+ }
+ else if (args.series.index === 2) {
+ args.fill = '#794F1B';
+ }
+ }
+ return
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/app/index.tsx
new file mode 100644
index 000000000..35783dbbf
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/app/index.tsx
@@ -0,0 +1,48 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, ISeriesRenderEventArgs}
+from'@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis: AxisModel = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+const seriesRender = (args: ISeriesRenderEventArgs) => {
+ if (args.series.index === 0) {
+ args.fill = '#ff4251';
+ }
+ else if (args.series.index === 1) {
+ args.fill = '#4C4C4C';
+ }
+ else if (args.series.index === 2) {
+ args.fill = '#794F1B';
+ }
+};
+ return
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/index.html b/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/index.html
new file mode 100644
index 000000000..e4fa03cc3
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/index.html
@@ -0,0 +1,58 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs8/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/app/datasource.jsx
new file mode 100644
index 000000000..60faa75f6
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let stackBarData = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/app/datasource.tsx
new file mode 100644
index 000000000..bb9818c75
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let stackBarData: Object[] = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/app/index.jsx
new file mode 100644
index 000000000..ef9244753
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/app/index.jsx
@@ -0,0 +1,37 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ const pointRender = (args) => {
+ if (args.point.series.index % 2 !== 0) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+ };
+ return
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/app/index.tsx
new file mode 100644
index 000000000..eb2a3db6f
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/app/index.tsx
@@ -0,0 +1,45 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, IPointRenderEventArgs}
+from'@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis: AxisModel = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+const pointRender = (args: IPointRenderEventArgs) => {
+ if (args.point.series.index % 2 !== 0) {
+ args.fill = '#ff6347';
+}
+else {
+ args.fill = '#009cb8';
+}
+};
+ return
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/index.html b/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/index.html
new file mode 100644
index 000000000..e4fa03cc3
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/index.html
@@ -0,0 +1,58 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedbar-cs9/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs/app/index.jsx
index 20070601b..d48697df6 100644
--- a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs/app/index.jsx
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs/app/index.jsx
@@ -10,13 +10,13 @@ function App() {
return
-
+
-
+
-
+
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs/app/index.tsx
index 775b24465..425b6c02a 100644
--- a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs/app/index.tsx
@@ -18,13 +18,13 @@ function App() {
title='Gross Domestic Product Growth'>
-
+
-
+
-
+
-
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/app/datasource.jsx
new file mode 100644
index 000000000..a7879224d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let columnperData = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/app/datasource.tsx
new file mode 100644
index 000000000..cbe8240dc
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let columnperData: Object[] = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/app/index.jsx
new file mode 100644
index 000000000..40f4a4d28
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/app/index.jsx
@@ -0,0 +1,28 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingColumnSeries } from '@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+function App() {
+ const primaryxAxis = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/app/index.tsx
new file mode 100644
index 000000000..2629cebb5
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/app/index.tsx
@@ -0,0 +1,36 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingColumnSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis: AxisModel = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/index.html b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/index.html
new file mode 100644
index 000000000..efa2e6e28
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/index.html
@@ -0,0 +1,66 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/app/datasource.jsx
new file mode 100644
index 000000000..a7879224d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let columnperData = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/app/datasource.tsx
new file mode 100644
index 000000000..cbe8240dc
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let columnperData: Object[] = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/app/index.jsx
new file mode 100644
index 000000000..19819a8fa
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/app/index.jsx
@@ -0,0 +1,28 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingColumnSeries } from '@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+function App() {
+ const primaryxAxis = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/app/index.tsx
new file mode 100644
index 000000000..5b2615d47
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/app/index.tsx
@@ -0,0 +1,36 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingColumnSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis: AxisModel = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/index.html b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/index.html
new file mode 100644
index 000000000..f9f5fed7e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/datasource.jsx
new file mode 100644
index 000000000..a7879224d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let columnperData = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/datasource.tsx
new file mode 100644
index 000000000..cbe8240dc
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let columnperData: Object[] = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/index.jsx
new file mode 100644
index 000000000..89673008d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/index.jsx
@@ -0,0 +1,29 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingColumnSeries } from '@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+function App() {
+ const primaryxAxis = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+ const border = { width: 2, color: 'blue'};
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/index.tsx
new file mode 100644
index 000000000..5df7cceed
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/app/index.tsx
@@ -0,0 +1,36 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingColumnSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis: AxisModel = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+ const border: object = { width: 2, color: 'blue'};
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/index.html b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/index.html
new file mode 100644
index 000000000..f9f5fed7e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs3/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/datasource.jsx
new file mode 100644
index 000000000..a7879224d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let columnperData = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/datasource.tsx
new file mode 100644
index 000000000..cbe8240dc
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let columnperData: Object[] = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/index.jsx
new file mode 100644
index 000000000..238639042
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/index.jsx
@@ -0,0 +1,29 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingColumnSeries } from '@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+function App() {
+ const primaryxAxis = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+ const border = { width: 2, color: 'blue'};
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/index.tsx
new file mode 100644
index 000000000..5b1e9330c
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/app/index.tsx
@@ -0,0 +1,36 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingColumnSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis: AxisModel = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+ const border: object = { width: 2, color: 'blue'};
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/index.html b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs4/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/app/datasource.jsx
new file mode 100644
index 000000000..dff114a53
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let columnperData = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: null, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: null, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/app/datasource.tsx
new file mode 100644
index 000000000..9d1571490
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let columnperData: Object[] = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: null, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: null, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/app/index.jsx
new file mode 100644
index 000000000..671745c60
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/app/index.jsx
@@ -0,0 +1,30 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingColumnSeries } from '@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+function App() {
+ const primaryxAxis = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+ const emptyPoint = { mode: 'Zero'};
+ const emptyPoint1 = { mode: 'Average'};
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/app/index.tsx
new file mode 100644
index 000000000..57850936a
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/app/index.tsx
@@ -0,0 +1,37 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingColumnSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis: AxisModel = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+ const emptyPoint: object = { mode: 'Zero'};
+ const emptyPoint1: object = { mode: 'Average'};
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/index.html b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/index.html
new file mode 100644
index 000000000..f9f5fed7e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs5/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/app/datasource.jsx
new file mode 100644
index 000000000..dff114a53
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let columnperData = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: null, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: null, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/app/datasource.tsx
new file mode 100644
index 000000000..9d1571490
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let columnperData: Object[] = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: null, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: null, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/app/index.jsx
new file mode 100644
index 000000000..99e203595
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/app/index.jsx
@@ -0,0 +1,30 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingColumnSeries } from '@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+function App() {
+ const primaryxAxis = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+ const emptyPoint = { mode: 'Zero'};
+ const emptyPoint1 = { mode: 'Average', fill: 'red'};
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/app/index.tsx
new file mode 100644
index 000000000..c6fb7e9db
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/app/index.tsx
@@ -0,0 +1,37 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingColumnSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis: AxisModel = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+ const emptyPoint: object = { mode: 'Zero'};
+ const emptyPoint1: object = { mode: 'Average', fill: 'red'};
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/index.html b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs6/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/app/datasource.jsx
new file mode 100644
index 000000000..dff114a53
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let columnperData = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: null, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: null, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/app/datasource.tsx
new file mode 100644
index 000000000..9d1571490
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let columnperData: Object[] = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: null, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: null, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/app/index.jsx
new file mode 100644
index 000000000..0104f8a97
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/app/index.jsx
@@ -0,0 +1,30 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingColumnSeries } from '@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+function App() {
+ const primaryxAxis = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+ const emptyPoint = { mode: 'Zero'};
+ const emptyPoint1 = { mode: 'Average', fill: 'red', border: {width: 1.5, color: 'green'}};
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/app/index.tsx
new file mode 100644
index 000000000..76ee073ab
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/app/index.tsx
@@ -0,0 +1,37 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingColumnSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis: AxisModel = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+ const emptyPoint: object = { mode: 'Zero'};
+ const emptyPoint1: object = { mode: 'Average', fill: 'red', border: {width: 1.5, color: 'green'}};
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/index.html b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs7/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/app/datasource.jsx
new file mode 100644
index 000000000..3819aaf11
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let columnperData = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: 450, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: 220, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/app/datasource.tsx
new file mode 100644
index 000000000..b8a3c52aa
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let columnperData: Object[] = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: 450, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: 220, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/app/index.jsx
new file mode 100644
index 000000000..67ca59cbf
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/app/index.jsx
@@ -0,0 +1,42 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingColumnSeries } from '@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+function App() {
+ const primaryxAxis = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+ const seriesRender = (args) => {
+ if (args.series.index === 0) {
+ args.fill = '#ff4251';
+ }
+ else if (args.series.index === 1) {
+ args.fill = '#4C4C4C';
+ }
+ else if (args.series.index === 2) {
+ args.fill = '#794F1B';
+ }
+ else if (args.series.index === 3) {
+ args.fill = '#1a9a6f';
+ }
+ };
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/app/index.tsx
new file mode 100644
index 000000000..20ae4c7c1
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/app/index.tsx
@@ -0,0 +1,50 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingColumnSeries, ISeriesRenderEventArgs}
+from'@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis: AxisModel = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+ const seriesRender = (args: ISeriesRenderEventArgs) => {
+ if (args.series.index === 0) {
+ args.fill = '#ff4251';
+ }
+ else if (args.series.index === 1) {
+ args.fill = '#4C4C4C';
+ }
+ else if (args.series.index === 2) {
+ args.fill = '#794F1B';
+ }
+ else if (args.series.index === 3) {
+ args.fill = '#1a9a6f';
+ }
+}
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/index.html b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs8/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/app/datasource.jsx
new file mode 100644
index 000000000..3819aaf11
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let columnperData = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: 450, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: 220, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/app/datasource.tsx
new file mode 100644
index 000000000..b8a3c52aa
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let columnperData: Object[] = [
+ { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
+ { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },
+ { x: '2008', y: 450, y1: 194, y2: 190, y3: 115 },
+ { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },
+ { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },
+ { x: '2011', y: 679, y1: 181, y2: 220, y3: 137 },
+ { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/app/index.jsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/app/index.jsx
new file mode 100644
index 000000000..db0faa9f3
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/app/index.jsx
@@ -0,0 +1,36 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingColumnSeries } from '@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+function App() {
+ const primaryxAxis = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+ const pointRender = (args) => {
+ if (args.point.series.index % 2 !== 0) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+ };
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/app/index.tsx b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/app/index.tsx
new file mode 100644
index 000000000..d5e562cea
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/app/index.tsx
@@ -0,0 +1,44 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingColumnSeries, IPointRenderEventArgs}
+from'@syncfusion/ej2-react-charts';
+import { columnperData } from './datasource';
+
+function App() {
+
+ const primaryxAxis: AxisModel = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis: AxisModel = { title: 'GDP (%) Per Annum', rangePadding: 'None', labelFormat: '{value}%' };
+ const pointRender = (args: IPointRenderEventArgs) => {
+ if (args.point.series.index % 2 !== 0) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+}
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/index.html b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/systemjs.config.js b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100-stackedcolumn-cs9/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs1/app/index.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs1/app/index.jsx
index 661664602..aa4e76ff0 100644
--- a/ej2-react/code-snippet/chart/series/100stackedline-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs1/app/index.jsx
@@ -9,13 +9,13 @@ function App() {
return
-
+
-
+
-
+
-
+
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs1/app/index.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs1/app/index.tsx
index e2e044c7a..d08ff909a 100644
--- a/ej2-react/code-snippet/chart/series/100stackedline-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs1/app/index.tsx
@@ -18,13 +18,13 @@ function App() {
title='Family Expense for Month'>
-
+
-
+
-
+
-
+
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/datasource.jsx
new file mode 100644
index 000000000..4150977b9
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let chartData = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/datasource.tsx
new file mode 100644
index 000000000..d9420aa7b
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let chartData: Object[] = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/index.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/index.jsx
new file mode 100644
index 000000000..a972c4379
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/index.jsx
@@ -0,0 +1,27 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingLineSeries } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+function App() {
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ return
+
+
+
+
+
+
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/index.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/index.tsx
new file mode 100644
index 000000000..d9c0c5e73
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/app/index.tsx
@@ -0,0 +1,36 @@
+
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingLineSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+
+function App() {
+
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs1A/index.html b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/index.html
new file mode 100644
index 000000000..fbfbb8e2d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/index.html
@@ -0,0 +1,69 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs1A/systemjs.config.js b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs1A/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs2/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs2/app/datasource.jsx
new file mode 100644
index 000000000..4150977b9
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs2/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let chartData = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs2/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs2/app/datasource.tsx
new file mode 100644
index 000000000..d9420aa7b
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs2/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let chartData: Object[] = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs2/app/index.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs2/app/index.jsx
new file mode 100644
index 000000000..d438253b5
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs2/app/index.jsx
@@ -0,0 +1,27 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingLineSeries } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+function App() {
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ return
+
+
+
+
+
+
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs2/app/index.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs2/app/index.tsx
new file mode 100644
index 000000000..80fa47f2c
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs2/app/index.tsx
@@ -0,0 +1,36 @@
+
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingLineSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+
+function App() {
+
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs2/index.html b/ej2-react/code-snippet/chart/series/100stackedline-cs2/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs2/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs2/systemjs.config.js b/ej2-react/code-snippet/chart/series/100stackedline-cs2/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs3/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs3/app/datasource.jsx
new file mode 100644
index 000000000..4150977b9
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs3/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let chartData = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs3/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs3/app/datasource.tsx
new file mode 100644
index 000000000..d9420aa7b
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs3/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let chartData: Object[] = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs3/app/index.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs3/app/index.jsx
new file mode 100644
index 000000000..50249f361
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs3/app/index.jsx
@@ -0,0 +1,27 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingLineSeries } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+function App() {
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ return
+
+
+
+
+
+
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs3/app/index.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs3/app/index.tsx
new file mode 100644
index 000000000..dd247c177
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs3/app/index.tsx
@@ -0,0 +1,36 @@
+
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingLineSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+
+function App() {
+
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs3/index.html b/ej2-react/code-snippet/chart/series/100stackedline-cs3/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs3/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs3/systemjs.config.js b/ej2-react/code-snippet/chart/series/100stackedline-cs3/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs3/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs4/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs4/app/datasource.jsx
new file mode 100644
index 000000000..4150977b9
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs4/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let chartData = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs4/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs4/app/datasource.tsx
new file mode 100644
index 000000000..d9420aa7b
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs4/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let chartData: Object[] = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs4/app/index.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs4/app/index.jsx
new file mode 100644
index 000000000..bcd2d261f
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs4/app/index.jsx
@@ -0,0 +1,27 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingLineSeries } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+function App() {
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ return
+
+
+
+
+
+
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs4/app/index.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs4/app/index.tsx
new file mode 100644
index 000000000..bf908c883
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs4/app/index.tsx
@@ -0,0 +1,36 @@
+
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingLineSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+
+function App() {
+
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs4/index.html b/ej2-react/code-snippet/chart/series/100stackedline-cs4/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs4/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs4/systemjs.config.js b/ej2-react/code-snippet/chart/series/100stackedline-cs4/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs4/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs5/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs5/app/datasource.jsx
new file mode 100644
index 000000000..e41a87be2
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs5/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let chartData = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: null, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: undefined, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs5/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs5/app/datasource.tsx
new file mode 100644
index 000000000..4f4e8ed1e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs5/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let chartData: Object[] = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: null, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: undefined, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs5/app/index.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs5/app/index.jsx
new file mode 100644
index 000000000..33a3d8b8c
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs5/app/index.jsx
@@ -0,0 +1,29 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingLineSeries } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+function App() {
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ const emptyPoint = { mode: 'Average' };
+ const emptyPoint1 = { mode: 'Gap' };
+ return
+
+
+
+
+
+
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs5/app/index.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs5/app/index.tsx
new file mode 100644
index 000000000..a28549e9e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs5/app/index.tsx
@@ -0,0 +1,37 @@
+
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingLineSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+
+function App() {
+
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ const emptyPoint: object = { mode: 'Average' };
+ const emptyPoint1: object = { mode: 'Gap' };
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs5/index.html b/ej2-react/code-snippet/chart/series/100stackedline-cs5/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs5/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs5/systemjs.config.js b/ej2-react/code-snippet/chart/series/100stackedline-cs5/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs5/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs6/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs6/app/datasource.jsx
new file mode 100644
index 000000000..e41a87be2
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs6/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let chartData = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: null, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: undefined, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs6/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs6/app/datasource.tsx
new file mode 100644
index 000000000..4f4e8ed1e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs6/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let chartData: Object[] = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: null, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: undefined, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs6/app/index.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs6/app/index.jsx
new file mode 100644
index 000000000..936adc38e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs6/app/index.jsx
@@ -0,0 +1,29 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingLineSeries } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+function App() {
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ const emptyPoint = { mode: 'Average', fill: 'red' };
+ const emptyPoint1 = { mode: 'Gap' };
+ return
+
+
+
+
+
+
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs6/app/index.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs6/app/index.tsx
new file mode 100644
index 000000000..4ef21d36f
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs6/app/index.tsx
@@ -0,0 +1,37 @@
+
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingLineSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+
+function App() {
+
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ const emptyPoint: object = { mode: 'Average', fill: 'red' };
+ const emptyPoint1: object = { mode: 'Gap' };
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs6/index.html b/ej2-react/code-snippet/chart/series/100stackedline-cs6/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs6/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs6/systemjs.config.js b/ej2-react/code-snippet/chart/series/100stackedline-cs6/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs6/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs7/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs7/app/datasource.jsx
new file mode 100644
index 000000000..e41a87be2
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs7/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let chartData = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: null, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: undefined, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs7/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs7/app/datasource.tsx
new file mode 100644
index 000000000..4f4e8ed1e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs7/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let chartData: Object[] = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: null, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: undefined, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs7/app/index.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs7/app/index.jsx
new file mode 100644
index 000000000..975259bcf
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs7/app/index.jsx
@@ -0,0 +1,29 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingLineSeries } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+function App() {
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ const emptyPoint = { mode: 'Average', fill: 'red', border: {width: 1.5, fill: 'green'} };
+ const emptyPoint1 = { mode: 'Gap' };
+ return
+
+
+
+
+
+
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs7/app/index.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs7/app/index.tsx
new file mode 100644
index 000000000..532ff8cd2
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs7/app/index.tsx
@@ -0,0 +1,37 @@
+
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingLineSeries, Selection}
+from'@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+
+function App() {
+
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ const emptyPoint: object = { mode: 'Average', fill: 'red', border: {width: 1.5, fill: 'green'} };
+ const emptyPoint1: object = { mode: 'Gap' };
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs7/index.html b/ej2-react/code-snippet/chart/series/100stackedline-cs7/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs7/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs7/systemjs.config.js b/ej2-react/code-snippet/chart/series/100stackedline-cs7/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs7/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs8/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs8/app/datasource.jsx
new file mode 100644
index 000000000..7cc7af267
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs8/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let chartData = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs8/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs8/app/datasource.tsx
new file mode 100644
index 000000000..0945299b3
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs8/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let chartData: Object[] = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs8/app/index.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs8/app/index.jsx
new file mode 100644
index 000000000..adc74d4c4
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs8/app/index.jsx
@@ -0,0 +1,41 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingLineSeries } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+function App() {
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ const seriesRender = (args) => {
+ if (args.series.index === 0) {
+ args.fill = '#ff4251';
+ }
+ else if (args.series.index === 1) {
+ args.fill = '#4C4C4C';
+ }
+ else if (args.series.index === 2) {
+ args.fill = '#794F1B';
+ }
+ else if (args.series.index === 3) {
+ args.fill = '#1a9a6f';
+ }
+ };
+ return
+
+
+
+
+
+
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs8/app/index.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs8/app/index.tsx
new file mode 100644
index 000000000..db23d5292
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs8/app/index.tsx
@@ -0,0 +1,50 @@
+
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingLineSeries, ISeriesRenderEventArgs}
+from'@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+
+function App() {
+
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ const seriesRender= (args: ISeriesRenderEventArgs) => {
+ if (args.series.index === 0) {
+ args.fill = '#ff4251';
+ }
+ else if (args.series.index === 1) {
+ args.fill = '#4C4C4C';
+ }
+ else if (args.series.index === 2) {
+ args.fill = '#794F1B';
+ }
+ else if (args.series.index === 3) {
+ args.fill = '#1a9a6f';
+ }
+}
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs8/index.html b/ej2-react/code-snippet/chart/series/100stackedline-cs8/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs8/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs8/systemjs.config.js b/ej2-react/code-snippet/chart/series/100stackedline-cs8/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs8/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs9/app/datasource.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs9/app/datasource.jsx
new file mode 100644
index 000000000..7cc7af267
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs9/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let chartData = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs9/app/datasource.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs9/app/datasource.tsx
new file mode 100644
index 000000000..0945299b3
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs9/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let chartData: Object[] = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs9/app/index.jsx b/ej2-react/code-snippet/chart/series/100stackedline-cs9/app/index.jsx
new file mode 100644
index 000000000..d0f3a0191
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs9/app/index.jsx
@@ -0,0 +1,35 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingLineSeries } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+function App() {
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ const pointRender = (args) => {
+ if (args.point.y < 70) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+ };
+ return
+
+
+
+
+
+
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs9/app/index.tsx b/ej2-react/code-snippet/chart/series/100stackedline-cs9/app/index.tsx
new file mode 100644
index 000000000..2b930e239
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs9/app/index.tsx
@@ -0,0 +1,44 @@
+
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingLineSeries, IPointRenderEventArgs}
+from'@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+
+function App() {
+
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ const pointRender= (args: IPointRenderEventArgs) => {
+ if (args.point.y < 70) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+}
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs9/index.html b/ej2-react/code-snippet/chart/series/100stackedline-cs9/index.html
new file mode 100644
index 000000000..7fdba8f1d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs9/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/100stackedline-cs9/systemjs.config.js b/ej2-react/code-snippet/chart/series/100stackedline-cs9/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/100stackedline-cs9/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/addpoint-cs/app/index.jsx b/ej2-react/code-snippet/chart/series/addpoint-cs/app/index.jsx
new file mode 100644
index 000000000..f7ecaa224
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/addpoint-cs/app/index.jsx
@@ -0,0 +1,40 @@
+{% raw %}
+
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationAnnotation, AccumulationAnnotationsDirective, AccumulationAnnotationDirective, AccumulationLegend, AccumulationSeries }
+ from '@syncfusion/ej2-react-charts';
+import { pieData } from '../datasource.ts';
+
+function App() {
+
+ const template = chartTemplate;
+ const chartRef = React.useRef < AccumulationChartComponent > (null);
+ let click = () => {
+ if (chartRef.current) {
+ (chartRef.current.series[0]).addPoint({ x: 'Dec', y: 15 });
+ }
+ }
+ function chartTemplate() {
+ return (
);
+ };
+
+ return
+
+};
+export default App;
+ReactDOM.render(
, document.getElementById("charts"));
+
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/addpoint-cs/app/index.tsx b/ej2-react/code-snippet/chart/series/addpoint-cs/app/index.tsx
new file mode 100644
index 000000000..1f26a6785
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/addpoint-cs/app/index.tsx
@@ -0,0 +1,34 @@
+{% raw %}
+
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationAnnotation, AccumulationAnnotationsDirective, AccumulationAnnotationDirective, AccumulationLegend, AccumulationSeries }
+ from '@syncfusion/ej2-react-charts';
+import { pieData } from '../datasource.ts';
+
+function App() {
+
+ const chartRef = React.useRef
(null);
+ let click = () => {
+ if (chartRef.current) {
+ (chartRef.current.series[0] as AccumulationSeries).addPoint({ x: 'Dec', y: 15 });
+ }
+ }
+
+ return
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Accumulation Series
+ (null);
+ let click = () => {
+ if (chartRef.current) {
+ (chartRef.current.series[0] as AccumulationSeries).removePoint(0);
+ }
+ }
+
+ return
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Accumulation Series
+ (null);
+ let click= ()=>{
+ const newData = [
+ { x: 'Jan', y: 3 },
+ { x: 'Feb', y: 3.5 },
+ { x: 'Mar', y: 7 },
+ { x: 'Aug', y: 25 },
+ { x: 'Sep', y: 21 },
+ { x: 'Oct', y: 15 },
+ ];
+
+ if (chartRef.current) {
+ (chartRef.current.series[0] ).setData(newData, 500);
+ }
+ }
+
+ return
+
+};
+export default App;
+ReactDOM.render((null);
+ let click= ()=>{
+ const newData = [
+ { x: 'Jan', y: 3 },
+ { x: 'Feb', y: 3.5 },
+ { x: 'Mar', y: 7 },
+ { x: 'Aug', y: 25 },
+ { x: 'Sep', y: 21 },
+ { x: 'Oct', y: 15 },
+ ];
+
+ if (chartRef.current) {
+ (chartRef.current.series[0] as AccumulationSeries).setData(newData, 500);
+ }
+ }
+
+ return
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Accumulation Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: IPointRenderEventArgs): void => {
+ if (args.point.maximum < 38) {
+ args.fill = '#ff6347';
+ } else {
+ args.fill = '#009cb8';
+ }
+ };
+ return
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Bar Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/box-cs10/systemjs.config.js b/ej2-react/code-snippet/chart/series/box-cs10/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs10/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/box-cs4/app/datasource.jsx b/ej2-react/code-snippet/chart/series/box-cs4/app/datasource.jsx
new file mode 100644
index 000000000..d5bb54fd0
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs4/app/datasource.jsx
@@ -0,0 +1,11 @@
+export let data = [
+ { x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
+ { x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
+ { x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
+ { x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
+ { x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
+ { x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
+ { x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
+ { x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
+ { x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/box-cs4/app/datasource.tsx b/ej2-react/code-snippet/chart/series/box-cs4/app/datasource.tsx
new file mode 100644
index 000000000..c5cef7a2b
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs4/app/datasource.tsx
@@ -0,0 +1,11 @@
+export let data: Object[] = [
+ { x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
+ { x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
+ { x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
+ { x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
+ { x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
+ { x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
+ { x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
+ { x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
+ { x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/box-cs4/app/index.jsx b/ej2-react/code-snippet/chart/series/box-cs4/app/index.jsx
new file mode 100644
index 000000000..295754adb
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs4/app/index.jsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, BoxAndWhiskerSeries, Category } from '@syncfusion/ej2-react-charts';
+import { data } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', majorGridLines: { width: 0 }, };
+ const primaryyAxis = { minimum: 10, maximum: 60, interval: 10, majorGridLines: { width: 0 }, majorTickLines: { width: 0 } };
+ const marker = { visible: true };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Bar Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Bar Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/box-cs5/systemjs.config.js b/ej2-react/code-snippet/chart/series/box-cs5/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs5/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/box-cs6/app/datasource.jsx b/ej2-react/code-snippet/chart/series/box-cs6/app/datasource.jsx
new file mode 100644
index 000000000..d5bb54fd0
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs6/app/datasource.jsx
@@ -0,0 +1,11 @@
+export let data = [
+ { x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
+ { x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
+ { x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
+ { x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
+ { x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
+ { x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
+ { x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
+ { x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
+ { x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/box-cs6/app/datasource.tsx b/ej2-react/code-snippet/chart/series/box-cs6/app/datasource.tsx
new file mode 100644
index 000000000..c5cef7a2b
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs6/app/datasource.tsx
@@ -0,0 +1,11 @@
+export let data: Object[] = [
+ { x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
+ { x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
+ { x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
+ { x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
+ { x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
+ { x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
+ { x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
+ { x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
+ { x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/box-cs6/app/index.jsx b/ej2-react/code-snippet/chart/series/box-cs6/app/index.jsx
new file mode 100644
index 000000000..caa18bc26
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs6/app/index.jsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, BoxAndWhiskerSeries, Category } from '@syncfusion/ej2-react-charts';
+import { data } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', majorGridLines: { width: 0 }, };
+ const primaryyAxis = { minimum: 10, maximum: 60, interval: 10, majorGridLines: { width: 0 }, majorTickLines: { width: 0 } };
+ const marker = { visible: true };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Bar Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/box-cs6/systemjs.config.js b/ej2-react/code-snippet/chart/series/box-cs6/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs6/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/box-cs7/app/datasource.jsx b/ej2-react/code-snippet/chart/series/box-cs7/app/datasource.jsx
new file mode 100644
index 000000000..d5bb54fd0
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs7/app/datasource.jsx
@@ -0,0 +1,11 @@
+export let data = [
+ { x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
+ { x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
+ { x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
+ { x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
+ { x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
+ { x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
+ { x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
+ { x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
+ { x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/box-cs7/app/datasource.tsx b/ej2-react/code-snippet/chart/series/box-cs7/app/datasource.tsx
new file mode 100644
index 000000000..c5cef7a2b
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs7/app/datasource.tsx
@@ -0,0 +1,11 @@
+export let data: Object[] = [
+ { x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
+ { x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
+ { x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
+ { x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
+ { x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
+ { x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
+ { x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
+ { x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
+ { x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/box-cs7/app/index.jsx b/ej2-react/code-snippet/chart/series/box-cs7/app/index.jsx
new file mode 100644
index 000000000..5ce4e8c53
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs7/app/index.jsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, BoxAndWhiskerSeries, Category } from '@syncfusion/ej2-react-charts';
+import { data } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', majorGridLines: { width: 0 }, };
+ const primaryyAxis = { minimum: 10, maximum: 60, interval: 10, majorGridLines: { width: 0 }, majorTickLines: { width: 0 } };
+ const marker = { visible: true };
+ const border = { width: 1.5, color: 'red' };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Bar Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/box-cs7/systemjs.config.js b/ej2-react/code-snippet/chart/series/box-cs7/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs7/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/box-cs8/app/datasource.jsx b/ej2-react/code-snippet/chart/series/box-cs8/app/datasource.jsx
new file mode 100644
index 000000000..d5bb54fd0
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs8/app/datasource.jsx
@@ -0,0 +1,11 @@
+export let data = [
+ { x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
+ { x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
+ { x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
+ { x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
+ { x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
+ { x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
+ { x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
+ { x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
+ { x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/box-cs8/app/datasource.tsx b/ej2-react/code-snippet/chart/series/box-cs8/app/datasource.tsx
new file mode 100644
index 000000000..c5cef7a2b
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs8/app/datasource.tsx
@@ -0,0 +1,11 @@
+export let data: Object[] = [
+ { x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
+ { x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
+ { x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
+ { x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
+ { x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
+ { x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
+ { x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
+ { x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
+ { x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/box-cs8/app/index.jsx b/ej2-react/code-snippet/chart/series/box-cs8/app/index.jsx
new file mode 100644
index 000000000..6fb6994ba
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs8/app/index.jsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, BoxAndWhiskerSeries, Category } from '@syncfusion/ej2-react-charts';
+import { data } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', majorGridLines: { width: 0 }, };
+ const primaryyAxis = { minimum: 10, maximum: 60, interval: 10, majorGridLines: { width: 0 }, majorTickLines: { width: 0 } };
+ const marker = { visible: true };
+ const border = { width: 1.5, color: 'red' };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Bar Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/box-cs8/systemjs.config.js b/ej2-react/code-snippet/chart/series/box-cs8/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs8/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/box-cs9/app/datasource.jsx b/ej2-react/code-snippet/chart/series/box-cs9/app/datasource.jsx
new file mode 100644
index 000000000..d5bb54fd0
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs9/app/datasource.jsx
@@ -0,0 +1,11 @@
+export let data = [
+ { x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
+ { x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
+ { x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
+ { x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
+ { x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
+ { x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
+ { x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
+ { x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
+ { x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/box-cs9/app/datasource.tsx b/ej2-react/code-snippet/chart/series/box-cs9/app/datasource.tsx
new file mode 100644
index 000000000..c5cef7a2b
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs9/app/datasource.tsx
@@ -0,0 +1,11 @@
+export let data: Object[] = [
+ { x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
+ { x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
+ { x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
+ { x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
+ { x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
+ { x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
+ { x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
+ { x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
+ { x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/box-cs9/app/index.jsx b/ej2-react/code-snippet/chart/series/box-cs9/app/index.jsx
new file mode 100644
index 000000000..a43a68e59
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs9/app/index.jsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, BoxAndWhiskerSeries, Category } from '@syncfusion/ej2-react-charts';
+import { data } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', majorGridLines: { width: 0 }, };
+ const primaryyAxis = { minimum: 10, maximum: 60, interval: 10, majorGridLines: { width: 0 }, majorTickLines: { width: 0 } };
+ const marker = { visible: true };
+ const seriesRender = (args) => {
+ args.fill = '#ff6347';
+ };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: ISeriesRenderEventArgs): void => {
+ args.fill = '#ff6347';
+ };
+ return
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Bar Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/box-cs9/systemjs.config.js b/ej2-react/code-snippet/chart/series/box-cs9/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/box-cs9/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/bubble-cs/app/index.jsx b/ej2-react/code-snippet/chart/series/bubble-cs/app/index.jsx
index 1431cbe2c..91135c1ca 100644
--- a/ej2-react/code-snippet/chart/series/bubble-cs/app/index.jsx
+++ b/ej2-react/code-snippet/chart/series/bubble-cs/app/index.jsx
@@ -8,7 +8,7 @@ function App() {
return
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/bubble-cs/app/index.tsx b/ej2-react/code-snippet/chart/series/bubble-cs/app/index.tsx
index 171e84416..9df848307 100644
--- a/ej2-react/code-snippet/chart/series/bubble-cs/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/bubble-cs/app/index.tsx
@@ -18,7 +18,7 @@ const primaryyAxis: AxisModel= { title: 'GDP growth rate', minimum: -2, maximum:
title='GDP vs Literacy Rate'>
-
+
diff --git a/ej2-react/code-snippet/chart/series/bubble-cs1/app/datasource.jsx b/ej2-react/code-snippet/chart/series/bubble-cs1/app/datasource.jsx
new file mode 100644
index 000000000..1eebc1a3e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/bubble-cs1/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let data = [
+ { x: 92.2, y: 7.8, size: 1.347, text: 'China' },
+ { x: 74, y: 6.5, size: 1.241, text: 'India' },
+ { x: 90.4, y: 6.0, size: 0.238, text: 'Indonesia' },
+ { x: 99.4, y: 2.2, size: 0.312, text: 'US' },
+ { x: 88.6, y: 1.3, size: 0.197, text: 'Brazil' },
+ { x: 99, y: 0.7, size: 0.0818, text: 'Germany' },
+ { x: 72, y: 2.0, size: 0.0826, text: 'Egypt' },
+ { x: 99.6, y: 3.4, size: 0.143, text: 'Russia' },
+ { x: 99, y: 0.2, size: 0.128, text: 'Japan' },
+ { x: 86.1, y: 4.0, size: 0.115, text: 'Mexico' },
+ { x: 92.6, y: 6.6, size: 0.096, text: 'Philippines' },
+ { x: 61.3, y: 14.5, size: 0.162, text: 'Nigeria' }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/bubble-cs1/app/datasource.tsx b/ej2-react/code-snippet/chart/series/bubble-cs1/app/datasource.tsx
new file mode 100644
index 000000000..1a1d61ebe
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/bubble-cs1/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let data: Object[] = [
+ { x: 92.2, y: 7.8, size: 1.347, text: 'China' },
+ { x: 74, y: 6.5, size: 1.241, text: 'India' },
+ { x: 90.4, y: 6.0, size: 0.238, text: 'Indonesia' },
+ { x: 99.4, y: 2.2, size: 0.312, text: 'US' },
+ { x: 88.6, y: 1.3, size: 0.197, text: 'Brazil' },
+ { x: 99, y: 0.7, size: 0.0818, text: 'Germany' },
+ { x: 72, y: 2.0, size: 0.0826, text: 'Egypt' },
+ { x: 99.6, y: 3.4, size: 0.143, text: 'Russia' },
+ { x: 99, y: 0.2, size: 0.128, text: 'Japan' },
+ { x: 86.1, y: 4.0, size: 0.115, text: 'Mexico' },
+ { x: 92.6, y: 6.6, size: 0.096, text: 'Philippines' },
+ { x: 61.3, y: 14.5, size: 0.162, text: 'Nigeria' }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/bubble-cs1/app/index.jsx b/ej2-react/code-snippet/chart/series/bubble-cs1/app/index.jsx
new file mode 100644
index 000000000..1fea39d54
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/bubble-cs1/app/index.jsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, BubbleSeries } from '@syncfusion/ej2-react-charts';
+import { data } from './datasource';
+function App() {
+ const primaryxAxis = { title: 'Literacy Rate', minimum: 60, maximum: 100, interval: 5 };
+ const primaryyAxis = { title: 'GDP growth rate', minimum: -2, maximum: 16, interval: 2 };
+ return
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: ISeriesRenderEventArgs): void => {
+ args.fill = '#ff6347';
+};
+ return
+ seriesRender={seriesRender}
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: IPointRenderEventArgs): void => {
+ args.fill = '#ff6347';
+};
+ return
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: ISeriesRenderEventArgs): void => {
+ args.series.bearFillColor = '#ff6347';
+ args.series.bullFillColor = '#009cb8';
+ };
+ return
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: IPointRenderEventArgs): void => {
+ if (args.point.index % 2 !== 0) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+ };
+ return
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: ISeriesRenderEventArgs): void => {
+ args.fill = '#ff6347';
+ };
+ return
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: IPointRenderEventArgs): void => {
+ args.fill = '#ff6347';
+ };
+ return
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs3/systemjs.config.js b/ej2-react/code-snippet/chart/series/hilo-cs3/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs3/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs4/app/datasource.jsx b/ej2-react/code-snippet/chart/series/hilo-cs4/app/datasource.jsx
new file mode 100644
index 000000000..f13549379
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs4/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let chartData = [
+ { x: 'Jan', low: 87, high: 200 }, { x: 'Feb', low: 45, high: 135 },
+ { x: 'Mar', low: 19, high: 85 }, { x: 'Apr', low: 31, high: 108 },
+ { x: 'May', low: 27, high: 80 }, { x: 'June', low: 84, high: 130 },
+ { x: 'July', low: 77, high: 150 }, { x: 'Aug', low: 54, high: 125 },
+ { x: 'Sep', low: 60, high: 155 }, { x: 'Oct', low: 60, high: 180 },
+ { x: 'Nov', low: 88, high: 180 }, { x: 'Dec', low: 84, high: 230 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs4/app/datasource.tsx b/ej2-react/code-snippet/chart/series/hilo-cs4/app/datasource.tsx
new file mode 100644
index 000000000..1a3c09b64
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs4/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let chartData: Object[] = [
+ { x: 'Jan', low: 87, high: 200 }, { x: 'Feb', low: 45, high: 135 },
+ { x: 'Mar', low: 19, high: 85 }, { x: 'Apr', low: 31, high: 108 },
+ { x: 'May', low: 27, high: 80 }, { x: 'June', low: 84, high: 130 },
+ { x: 'July', low: 77, high: 150 }, { x: 'Aug', low: 54, high: 125 },
+ { x: 'Sep', low: 60, high: 155 }, { x: 'Oct', low: 60, high: 180 },
+ { x: 'Nov', low: 88, high: 180 }, { x: 'Dec', low: 84, high: 230 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs4/app/index.jsx b/ej2-react/code-snippet/chart/series/hilo-cs4/app/index.jsx
new file mode 100644
index 000000000..88e1e51db
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs4/app/index.jsx
@@ -0,0 +1,25 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, HiloSeries, Category, Tooltip, Zoom, Crosshair } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = { labelFormat: '{value}mm', edgeLabelPlacement: 'Shift', title: 'Rainfall' };
+ const style = { textAlign: "center" };
+ const legendSettings = { visible: false };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs4/systemjs.config.js b/ej2-react/code-snippet/chart/series/hilo-cs4/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs4/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs5/app/datasource.jsx b/ej2-react/code-snippet/chart/series/hilo-cs5/app/datasource.jsx
new file mode 100644
index 000000000..f18af6dd6
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs5/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let chartData = [
+ { x: 'Jan', low: 87, high: 200 }, { x: 'Feb', low: 45, high: 135 },
+ { x: 'Mar', low: 19, high: null }, { x: 'Apr', low: 31, high: 108 },
+ { x: 'May', low: 27, high: 80 }, { x: 'Jun', low: 84, high: 130 },
+ { x: 'Jul', low: 77, high: 150 }, { x: 'Aug', low: 54, high: undefined },
+ { x: 'Sep', low: 60, high: 155 }, { x: 'Oct', low: 60, high: 180 },
+ { x: 'Nov', low: 88, high: 180 }, { x: 'Dec', low: 84, high: 230 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs5/app/datasource.tsx b/ej2-react/code-snippet/chart/series/hilo-cs5/app/datasource.tsx
new file mode 100644
index 000000000..d43eac5ef
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs5/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let chartData: Object[] = [
+ { x: 'Jan', low: 87, high: 200 }, { x: 'Feb', low: 45, high: 135 },
+ { x: 'Mar', low: 19, high: null }, { x: 'Apr', low: 31, high: 108 },
+ { x: 'May', low: 27, high: 80 }, { x: 'Jun', low: 84, high: 130 },
+ { x: 'Jul', low: 77, high: 150 }, { x: 'Aug', low: 54, high: undefined },
+ { x: 'Sep', low: 60, high: 155 }, { x: 'Oct', low: 60, high: 180 },
+ { x: 'Nov', low: 88, high: 180 }, { x: 'Dec', low: 84, high: 230 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs5/app/index.jsx b/ej2-react/code-snippet/chart/series/hilo-cs5/app/index.jsx
new file mode 100644
index 000000000..ff311fae2
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs5/app/index.jsx
@@ -0,0 +1,26 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, HiloSeries, Category, Tooltip, Zoom, Crosshair } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = { labelFormat: '{value}mm', edgeLabelPlacement: 'Shift', title: 'Rainfall' };
+ const style = { textAlign: "center" };
+ const legendSettings = { visible: false };
+ const emptyPoint = { mode: 'Gap' };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs5/systemjs.config.js b/ej2-react/code-snippet/chart/series/hilo-cs5/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs5/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs6/app/datasource.jsx b/ej2-react/code-snippet/chart/series/hilo-cs6/app/datasource.jsx
new file mode 100644
index 000000000..f18af6dd6
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs6/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let chartData = [
+ { x: 'Jan', low: 87, high: 200 }, { x: 'Feb', low: 45, high: 135 },
+ { x: 'Mar', low: 19, high: null }, { x: 'Apr', low: 31, high: 108 },
+ { x: 'May', low: 27, high: 80 }, { x: 'Jun', low: 84, high: 130 },
+ { x: 'Jul', low: 77, high: 150 }, { x: 'Aug', low: 54, high: undefined },
+ { x: 'Sep', low: 60, high: 155 }, { x: 'Oct', low: 60, high: 180 },
+ { x: 'Nov', low: 88, high: 180 }, { x: 'Dec', low: 84, high: 230 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs6/app/datasource.tsx b/ej2-react/code-snippet/chart/series/hilo-cs6/app/datasource.tsx
new file mode 100644
index 000000000..d43eac5ef
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs6/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let chartData: Object[] = [
+ { x: 'Jan', low: 87, high: 200 }, { x: 'Feb', low: 45, high: 135 },
+ { x: 'Mar', low: 19, high: null }, { x: 'Apr', low: 31, high: 108 },
+ { x: 'May', low: 27, high: 80 }, { x: 'Jun', low: 84, high: 130 },
+ { x: 'Jul', low: 77, high: 150 }, { x: 'Aug', low: 54, high: undefined },
+ { x: 'Sep', low: 60, high: 155 }, { x: 'Oct', low: 60, high: 180 },
+ { x: 'Nov', low: 88, high: 180 }, { x: 'Dec', low: 84, high: 230 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs6/app/index.jsx b/ej2-react/code-snippet/chart/series/hilo-cs6/app/index.jsx
new file mode 100644
index 000000000..1f092cb33
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs6/app/index.jsx
@@ -0,0 +1,26 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, HiloSeries, Category, Tooltip, Zoom, Crosshair } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = { labelFormat: '{value}mm', edgeLabelPlacement: 'Shift', title: 'Rainfall' };
+ const style = { textAlign: "center" };
+ const legendSettings = { visible: false };
+ const emptyPoint = { mode: 'Average', fill: 'red' };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs6/systemjs.config.js b/ej2-react/code-snippet/chart/series/hilo-cs6/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs6/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs7/app/datasource.jsx b/ej2-react/code-snippet/chart/series/hilo-cs7/app/datasource.jsx
new file mode 100644
index 000000000..c5f862dc2
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs7/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let chartData = [
+ { x: 'Jan', low: 87, high: 200 }, { x: 'Feb', low: 45, high: 135 },
+ { x: 'Mar', low: 19, high: 85 }, { x: 'Apr', low: 31, high: 108 },
+ { x: 'May', low: 27, high: 80 }, { x: 'Jun', low: 84, high: 130 },
+ { x: 'Jul', low: 77, high: 150 }, { x: 'Aug', low: 54, high: 125 },
+ { x: 'Sep', low: 60, high: 155 }, { x: 'Oct', low: 60, high: 180 },
+ { x: 'Nov', low: 88, high: 180 }, { x: 'Dec', low: 84, high: 230 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs7/app/datasource.tsx b/ej2-react/code-snippet/chart/series/hilo-cs7/app/datasource.tsx
new file mode 100644
index 000000000..8a8a3c7df
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs7/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let chartData: Object[] = [
+ { x: 'Jan', low: 87, high: 200 }, { x: 'Feb', low: 45, high: 135 },
+ { x: 'Mar', low: 19, high: 85 }, { x: 'Apr', low: 31, high: 108 },
+ { x: 'May', low: 27, high: 80 }, { x: 'Jun', low: 84, high: 130 },
+ { x: 'Jul', low: 77, high: 150 }, { x: 'Aug', low: 54, high: 125 },
+ { x: 'Sep', low: 60, high: 155 }, { x: 'Oct', low: 60, high: 180 },
+ { x: 'Nov', low: 88, high: 180 }, { x: 'Dec', low: 84, high: 230 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs7/app/index.jsx b/ej2-react/code-snippet/chart/series/hilo-cs7/app/index.jsx
new file mode 100644
index 000000000..cb799d390
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs7/app/index.jsx
@@ -0,0 +1,28 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, HiloSeries, Category, Tooltip, Zoom, Crosshair } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = { labelFormat: '{value}mm', edgeLabelPlacement: 'Shift', title: 'Rainfall' };
+ const style = { textAlign: "center" };
+ const legendSettings = { visible: false };
+ const seriesRender = (args) => {
+ args.fill = '#ff6347';
+ };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs7/systemjs.config.js b/ej2-react/code-snippet/chart/series/hilo-cs7/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs7/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs8/app/datasource.jsx b/ej2-react/code-snippet/chart/series/hilo-cs8/app/datasource.jsx
new file mode 100644
index 000000000..c5f862dc2
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs8/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let chartData = [
+ { x: 'Jan', low: 87, high: 200 }, { x: 'Feb', low: 45, high: 135 },
+ { x: 'Mar', low: 19, high: 85 }, { x: 'Apr', low: 31, high: 108 },
+ { x: 'May', low: 27, high: 80 }, { x: 'Jun', low: 84, high: 130 },
+ { x: 'Jul', low: 77, high: 150 }, { x: 'Aug', low: 54, high: 125 },
+ { x: 'Sep', low: 60, high: 155 }, { x: 'Oct', low: 60, high: 180 },
+ { x: 'Nov', low: 88, high: 180 }, { x: 'Dec', low: 84, high: 230 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs8/app/datasource.tsx b/ej2-react/code-snippet/chart/series/hilo-cs8/app/datasource.tsx
new file mode 100644
index 000000000..8a8a3c7df
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs8/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let chartData: Object[] = [
+ { x: 'Jan', low: 87, high: 200 }, { x: 'Feb', low: 45, high: 135 },
+ { x: 'Mar', low: 19, high: 85 }, { x: 'Apr', low: 31, high: 108 },
+ { x: 'May', low: 27, high: 80 }, { x: 'Jun', low: 84, high: 130 },
+ { x: 'Jul', low: 77, high: 150 }, { x: 'Aug', low: 54, high: 125 },
+ { x: 'Sep', low: 60, high: 155 }, { x: 'Oct', low: 60, high: 180 },
+ { x: 'Nov', low: 88, high: 180 }, { x: 'Dec', low: 84, high: 230 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs8/app/index.jsx b/ej2-react/code-snippet/chart/series/hilo-cs8/app/index.jsx
new file mode 100644
index 000000000..847e4451e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs8/app/index.jsx
@@ -0,0 +1,33 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, HiloSeries, Category, Tooltip, Zoom, Crosshair } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = { labelFormat: '{value}mm', edgeLabelPlacement: 'Shift', title: 'Rainfall' };
+ const style = { textAlign: "center" };
+ const legendSettings = { visible: false };
+ const pointRender = (args) => {
+ if (args.point.index % 2 !== 0) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+ };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hilo-cs8/systemjs.config.js b/ej2-react/code-snippet/chart/series/hilo-cs8/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hilo-cs8/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/hiloopenclose-cs3/app/datasource.jsx b/ej2-react/code-snippet/chart/series/hiloopenclose-cs3/app/datasource.jsx
new file mode 100644
index 000000000..117593741
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hiloopenclose-cs3/app/datasource.jsx
@@ -0,0 +1,7 @@
+export let chartData = [
+ { x: 'Jan', open: 120, high: 160, low: 100, close: 140 },
+ { x: 'Feb', open: 150, high: 190, low: 130, close: 170 },
+ { x: 'Mar', open: 130, high: null, low: 110, close: 150 },
+ { x: 'Apr', open: 160, high: 180, low: 120, close: 140 },
+ { x: 'May', open: 150, high: 170, low: 110, close: 130 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hiloopenclose-cs3/app/datasource.tsx b/ej2-react/code-snippet/chart/series/hiloopenclose-cs3/app/datasource.tsx
new file mode 100644
index 000000000..329cbaa3d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hiloopenclose-cs3/app/datasource.tsx
@@ -0,0 +1,7 @@
+export let chartData: Object[] = [
+ { x: 'Jan', open: 120, high: 160, low: 100, close: 140 },
+ { x: 'Feb', open: 150, high: 190, low: 130, close: 170 },
+ { x: 'Mar', open: 130, high: null, low: 110, close: 150 },
+ { x: 'Apr', open: 160, high: 180, low: 120, close: 140 },
+ { x: 'May', open: 150, high: 170, low: 110, close: 130 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/hiloopenclose-cs3/app/index.jsx b/ej2-react/code-snippet/chart/series/hiloopenclose-cs3/app/index.jsx
new file mode 100644
index 000000000..5085ea92f
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/hiloopenclose-cs3/app/index.jsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, Tooltip, Zoom, Crosshair, HiloOpenCloseSeries } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+function App() {
+ const primaryxAxis = { title: 'Date', valueType: 'Category' };
+ const primaryyAxis = { title: 'Price in Dollar', minimum: 100, maximum: 200, interval: 20 };
+ const style = { textAlign: "center" };
+ const legendSettings = { visible: false };
+ const emptyPoint = { mode: 'Average' };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: ISeriesRenderEventArgs): void => {
+ args.series.bearFillColor = '#ff6347';
+ args.series.bullFillColor = '#009cb8';
+ };
+ return
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: IPointRenderEventArgs): void => {
+ if (args.point.index % 2 !== 0) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+ };
+ return
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/line-cs13/app/index.tsx b/ej2-react/code-snippet/chart/series/line-cs13/app/index.tsx
index 0354ae5cb..b2c9ad69f 100644
--- a/ej2-react/code-snippet/chart/series/line-cs13/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/line-cs13/app/index.tsx
@@ -9,14 +9,11 @@ import { data } from './datasource';
function App() {
- const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
return
-
+
diff --git a/ej2-react/code-snippet/chart/series/line-cs20/app/index.jsx b/ej2-react/code-snippet/chart/series/line-cs20/app/index.jsx
index ca85409e8..efafb4881 100644
--- a/ej2-react/code-snippet/chart/series/line-cs20/app/index.jsx
+++ b/ej2-react/code-snippet/chart/series/line-cs20/app/index.jsx
@@ -1,18 +1,17 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
-import { areaData } from './datasource';
+import { areaData } from './datasource'
function App() {
const primaryxAxis = {
title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'
};
const primaryyAxis = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
- const border = { color: 'red', width: 2 };
return
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/line-cs20/app/index.tsx b/ej2-react/code-snippet/chart/series/line-cs20/app/index.tsx
index 17022b406..7caa62852 100644
--- a/ej2-react/code-snippet/chart/series/line-cs20/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/line-cs20/app/index.tsx
@@ -23,8 +23,7 @@ function App() {
+ fill='green' type='Area'>
diff --git a/ej2-react/code-snippet/chart/series/line-cs20A/app/datasource.jsx b/ej2-react/code-snippet/chart/series/line-cs20A/app/datasource.jsx
new file mode 100644
index 000000000..b8fa1e9b9
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs20A/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let areaData = [
+ { x: 1900, y: 4 },
+ { x: 1920, y: 3.0 },
+ { x: 1940, y: 3.8 },
+ { x: 1960, y: 3.4 },
+ { x: 1980, y: 3.2 },
+ { x: 2000, y: 3.9 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/line-cs20A/app/datasource.tsx b/ej2-react/code-snippet/chart/series/line-cs20A/app/datasource.tsx
new file mode 100644
index 000000000..0966a8499
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs20A/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let areaData: Object[] = [
+ { x: 1900, y: 4 },
+ { x: 1920, y: 3.0 },
+ { x: 1940, y: 3.8 },
+ { x: 1960, y: 3.4 },
+ { x: 1980, y: 3.2 },
+ { x: 2000, y: 3.9 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/line-cs20A/app/index.jsx b/ej2-react/code-snippet/chart/series/line-cs20A/app/index.jsx
new file mode 100644
index 000000000..d6a59eb5d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs20A/app/index.jsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
+import { areaData } from './datasource'
+function App() {
+ const primaryxAxis = {
+ title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
+ edgeLabelPlacement: 'Shift'
+ };
+ const primaryyAxis = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/line-cs20A/systemjs.config.js b/ej2-react/code-snippet/chart/series/line-cs20A/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs20A/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/line-cs21/app/index.jsx b/ej2-react/code-snippet/chart/series/line-cs21/app/index.jsx
index d3311e882..9b8bb4631 100644
--- a/ej2-react/code-snippet/chart/series/line-cs21/app/index.jsx
+++ b/ej2-react/code-snippet/chart/series/line-cs21/app/index.jsx
@@ -1,24 +1,22 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
-import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, AreaSeries } from '@syncfusion/ej2-react-charts';
import { areaData } from './datasource';
function App() {
const primaryxAxis = {
title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'
};
- primaryyAxis: AxisModel = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
- border = { width: 2 };
- render();
- {
- return
+ const primaryyAxis = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
+ const border = { color: 'red', width: 2 };
+ return
-
+
;
- }
}
;
export default App;
diff --git a/ej2-react/code-snippet/chart/series/line-cs21/app/index.tsx b/ej2-react/code-snippet/chart/series/line-cs21/app/index.tsx
index b6d192143..b59f548b6 100644
--- a/ej2-react/code-snippet/chart/series/line-cs21/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/line-cs21/app/index.tsx
@@ -2,30 +2,28 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
-import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
- Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, AreaSeries, Selection}
-from'@syncfusion/ej2-react-charts';
+import {
+ AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
+ Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, AreaSeries, Selection
+}
+ from '@syncfusion/ej2-react-charts';
import { areaData } from './datasource';
function App() {
- const primaryxAxis: AxisModel = {
+ const primaryxAxis = {
title: 'Year', minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'
};
- const primaryyAxis: AxisModel = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
- const border = { width: 2 };
-
- return
-
-
-
-
-
+ const primaryyAxis = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
+ const border = { color: 'red', width: 2 };
+
+ return
+
+
+
+
+
};
export default App;
diff --git a/ej2-react/code-snippet/chart/series/line-cs25/app/index.jsx b/ej2-react/code-snippet/chart/series/line-cs25/app/index.jsx
index 2fce6fa38..1f65010bd 100644
--- a/ej2-react/code-snippet/chart/series/line-cs25/app/index.jsx
+++ b/ej2-react/code-snippet/chart/series/line-cs25/app/index.jsx
@@ -5,11 +5,10 @@ import { columnData } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
- const border = { color: 'brown', width: 2 };
return
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/line-cs25/app/index.tsx b/ej2-react/code-snippet/chart/series/line-cs25/app/index.tsx
index e931b10d3..7215a26aa 100644
--- a/ej2-react/code-snippet/chart/series/line-cs25/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/line-cs25/app/index.tsx
@@ -11,7 +11,6 @@ function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
- const border = { color: 'brown', width: 2 };
return
+ fill='yellow'>
diff --git a/ej2-react/code-snippet/chart/series/line-cs30/app/index.jsx b/ej2-react/code-snippet/chart/series/line-cs30/app/index.jsx
index f4707a3d1..218425b6b 100644
--- a/ej2-react/code-snippet/chart/series/line-cs30/app/index.jsx
+++ b/ej2-react/code-snippet/chart/series/line-cs30/app/index.jsx
@@ -10,11 +10,10 @@ function App() {
minimum: 3, maximum: 12, interval: 1, title: 'Percentage',
labelFormat: '{value}%'
};
- const border = { color: 'brown', width: 2 };
return
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/line-cs30/app/index.tsx b/ej2-react/code-snippet/chart/series/line-cs30/app/index.tsx
index 55b4ce7cf..ca22260dd 100644
--- a/ej2-react/code-snippet/chart/series/line-cs30/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/line-cs30/app/index.tsx
@@ -14,7 +14,6 @@ function App() {
minimum: 3, maximum: 12, interval: 1, title: 'Percentage',
labelFormat: '{value}%'
};
- const border = { color: 'brown', width: 2 };
return
-
+
diff --git a/ej2-react/code-snippet/chart/series/line-cs38A/app/datasource.jsx b/ej2-react/code-snippet/chart/series/line-cs38A/app/datasource.jsx
new file mode 100644
index 000000000..2e072a4ee
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs38A/app/datasource.jsx
@@ -0,0 +1,10 @@
+export let columnData = [
+ { country: "USA", gold: 50, silver: 41 },
+ { country: "China", gold: 40, silver: 45 },
+ { country: "Japan", gold: 70, silver: 48 },
+ { country: "Australia", gold: 60, silver: 50 },
+ { country: "France", gold: 50, silver: 35 },
+ { country: "Germany", gold: 40, silver: 28 },
+ { country: "Italy", gold: 40, silver: 30 },
+ { country: "Sweden", gold: 30, silver: 25 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/line-cs38A/app/datasource.tsx b/ej2-react/code-snippet/chart/series/line-cs38A/app/datasource.tsx
new file mode 100644
index 000000000..26b4ea6e3
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs38A/app/datasource.tsx
@@ -0,0 +1,10 @@
+export let columnData: Object[] = [
+ { country: "USA", gold: 50, silver: 41 },
+ { country: "China", gold: 40, silver: 45 },
+ { country: "Japan", gold: 70, silver: 48 },
+ { country: "Australia", gold: 60, silver: 50 },
+ { country: "France", gold: 50, silver: 35 },
+ { country: "Germany", gold: 40, silver: 28 },
+ { country: "Italy", gold: 40, silver: 30 },
+ { country: "Sweden", gold: 30, silver: 25 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/line-cs38A/app/index.jsx b/ej2-react/code-snippet/chart/series/line-cs38A/app/index.jsx
new file mode 100644
index 000000000..94f4b94fd
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs38A/app/index.jsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
+import { columnData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Countries' };
+ const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+ );
+}
+export default App;
+ReactDOM.render(
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+ );
+}
+export default App;
+ReactDOM.render(
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+ );
+}
+export default App;
+ReactDOM.render(
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+ );
+}
+export default App;
+ReactDOM.render( = (args: IPointRenderEventArgs): void => {
+ args.fill = '#ff6347';
+ };
+
+ return
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+ );
+}
+export default App;
+ReactDOM.render( = (args: ISeriesRenderEventArgs): void => {
+ args.fill = '#ff6347';
+ };
+
+ return
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/line-cs52/systemjs.config.js b/ej2-react/code-snippet/chart/series/line-cs52/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs52/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/line-cs53/app/datasource.jsx b/ej2-react/code-snippet/chart/series/line-cs53/app/datasource.jsx
new file mode 100644
index 000000000..3717a2117
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs53/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let customData = [
+ { x: 2006, y: 7.8, point: 'red' },
+ { x: 2007, y: 7.2, point: 'green' },
+ { x: 2008, y: 6.8, point: 'orange' },
+ { x: 2009, y: 10.7, point: 'yellow' },
+ { x: 2010, y: 10.8, point: 'grey' },
+ { x: 2011, y: 9.8, point: 'blue' }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/line-cs53/app/datasource.tsx b/ej2-react/code-snippet/chart/series/line-cs53/app/datasource.tsx
new file mode 100644
index 000000000..4d0375ce3
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs53/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let customData: Object[] = [
+ { x: 2006, y: 7.8, point: 'red' },
+ { x: 2007, y: 7.2, point: 'green' },
+ { x: 2008, y: 6.8, point: 'orange' },
+ { x: 2009, y: 10.7, point: 'yellow' },
+ { x: 2010, y: 10.8, point: 'grey' },
+ { x: 2011, y: 9.8, point: 'blue' }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/line-cs53/app/index.jsx b/ej2-react/code-snippet/chart/series/line-cs53/app/index.jsx
new file mode 100644
index 000000000..72eb4e3a9
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs53/app/index.jsx
@@ -0,0 +1,25 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, BarSeries } from '@syncfusion/ej2-react-charts';
+import { customData } from './datasource';
+function App() {
+ const primaryxAxis = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
+ const primaryyAxis = {
+ minimum: 3, maximum: 12, interval: 1, title: 'Percentage',
+ labelFormat: '{value}%'
+ };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: IPointRenderEventArgs): void => {
+ if (args.point.y < 7.5) {
+ args.fill = '#ff6347';
+ } else {
+ args.fill = '#009cb8';
+ }
+ };
+
+ return
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: ISeriesRenderEventArgs): void => {
+ args.fill = '#ff6347';
+ };
+
+ return
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/line-cs63/systemjs.config.js b/ej2-react/code-snippet/chart/series/line-cs63/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs63/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/line-cs64/app/datasource.jsx b/ej2-react/code-snippet/chart/series/line-cs64/app/datasource.jsx
new file mode 100644
index 000000000..b76aa1b12
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs64/app/datasource.jsx
@@ -0,0 +1,10 @@
+export let columnData = [
+ { country: "USA", gold: 50 },
+ { country: "China", gold: 40 },
+ { country: "Japan", gold: 70 },
+ { country: "Australia", gold: 60 },
+ { country: "France", gold: 50 },
+ { country: "Germany", gold: 40 },
+ { country: "Italy", gold: 40 },
+ { country: "Sweden", gold: 30 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/line-cs64/app/datasource.tsx b/ej2-react/code-snippet/chart/series/line-cs64/app/datasource.tsx
new file mode 100644
index 000000000..e26afb062
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs64/app/datasource.tsx
@@ -0,0 +1,10 @@
+export let columnData: Object[] = [
+ { country: "USA", gold: 50 },
+ { country: "China", gold: 40 },
+ { country: "Japan", gold: 70 },
+ { country: "Australia", gold: 60 },
+ { country: "France", gold: 50 },
+ { country: "Germany", gold: 40 },
+ { country: "Italy", gold: 40 },
+ { country: "Sweden", gold: 30 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/line-cs64/app/index.jsx b/ej2-react/code-snippet/chart/series/line-cs64/app/index.jsx
new file mode 100644
index 000000000..f94def630
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs64/app/index.jsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
+import { columnData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Countries' };
+ const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: ISeriesRenderEventArgs): void => {
+ args.fill = '#ff6347';
+ };
+ return
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: IPointRenderEventArgs): void => {
+ if (args.point.maximum < 38) {
+ args.fill = '#ff6347';
+ } else {
+ args.fill = '#009cb8';
+ }
+ };
+ return
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/line-cs72/systemjs.config.js b/ej2-react/code-snippet/chart/series/line-cs72/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs72/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/line-cs73/app/datasource.jsx b/ej2-react/code-snippet/chart/series/line-cs73/app/datasource.jsx
new file mode 100644
index 000000000..609287ba7
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs73/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let data = [
+ { x: 2005, y: 28 },
+ { x: 2006, y: 25 },
+ { x: 2007, y: 26 },
+ { x: 2008, y: 27 },
+ { x: 2009, y: 32 },
+ { x: 2010, y: 35 },
+ { x: 2011, y: 30 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/line-cs73/app/datasource.tsx b/ej2-react/code-snippet/chart/series/line-cs73/app/datasource.tsx
new file mode 100644
index 000000000..c88c0e7d8
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs73/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let data: Object[] = [
+ { x: 2005, y: 28 },
+ { x: 2006, y: 25 },
+ { x: 2007, y: 26 },
+ { x: 2008, y: 27 },
+ { x: 2009, y: 32 },
+ { x: 2010, y: 35 },
+ { x: 2011, y: 30 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/line-cs73/app/index.jsx b/ej2-react/code-snippet/chart/series/line-cs73/app/index.jsx
new file mode 100644
index 000000000..dedb647d4
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/line-cs73/app/index.jsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
+import { data } from './datasource';
+function App() {
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: ISeriesRenderEventArgs): void => {
+ args.fill = '#ff6347';
+ }
+ const marker = {
+ visible: true,
+ width: 10,
+ height: 10,
+ border: { width: 2, color: '#F8AB1D' },
+ };
+ return
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: IPointRenderEventArgs): void => {
+ if (args.point.index % 2 !== 0) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+ }
+ const marker = {
+ visible: true,
+ width: 10,
+ height: 10,
+ border: { width: 2, color: '#F8AB1D' },
+ };
+ return
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Accumulation Series
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Accumulation Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
-
+
diff --git a/ej2-react/code-snippet/chart/series/rangearea-cs1/app/index.tsx b/ej2-react/code-snippet/chart/series/rangearea-cs1/app/index.tsx
index f97c49c96..7a4e66e8f 100644
--- a/ej2-react/code-snippet/chart/series/rangearea-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/rangearea-cs1/app/index.tsx
@@ -8,14 +8,11 @@ from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
-
- const border = { width: 2, color: 'brown'};
return
-
+
diff --git a/ej2-react/code-snippet/chart/series/rangearea-cs10/app/datasource.jsx b/ej2-react/code-snippet/chart/series/rangearea-cs10/app/datasource.jsx
new file mode 100644
index 000000000..ca5c234bf
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangearea-cs10/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let data = [
+ { x: 2005, y: 28, high: 18, low: 44 },
+ { x: 2006, y: 25, high: 20, low: 40 },
+ { x: 2007, y: 26, high: 22, low: 36 },
+ { x: 2008, y: 27, high: 24, low: 32 },
+ { x: 2009, y: 32, high: 26, low: 28 },
+ { x: 2010, y: 35, high: 28, low: 24 },
+ { x: 2011, y: 30, high: 30, low: 20 },
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/rangearea-cs10/app/datasource.tsx b/ej2-react/code-snippet/chart/series/rangearea-cs10/app/datasource.tsx
new file mode 100644
index 000000000..5744eca6a
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangearea-cs10/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let data: Object[] = [
+ { x: 2005, y: 28, high: 18, low: 44 },
+ { x: 2006, y: 25, high: 20, low: 40 },
+ { x: 2007, y: 26, high: 22, low: 36 },
+ { x: 2008, y: 27, high: 24, low: 32 },
+ { x: 2009, y: 32, high: 26, low: 28 },
+ { x: 2010, y: 35, high: 28, low: 24 },
+ { x: 2011, y: 30, high: 30, low: 20 },
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/rangearea-cs10/app/index.jsx b/ej2-react/code-snippet/chart/series/rangearea-cs10/app/index.jsx
new file mode 100644
index 000000000..a2b361ba7
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangearea-cs10/app/index.jsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
+import { data } from './datasource';
+function App() {
+ const pointRender = (args) => {
+ if (args.point.index % 2 !== 0) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+ }
+ return
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/rangearea-cs3/systemjs.config.js b/ej2-react/code-snippet/chart/series/rangearea-cs3/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangearea-cs3/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/rangearea-cs4/app/datasource.jsx b/ej2-react/code-snippet/chart/series/rangearea-cs4/app/datasource.jsx
new file mode 100644
index 000000000..ef1c89b2d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangearea-cs4/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let data = [
+ { x: 2005, y: 28, high: 18, low: 44 },
+ { x: 2006, y: 25, high: 20, low: 40 },
+ { x: 2007, y: 26, high: 22, low: 36 },
+ { x: 2008, y: 27, high: 24, low: 32 },
+ { x: 2009, y: 32, high: 26, low: 28 },
+ { x: 2010, y: 35, high: 28, low: 24 },
+ { x: 2011, y: 30, high: 30, low: 20 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/rangearea-cs4/app/datasource.tsx b/ej2-react/code-snippet/chart/series/rangearea-cs4/app/datasource.tsx
new file mode 100644
index 000000000..a70161b11
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangearea-cs4/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let data: Object[] = [
+ { x: 2005, y: 28, high: 18, low: 44 },
+ { x: 2006, y: 25, high: 20, low: 40 },
+ { x: 2007, y: 26, high: 22, low: 36 },
+ { x: 2008, y: 27, high: 24, low: 32 },
+ { x: 2009, y: 32, high: 26, low: 28 },
+ { x: 2010, y: 35, high: 28, low: 24 },
+ { x: 2011, y: 30, high: 30, low: 20 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/rangearea-cs4/app/index.jsx b/ej2-react/code-snippet/chart/series/rangearea-cs4/app/index.jsx
new file mode 100644
index 000000000..5de8db53c
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangearea-cs4/app/index.jsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, RangeAreaSeries } from '@syncfusion/ej2-react-charts';
+import { data } from './datasource';
+function App() {
+ return
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
-
+
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/rangecolumn-cs/app/index.tsx b/ej2-react/code-snippet/chart/series/rangecolumn-cs/app/index.tsx
index 9bb2900e5..7d21af2f9 100644
--- a/ej2-react/code-snippet/chart/series/rangecolumn-cs/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/rangecolumn-cs/app/index.tsx
@@ -17,9 +17,9 @@ function App() {
title='Maximum and minimum Temperature'>
-
+
-
+
diff --git a/ej2-react/code-snippet/chart/series/rangecolumn-cs10/app/datasource.jsx b/ej2-react/code-snippet/chart/series/rangecolumn-cs10/app/datasource.jsx
new file mode 100644
index 000000000..b82c3b556
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangecolumn-cs10/app/datasource.jsx
@@ -0,0 +1,13 @@
+export let data1 = [
+ { x: 'Jan', low: 0.7, high: 6.1 }, { x: 'Feb', low: 1.3, high: 6.3 }, { x: 'Mar', low: 1.9, high: 8.5 },
+ { x: 'Apr', low: 4, high: 10.8 }, { x: 'May', low: 5.7, high: 14.40 }, { x: 'Jun', low: 8.4, high: 16.90 },
+ { x: 'Jul', low: 10.6, high: 19.20 }, { x: 'Aug', low: 10.5, high: 18.9 }, { x: 'Sep', low: 6, high: 16.1 },
+ { x: 'Oct', low: 6.0, high: 12.5 }, { x: 'Nov', low: 1.5, high: 6.9 }, { x: 'Dec', low: 5.1, high: 12.1 }
+];
+
+export let data2 = [
+ { x: 'Jan', low: 1.7, high: 7.1 }, { x: 'Feb', low: 1.9, high: 7.7 }, { x: 'Mar', low: 1.2, high: 10 },
+ { x: 'Apr', low: 2.5, high: 9.8 }, { x: 'May', low: 4.7, high: 11.4 }, { x: 'Jun', low: 6.4, high: 14.4 },
+ { x: 'Jul', low: 9.6, high: 9 }, { x: 'Aug', low: 10.7, high: 17.9 }, { x: 'Sep', low: 7.5, high: 15.1 },
+ { x: 'Oct', low: 3.0, high: 10.5 }, { x: 'Nov', low: 1.2, high: 7.9 }, { x: 'Dec', low: 4.1, high: 9.1 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/rangecolumn-cs10/app/datasource.tsx b/ej2-react/code-snippet/chart/series/rangecolumn-cs10/app/datasource.tsx
new file mode 100644
index 000000000..35f089b28
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangecolumn-cs10/app/datasource.tsx
@@ -0,0 +1,13 @@
+export let data1: Object[] = [
+ { x: 'Jan', low: 0.7, high: 6.1 }, { x: 'Feb', low: 1.3, high: 6.3 }, { x: 'Mar', low: 1.9, high: 8.5 },
+ { x: 'Apr', low: 4, high: 10.8 }, { x: 'May', low: 5.7, high: 14.40 }, { x: 'Jun', low: 8.4, high: 16.90 },
+ { x: 'Jul', low: 10.6, high: 19.20 }, { x: 'Aug', low: 10.5, high: 18.9 }, { x: 'Sep', low: 6, high: 16.1 },
+ { x: 'Oct', low: 6.0, high: 12.5 }, { x: 'Nov', low: 1.5, high: 6.9 }, { x: 'Dec', low: 5.1, high: 12.1 }
+];
+
+export let data2: Object[] = [
+ { x: 'Jan', low: 1.7, high: 7.1 }, { x: 'Feb', low: 1.9, high: 7.7 }, { x: 'Mar', low: 1.2, high: 10 },
+ { x: 'Apr', low: 2.5, high: 9.8 }, { x: 'May', low: 4.7, high: 11.4 }, { x: 'Jun', low: 6.4, high: 14.4 },
+ { x: 'Jul', low: 9.6, high: 9 }, { x: 'Aug', low: 10.7, high: 17.9 }, { x: 'Sep', low: 7.5, high: 15.1 },
+ { x: 'Oct', low: 3.0, high: 10.5 }, { x: 'Nov', low: 1.2, high: 7.9 }, { x: 'Dec', low: 4.1, high: 9.1 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/rangecolumn-cs10/app/index.jsx b/ej2-react/code-snippet/chart/series/rangecolumn-cs10/app/index.jsx
new file mode 100644
index 000000000..b36b498dd
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangecolumn-cs10/app/index.jsx
@@ -0,0 +1,33 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, RangeColumnSeries } from '@syncfusion/ej2-react-charts';
+import { data2, data1 } from './datasource';
+
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'month' };
+ const pointRender = (args) => {
+ if (args.point.index % 2 !== 0) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+ }
+ const primaryyAxis = { title: 'Temperature(Celsius)' };
+ return
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/rangecolumn-cs2/systemjs.config.js b/ej2-react/code-snippet/chart/series/rangecolumn-cs2/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangecolumn-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/rangecolumn-cs3/app/datasource.jsx b/ej2-react/code-snippet/chart/series/rangecolumn-cs3/app/datasource.jsx
new file mode 100644
index 000000000..09b3607d6
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangecolumn-cs3/app/datasource.jsx
@@ -0,0 +1,13 @@
+export let data = [
+ { x: 'Jan', low: 0.7, high: 6.1 }, { x: 'Feb', low: 1.3, high: 6.3 }, { x: 'Mar', low: 1.9, high: 8.5 },
+ { x: 'Apr', low: 3.1, high: 10.8 }, { x: 'May', low: 5.7, high: 14.40 }, { x: 'Jun', low: 8.4, high: 16.90 },
+ { x: 'Jul', low: 10.6, high: 19.20 }, { x: 'Aug', low: 10.5, high: 18.9 }, { x: 'Sep', low: 8.5, high: 16.1 },
+ { x: 'Oct', low: 6.0, high: 12.5 }, { x: 'Nov', low: 1.5, high: 6.9 }, { x: 'Dec', low: 5.1, high: 12.1 }
+];
+
+export let data1 = [
+ { x: 'Jan', low: 1.7, high: 7.1 }, { x: 'Feb', low: 1.9, high: 7.7 }, { x: 'Mar', low: 1.2, high: 7.5 },
+ { x: 'Apr', low: 2.5, high: 9.8 }, { x: 'May', low: 4.7, high: 11.4 }, { x: 'Jun', low: 6.4, high: 14.4 },
+ { x: 'Jul', low: 9.6, high: 17.2 }, { x: 'Aug', low: 10.7, high: 17.9 }, { x: 'Sep', low: 7.5, high: 15.1 },
+ { x: 'Oct', low: 3.0, high: 10.5 }, { x: 'Nov', low: 1.2, high: 7.9 }, { x: 'Dec', low: 4.1, high: 9.1 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/rangecolumn-cs3/app/datasource.tsx b/ej2-react/code-snippet/chart/series/rangecolumn-cs3/app/datasource.tsx
new file mode 100644
index 000000000..e6ef19d68
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangecolumn-cs3/app/datasource.tsx
@@ -0,0 +1,13 @@
+export let data: Object[] = [
+ { x: 'Jan', low: 0.7, high: 6.1 }, { x: 'Feb', low: 1.3, high: 6.3 }, { x: 'Mar', low: 1.9, high: 8.5 },
+ { x: 'Apr', low: 3.1, high: 10.8 }, { x: 'May', low: 5.7, high: 14.40 }, { x: 'Jun', low: 8.4, high: 16.90 },
+ { x: 'Jul', low: 10.6, high: 19.20 }, { x: 'Aug', low: 10.5, high: 18.9 }, { x: 'Sep', low: 8.5, high: 16.1 },
+ { x: 'Oct', low: 6.0, high: 12.5 }, { x: 'Nov', low: 1.5, high: 6.9 }, { x: 'Dec', low: 5.1, high: 12.1 }
+];
+
+export let data1: Object[] = [
+ { x: 'Jan', low: 1.7, high: 7.1 }, { x: 'Feb', low: 1.9, high: 7.7 }, { x: 'Mar', low: 1.2, high: 7.5 },
+ { x: 'Apr', low: 2.5, high: 9.8 }, { x: 'May', low: 4.7, high: 11.4 }, { x: 'Jun', low: 6.4, high: 14.4 },
+ { x: 'Jul', low: 9.6, high: 17.2 }, { x: 'Aug', low: 10.7, high: 17.9 }, { x: 'Sep', low: 7.5, high: 15.1 },
+ { x: 'Oct', low: 3.0, high: 10.5 }, { x: 'Nov', low: 1.2, high: 7.9 }, { x: 'Dec', low: 4.1, high: 9.1 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/rangecolumn-cs3/app/index.jsx b/ej2-react/code-snippet/chart/series/rangecolumn-cs3/app/index.jsx
new file mode 100644
index 000000000..de1c5de61
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangecolumn-cs3/app/index.jsx
@@ -0,0 +1,25 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, RangeColumnSeries } from '@syncfusion/ej2-react-charts';
+import { data, data1 } from './datasource';
+
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'month' };
+ const primaryyAxis = { title: 'Temperature(Celsius)' };
+ return
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
-
-
-
-
+
+
;
}
diff --git a/ej2-react/code-snippet/chart/series/rangesteparea-cs/app/index.tsx b/ej2-react/code-snippet/chart/series/rangesteparea-cs/app/index.tsx
index 728548f94..da0189620 100644
--- a/ej2-react/code-snippet/chart/series/rangesteparea-cs/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/rangesteparea-cs/app/index.tsx
@@ -27,9 +27,7 @@ function App() {
title='Monthly Temperature Range'>
-
-
-
+
diff --git a/ej2-react/code-snippet/chart/series/rangesteparea-cs10/app/datasource.jsx b/ej2-react/code-snippet/chart/series/rangesteparea-cs10/app/datasource.jsx
new file mode 100644
index 000000000..d485203df
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangesteparea-cs10/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let splineRangeData = [
+ { x: 'Jan', high: 29, low: 19 },
+ { x: 'Feb', high: 32, low: 22 },
+ { x: 'Mar', high: 25, low: 25 },
+ { x: 'Apr', high: 37, low: 27 },
+ { x: 'May', high: 35, low: 25 },
+ { x: 'Jun', high: 32, low: 22 },
+ { x: 'Jul', high: 30, low: 20 },
+ { x: 'Aug', high: 32, low: 22 },
+ { x: 'Sep', high: 35, low: 20 },
+ { x: 'Oct', high: 37, low: 27 },
+ { x: 'Nov', high: 35, low: 25 },
+ { x: 'Dec', high: 32, low: 22 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/rangesteparea-cs10/app/datasource.tsx b/ej2-react/code-snippet/chart/series/rangesteparea-cs10/app/datasource.tsx
new file mode 100644
index 000000000..db67b34be
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangesteparea-cs10/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let splineRangeData: Object[] = [
+ { x: 'Jan', high: 29, low: 19 },
+ { x: 'Feb', high: 32, low: 22 },
+ { x: 'Mar', high: 25, low: 25 },
+ { x: 'Apr', high: 37, low: 27 },
+ { x: 'May', high: 35, low: 25 },
+ { x: 'Jun', high: 32, low: 22 },
+ { x: 'Jul', high: 30, low: 20 },
+ { x: 'Aug', high: 32, low: 22 },
+ { x: 'Sep', high: 35, low: 20 },
+ { x: 'Oct', high: 37, low: 27 },
+ { x: 'Nov', high: 35, low: 25 },
+ { x: 'Dec', high: 32, low: 22 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/rangesteparea-cs10/app/index.jsx b/ej2-react/code-snippet/chart/series/rangesteparea-cs10/app/index.jsx
new file mode 100644
index 000000000..dfba857f0
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangesteparea-cs10/app/index.jsx
@@ -0,0 +1,40 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, RangeStepAreaSeries } from '@syncfusion/ej2-react-charts';
+import { splineRangeData } from './datasource';
+function App() {
+ const primaryxAxis = {
+ valueType: 'Category',
+ edgeLabelPlacement: 'Shift',
+ majorGridLines: { width: 0 }
+ };
+ const primaryyAxis = {
+ labelFormat: '{value}˚C',
+ lineStyle: { width: 0 },
+ minimum: 0, maximum: 40,
+ majorTickLines: { width: 0 }
+ };
+ const pointRender = (args) => {
+ if (args.point.index % 2 !==0) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+ }
+ const marker = { visible: true };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/rangesteparea-cs2/systemjs.config.js b/ej2-react/code-snippet/chart/series/rangesteparea-cs2/systemjs.config.js
new file mode 100644
index 000000000..800d6df7f
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangesteparea-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/21.1.35/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/rangesteparea-cs3/app/datasource.jsx b/ej2-react/code-snippet/chart/series/rangesteparea-cs3/app/datasource.jsx
new file mode 100644
index 000000000..30c04313f
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangesteparea-cs3/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let splineRangeData = [
+ { x: 'Jan', high: 14, low: 7, high1: 29, low1: 22 },
+ { x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
+ { x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
+ { x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
+ { x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Dec', high: 20, low: 7, high1: 35, low1: 22 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/rangesteparea-cs3/app/datasource.tsx b/ej2-react/code-snippet/chart/series/rangesteparea-cs3/app/datasource.tsx
new file mode 100644
index 000000000..e7f34cf9d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangesteparea-cs3/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let splineRangeData: Object[] = [
+ { x: 'Jan', high: 14, low: 7, high1: 29, low1: 22 },
+ { x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
+ { x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
+ { x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
+ { x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Dec', high: 20, low: 7, high1: 35, low1: 22 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/rangesteparea-cs3/app/index.jsx b/ej2-react/code-snippet/chart/series/rangesteparea-cs3/app/index.jsx
new file mode 100644
index 000000000..69cbc7685
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/rangesteparea-cs3/app/index.jsx
@@ -0,0 +1,33 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, RangeStepAreaSeries } from '@syncfusion/ej2-react-charts';
+import { splineRangeData } from './datasource';
+function App() {
+ const primaryxAxis = {
+ valueType: 'Category',
+ edgeLabelPlacement: 'Shift',
+ majorGridLines: { width: 0 }
+ };
+ const primaryyAxis = {
+ labelFormat: '{value}˚C',
+ lineStyle: { width: 0 },
+ minimum: 0, maximum: 40,
+ majorTickLines: { width: 0 }
+ };
+ const border = { color: 'yellow', width: 2};
+ const border1 = { color: 'brown', width: 2};
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Accumulation Series
+
-
-
diff --git a/ej2-react/code-snippet/chart/series/scatter-cs/app/index.tsx b/ej2-react/code-snippet/chart/series/scatter-cs/app/index.tsx
index 46a5c479f..9368dece9 100644
--- a/ej2-react/code-snippet/chart/series/scatter-cs/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/scatter-cs/app/index.tsx
@@ -25,10 +25,10 @@ function App() {
title='Height Vs Weight'>
-
-
diff --git a/ej2-react/code-snippet/chart/series/scatter-cs1/app/datasource.jsx b/ej2-react/code-snippet/chart/series/scatter-cs1/app/datasource.jsx
new file mode 100644
index 000000000..a18eec576
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/scatter-cs1/app/datasource.jsx
@@ -0,0 +1,23 @@
+export let scatterData = [
+ { height: 130, male: 35, female: 32 },
+ { height: 132, male: 38, female: 33 },
+ { height: 135, male: 41, female: 38 },
+ { height: 137, male: 43, female: 40 },
+ { height: 140, male: 45, female: 42 },
+ { height: 142, male: 46, female: 42.5 },
+ { height: 145, male: 48, female: 43 },
+ { height: 147, male: 50, female: 44 },
+ { height: 150, male: 52, female: 45 },
+ { height: 152, male: 55, female: 45 },
+ { height: 155, male: 58, female: 46 },
+ { height: 157, male: 60, female: 48 },
+ { height: 160, male: 63, female: 51 },
+ { height: 162, male: 70, female: 54 },
+ { height: 165, male: 75, female: 58 },
+ { height: 167, male: 78, female: 62 },
+ { height: 170, male: 82, female: 68 },
+ { height: 172, male: 87, female: 72 },
+ { height: 175, male: 89, female: 78 },
+ { height: 177, male: 92, female: 82 },
+ { height: 180, male: 95, female: 85 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/scatter-cs1/app/datasource.tsx b/ej2-react/code-snippet/chart/series/scatter-cs1/app/datasource.tsx
new file mode 100644
index 000000000..09e360852
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/scatter-cs1/app/datasource.tsx
@@ -0,0 +1,23 @@
+export let scatterData: Object[] = [
+ { height: 130, male: 35, female: 32 },
+ { height: 132, male: 38, female: 33 },
+ { height: 135, male: 41, female: 38 },
+ { height: 137, male: 43, female: 40 },
+ { height: 140, male: 45, female: 42 },
+ { height: 142, male: 46, female: 42.5 },
+ { height: 145, male: 48, female: 43 },
+ { height: 147, male: 50, female: 44 },
+ { height: 150, male: 52, female: 45 },
+ { height: 152, male: 55, female: 45 },
+ { height: 155, male: 58, female: 46 },
+ { height: 157, male: 60, female: 48 },
+ { height: 160, male: 63, female: 51 },
+ { height: 162, male: 70, female: 54 },
+ { height: 165, male: 75, female: 58 },
+ { height: 167, male: 78, female: 62 },
+ { height: 170, male: 82, female: 68 },
+ { height: 172, male: 87, female: 72 },
+ { height: 175, male: 89, female: 78 },
+ { height: 177, male: 92, female: 82 },
+ { height: 180, male: 95, female: 85 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/scatter-cs1/app/index.jsx b/ej2-react/code-snippet/chart/series/scatter-cs1/app/index.jsx
new file mode 100644
index 000000000..49fba4474
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/scatter-cs1/app/index.jsx
@@ -0,0 +1,35 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts';
+import { scatterData } from './datasource';
+
+function App() {
+ const primaryxAxis = {
+ title: 'Height (cm)', minimum: 130, maximum: 180,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}cm'
+ };
+ const primaryyAxis = {
+ title: 'Weight (kg)', minimum: 30, maximum: 100,
+ labelFormat: '{value}kg', rangePadding: 'None'
+ };
+ const marker1 = { width: 10, height: 10, shape: 'Triangle' };
+ const marker = { width: 12, height: 12, shape: 'Rectangle'};
+ return
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/spline-cs1/app/index.tsx b/ej2-react/code-snippet/chart/series/spline-cs1/app/index.tsx
index 6bcf4e33a..15f6f15e2 100644
--- a/ej2-react/code-snippet/chart/series/spline-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/spline-cs1/app/index.tsx
@@ -9,12 +9,12 @@ import { data } from './datasource';
function App() {
- const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ const marker = { visible: true, width: 10, height: 10};
return
-
diff --git a/ej2-react/code-snippet/chart/series/spline-cs10/app/datasource.jsx b/ej2-react/code-snippet/chart/series/spline-cs10/app/datasource.jsx
new file mode 100644
index 000000000..609287ba7
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/spline-cs10/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let data = [
+ { x: 2005, y: 28 },
+ { x: 2006, y: 25 },
+ { x: 2007, y: 26 },
+ { x: 2008, y: 27 },
+ { x: 2009, y: 32 },
+ { x: 2010, y: 35 },
+ { x: 2011, y: 30 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/spline-cs10/app/datasource.tsx b/ej2-react/code-snippet/chart/series/spline-cs10/app/datasource.tsx
new file mode 100644
index 000000000..c88c0e7d8
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/spline-cs10/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let data: Object[] = [
+ { x: 2005, y: 28 },
+ { x: 2006, y: 25 },
+ { x: 2007, y: 26 },
+ { x: 2008, y: 27 },
+ { x: 2009, y: 32 },
+ { x: 2010, y: 35 },
+ { x: 2011, y: 30 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/spline-cs10/app/index.jsx b/ej2-react/code-snippet/chart/series/spline-cs10/app/index.jsx
new file mode 100644
index 000000000..4a5445f0e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/spline-cs10/app/index.jsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, SplineSeries } from '@syncfusion/ej2-react-charts';
+import { data } from './datasource';
+function App() {
+ const marker = { visible: true, width: 10, height: 10 };
+ const seriesRender =(args) => {
+ args.fill = '#ff6347';
+ };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/spline-cs3/systemjs.config.js b/ej2-react/code-snippet/chart/series/spline-cs3/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/spline-cs3/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/spline-cs4/app/datasource.jsx b/ej2-react/code-snippet/chart/series/spline-cs4/app/datasource.jsx
new file mode 100644
index 000000000..609287ba7
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/spline-cs4/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let data = [
+ { x: 2005, y: 28 },
+ { x: 2006, y: 25 },
+ { x: 2007, y: 26 },
+ { x: 2008, y: 27 },
+ { x: 2009, y: 32 },
+ { x: 2010, y: 35 },
+ { x: 2011, y: 30 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/spline-cs4/app/datasource.tsx b/ej2-react/code-snippet/chart/series/spline-cs4/app/datasource.tsx
new file mode 100644
index 000000000..c88c0e7d8
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/spline-cs4/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let data: Object[] = [
+ { x: 2005, y: 28 },
+ { x: 2006, y: 25 },
+ { x: 2007, y: 26 },
+ { x: 2008, y: 27 },
+ { x: 2009, y: 32 },
+ { x: 2010, y: 35 },
+ { x: 2011, y: 30 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/spline-cs4/app/index.jsx b/ej2-react/code-snippet/chart/series/spline-cs4/app/index.jsx
new file mode 100644
index 000000000..3cb08b929
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/spline-cs4/app/index.jsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, SplineSeries } from '@syncfusion/ej2-react-charts';
+import { data } from './datasource';
+function App() {
+ const marker = { visible: true, width: 10, height: 10 };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/splinearea-cs/app/index.tsx b/ej2-react/code-snippet/chart/series/splinearea-cs/app/index.tsx
index fdc437dd3..02096c636 100644
--- a/ej2-react/code-snippet/chart/series/splinearea-cs/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/splinearea-cs/app/index.tsx
@@ -15,7 +15,7 @@ function App() {
primaryXAxis={primaryxAxis}>
-
+
diff --git a/ej2-react/code-snippet/chart/series/splinearea-cs1/app/datasource.jsx b/ej2-react/code-snippet/chart/series/splinearea-cs1/app/datasource.jsx
new file mode 100644
index 000000000..a154a64ed
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/splinearea-cs1/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let splineData = [
+ { x: 'Jan', y: -1 },
+ { x: 'Feb', y: -1 },
+ { x: 'Mar', y: 2 },
+ { x: 'Apr', y: 8 },
+ { x: 'May', y: 13 },
+ { x: 'Jun', y: 18 },
+ { x: 'Jul', y: 21 },
+ { x: 'Aug', y: 20 },
+ { x: 'Sep', y: 16 },
+ { x: 'Oct', y: 10 },
+ { x: 'Nov', y: 4 },
+ { x: 'Dec', y: 0 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/splinearea-cs1/app/datasource.tsx b/ej2-react/code-snippet/chart/series/splinearea-cs1/app/datasource.tsx
new file mode 100644
index 000000000..763df4211
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/splinearea-cs1/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let splineData: Object[] = [
+ { x: 'Jan', y: -1 },
+ { x: 'Feb', y: -1 },
+ { x: 'Mar', y: 2 },
+ { x: 'Apr', y: 8 },
+ { x: 'May', y: 13 },
+ { x: 'Jun', y: 18 },
+ { x: 'Jul', y: 21 },
+ { x: 'Aug', y: 20 },
+ { x: 'Sep', y: 16 },
+ { x: 'Oct', y: 10 },
+ { x: 'Nov', y: 4 },
+ { x: 'Dec', y: 0 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/splinearea-cs1/app/index.jsx b/ej2-react/code-snippet/chart/series/splinearea-cs1/app/index.jsx
new file mode 100644
index 000000000..815b2ea99
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/splinearea-cs1/app/index.jsx
@@ -0,0 +1,21 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, SplineAreaSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
+import { splineData } from './datasource';
+function App() {
+ const primaryxAxis = { title: 'Month', valueType: 'Category' };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/splinearea-cs1/systemjs.config.js b/ej2-react/code-snippet/chart/series/splinearea-cs1/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/splinearea-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/splinearea-cs2/app/datasource.jsx b/ej2-react/code-snippet/chart/series/splinearea-cs2/app/datasource.jsx
new file mode 100644
index 000000000..a154a64ed
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/splinearea-cs2/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let splineData = [
+ { x: 'Jan', y: -1 },
+ { x: 'Feb', y: -1 },
+ { x: 'Mar', y: 2 },
+ { x: 'Apr', y: 8 },
+ { x: 'May', y: 13 },
+ { x: 'Jun', y: 18 },
+ { x: 'Jul', y: 21 },
+ { x: 'Aug', y: 20 },
+ { x: 'Sep', y: 16 },
+ { x: 'Oct', y: 10 },
+ { x: 'Nov', y: 4 },
+ { x: 'Dec', y: 0 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/splinearea-cs2/app/datasource.tsx b/ej2-react/code-snippet/chart/series/splinearea-cs2/app/datasource.tsx
new file mode 100644
index 000000000..763df4211
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/splinearea-cs2/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let splineData: Object[] = [
+ { x: 'Jan', y: -1 },
+ { x: 'Feb', y: -1 },
+ { x: 'Mar', y: 2 },
+ { x: 'Apr', y: 8 },
+ { x: 'May', y: 13 },
+ { x: 'Jun', y: 18 },
+ { x: 'Jul', y: 21 },
+ { x: 'Aug', y: 20 },
+ { x: 'Sep', y: 16 },
+ { x: 'Oct', y: 10 },
+ { x: 'Nov', y: 4 },
+ { x: 'Dec', y: 0 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/splinearea-cs2/app/index.jsx b/ej2-react/code-snippet/chart/series/splinearea-cs2/app/index.jsx
new file mode 100644
index 000000000..19f63b8db
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/splinearea-cs2/app/index.jsx
@@ -0,0 +1,21 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, SplineAreaSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
+import { splineData } from './datasource';
+function App() {
+ const primaryxAxis = { title: 'Month', valueType: 'Category' };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
-
+
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/splinerangearea-cs/app/index.tsx b/ej2-react/code-snippet/chart/series/splinerangearea-cs/app/index.tsx
index 52d5faf87..1f491c908 100644
--- a/ej2-react/code-snippet/chart/series/splinerangearea-cs/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/splinerangearea-cs/app/index.tsx
@@ -25,9 +25,9 @@ function App() {
title='Monthly Temperature Range'>
-
+
-
+
diff --git a/ej2-react/code-snippet/chart/series/splinerangearea-cs1/app/datasource.jsx b/ej2-react/code-snippet/chart/series/splinerangearea-cs1/app/datasource.jsx
new file mode 100644
index 000000000..2badb1497
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/splinerangearea-cs1/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let splineRangeData = [
+ { x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
+ { x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
+ { x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
+ { x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
+ { x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/splinerangearea-cs1/app/datasource.tsx b/ej2-react/code-snippet/chart/series/splinerangearea-cs1/app/datasource.tsx
new file mode 100644
index 000000000..a293dce14
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/splinerangearea-cs1/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let splineRangeData: Object[] = [
+ { x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
+ { x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
+ { x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
+ { x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
+ { x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/splinerangearea-cs1/app/index.jsx b/ej2-react/code-snippet/chart/series/splinerangearea-cs1/app/index.jsx
new file mode 100644
index 000000000..790334ef6
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/splinerangearea-cs1/app/index.jsx
@@ -0,0 +1,33 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, SplineRangeAreaSeries } from '@syncfusion/ej2-react-charts';
+import { splineRangeData } from './datasource';
+function App() {
+ const primaryxAxis = {
+ valueType: 'Category',
+ edgeLabelPlacement: 'Shift',
+ majorGridLines: { width: 0 }
+ };
+ const primaryyAxis = {
+ labelFormat: '{value}˚C',
+ lineStyle: { width: 0 },
+ minimum: 0, maximum: 40,
+ majorTickLines: { width: 0 }
+ };
+ return
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/splinerangearea-cs1/systemjs.config.js b/ej2-react/code-snippet/chart/series/splinerangearea-cs1/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/splinerangearea-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/splinerangearea-cs2/app/datasource.jsx b/ej2-react/code-snippet/chart/series/splinerangearea-cs2/app/datasource.jsx
new file mode 100644
index 000000000..2badb1497
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/splinerangearea-cs2/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let splineRangeData = [
+ { x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
+ { x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
+ { x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
+ { x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
+ { x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/splinerangearea-cs2/app/datasource.tsx b/ej2-react/code-snippet/chart/series/splinerangearea-cs2/app/datasource.tsx
new file mode 100644
index 000000000..a293dce14
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/splinerangearea-cs2/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let splineRangeData: Object[] = [
+ { x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
+ { x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
+ { x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
+ { x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
+ { x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
+ { x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
+ { x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/splinerangearea-cs2/app/index.jsx b/ej2-react/code-snippet/chart/series/splinerangearea-cs2/app/index.jsx
new file mode 100644
index 000000000..5454c0919
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/splinerangearea-cs2/app/index.jsx
@@ -0,0 +1,33 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, SplineRangeAreaSeries } from '@syncfusion/ej2-react-charts';
+import { splineRangeData } from './datasource';
+function App() {
+ const primaryxAxis = {
+ valueType: 'Category',
+ edgeLabelPlacement: 'Shift',
+ majorGridLines: { width: 0 }
+ };
+ const primaryyAxis = {
+ labelFormat: '{value}˚C',
+ lineStyle: { width: 0 },
+ minimum: 0, maximum: 40,
+ majorTickLines: { width: 0 }
+ };
+ return
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
-
+
-
+
-
+
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/stackedarea-cs/app/index.tsx b/ej2-react/code-snippet/chart/series/stackedarea-cs/app/index.tsx
index f31d4730d..7bca1ddde 100644
--- a/ej2-react/code-snippet/chart/series/stackedarea-cs/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/stackedarea-cs/app/index.tsx
@@ -22,13 +22,13 @@ function App() {
title='Trend in Sales of Ethical Produce'>
-
+
-
+
-
+
-
+
diff --git a/ej2-react/code-snippet/chart/series/stackedarea-cs1/app/datasource.jsx b/ej2-react/code-snippet/chart/series/stackedarea-cs1/app/datasource.jsx
new file mode 100644
index 000000000..4e33b5187
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedarea-cs1/app/datasource.jsx
@@ -0,0 +1,17 @@
+export let stackedData = [
+ { x: new Date(2000, 0, 1), y: 0.61, y1: 0.03, y2: 0.48, y3: 0.23 },
+ { x: new Date(2001, 0, 1), y: 0.81, y1: 0.05, y2: 0.53, y3: 0.17 },
+ { x: new Date(2002, 0, 1), y: 0.91, y1: 0.06, y2: 0.57, y3: 0.17 },
+ { x: new Date(2003, 0, 1), y: 1, y1: 0.09, y2: 0.61, y3: 0.20 },
+ { x: new Date(2004, 0, 1), y: 1.19, y1: 0.14, y2: 0.63, y3: 0.23 },
+ { x: new Date(2005, 0, 1), y: 1.47, y1: 0.20, y2: 0.64, y3: 0.36 },
+ { x: new Date(2006, 0, 1), y: 1.74, y1: 0.29, y2: 0.66, y3: 0.43 },
+ { x: new Date(2007, 0, 1), y: 1.98, y1: 0.46, y2: 0.76, y3: 0.52 },
+ { x: new Date(2008, 0, 1), y: 1.99, y1: 0.64, y2: 0.77, y3: 0.72 },
+ { x: new Date(2009, 0, 1), y: 1.70, y1: 0.75, y2: 0.55, y3: 1.29 },
+ { x: new Date(2010, 0, 1), y: 1.48, y1: 1.06, y2: 0.54, y3: 1.38 },
+ { x: new Date(2011, 0, 1), y: 1.38, y1: 1.25, y2: 0.57, y3: 1.82 },
+ { x: new Date(2012, 0, 1), y: 1.66, y1: 1.55, y2: 0.61, y3: 2.16 },
+ { x: new Date(2013, 0, 1), y: 1.66, y1: 1.55, y2: 0.67, y3: 2.51 },
+ { x: new Date(2014, 0, 1), y: 1.67, y1: 1.65, y2: 0.67, y3: 2.61 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedarea-cs1/app/datasource.tsx b/ej2-react/code-snippet/chart/series/stackedarea-cs1/app/datasource.tsx
new file mode 100644
index 000000000..6ead5b7c2
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedarea-cs1/app/datasource.tsx
@@ -0,0 +1,17 @@
+export let stackedData: Object[] = [
+ { x: new Date(2000, 0, 1), y: 0.61, y1: 0.03, y2: 0.48, y3: 0.23 },
+ { x: new Date(2001, 0, 1), y: 0.81, y1: 0.05, y2: 0.53, y3: 0.17 },
+ { x: new Date(2002, 0, 1), y: 0.91, y1: 0.06, y2: 0.57, y3: 0.17 },
+ { x: new Date(2003, 0, 1), y: 1, y1: 0.09, y2: 0.61, y3: 0.20 },
+ { x: new Date(2004, 0, 1), y: 1.19, y1: 0.14, y2: 0.63, y3: 0.23 },
+ { x: new Date(2005, 0, 1), y: 1.47, y1: 0.20, y2: 0.64, y3: 0.36 },
+ { x: new Date(2006, 0, 1), y: 1.74, y1: 0.29, y2: 0.66, y3: 0.43 },
+ { x: new Date(2007, 0, 1), y: 1.98, y1: 0.46, y2: 0.76, y3: 0.52 },
+ { x: new Date(2008, 0, 1), y: 1.99, y1: 0.64, y2: 0.77, y3: 0.72 },
+ { x: new Date(2009, 0, 1), y: 1.70, y1: 0.75, y2: 0.55, y3: 1.29 },
+ { x: new Date(2010, 0, 1), y: 1.48, y1: 1.06, y2: 0.54, y3: 1.38 },
+ { x: new Date(2011, 0, 1), y: 1.38, y1: 1.25, y2: 0.57, y3: 1.82 },
+ { x: new Date(2012, 0, 1), y: 1.66, y1: 1.55, y2: 0.61, y3: 2.16 },
+ { x: new Date(2013, 0, 1), y: 1.66, y1: 1.55, y2: 0.67, y3: 2.51 },
+ { x: new Date(2014, 0, 1), y: 1.67, y1: 1.65, y2: 0.67, y3: 2.61 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedarea-cs1/app/index.jsx b/ej2-react/code-snippet/chart/series/stackedarea-cs1/app/index.jsx
new file mode 100644
index 000000000..52c4dcf04
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedarea-cs1/app/index.jsx
@@ -0,0 +1,34 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StackingAreaSeries } from '@syncfusion/ej2-react-charts';
+import { stackedData } from './datasource';
+function App() {
+ const primaryxAxis = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ majorTickLines: { width: 0 }, labelFormat: 'y', edgeLabelPlacement: 'Shift'
+ };
+ const primaryyAxis = {
+ title: 'Spend in Billions', minimum: 0, maximum: 7, interval: 1,
+ majorTickLines: { width: 0 }, labelFormat: '{value}B'
+ };
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedarea-cs1/systemjs.config.js b/ej2-react/code-snippet/chart/series/stackedarea-cs1/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedarea-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/stackedarea-cs2/app/datasource.jsx b/ej2-react/code-snippet/chart/series/stackedarea-cs2/app/datasource.jsx
new file mode 100644
index 000000000..4e33b5187
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedarea-cs2/app/datasource.jsx
@@ -0,0 +1,17 @@
+export let stackedData = [
+ { x: new Date(2000, 0, 1), y: 0.61, y1: 0.03, y2: 0.48, y3: 0.23 },
+ { x: new Date(2001, 0, 1), y: 0.81, y1: 0.05, y2: 0.53, y3: 0.17 },
+ { x: new Date(2002, 0, 1), y: 0.91, y1: 0.06, y2: 0.57, y3: 0.17 },
+ { x: new Date(2003, 0, 1), y: 1, y1: 0.09, y2: 0.61, y3: 0.20 },
+ { x: new Date(2004, 0, 1), y: 1.19, y1: 0.14, y2: 0.63, y3: 0.23 },
+ { x: new Date(2005, 0, 1), y: 1.47, y1: 0.20, y2: 0.64, y3: 0.36 },
+ { x: new Date(2006, 0, 1), y: 1.74, y1: 0.29, y2: 0.66, y3: 0.43 },
+ { x: new Date(2007, 0, 1), y: 1.98, y1: 0.46, y2: 0.76, y3: 0.52 },
+ { x: new Date(2008, 0, 1), y: 1.99, y1: 0.64, y2: 0.77, y3: 0.72 },
+ { x: new Date(2009, 0, 1), y: 1.70, y1: 0.75, y2: 0.55, y3: 1.29 },
+ { x: new Date(2010, 0, 1), y: 1.48, y1: 1.06, y2: 0.54, y3: 1.38 },
+ { x: new Date(2011, 0, 1), y: 1.38, y1: 1.25, y2: 0.57, y3: 1.82 },
+ { x: new Date(2012, 0, 1), y: 1.66, y1: 1.55, y2: 0.61, y3: 2.16 },
+ { x: new Date(2013, 0, 1), y: 1.66, y1: 1.55, y2: 0.67, y3: 2.51 },
+ { x: new Date(2014, 0, 1), y: 1.67, y1: 1.65, y2: 0.67, y3: 2.61 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedarea-cs2/app/datasource.tsx b/ej2-react/code-snippet/chart/series/stackedarea-cs2/app/datasource.tsx
new file mode 100644
index 000000000..6ead5b7c2
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedarea-cs2/app/datasource.tsx
@@ -0,0 +1,17 @@
+export let stackedData: Object[] = [
+ { x: new Date(2000, 0, 1), y: 0.61, y1: 0.03, y2: 0.48, y3: 0.23 },
+ { x: new Date(2001, 0, 1), y: 0.81, y1: 0.05, y2: 0.53, y3: 0.17 },
+ { x: new Date(2002, 0, 1), y: 0.91, y1: 0.06, y2: 0.57, y3: 0.17 },
+ { x: new Date(2003, 0, 1), y: 1, y1: 0.09, y2: 0.61, y3: 0.20 },
+ { x: new Date(2004, 0, 1), y: 1.19, y1: 0.14, y2: 0.63, y3: 0.23 },
+ { x: new Date(2005, 0, 1), y: 1.47, y1: 0.20, y2: 0.64, y3: 0.36 },
+ { x: new Date(2006, 0, 1), y: 1.74, y1: 0.29, y2: 0.66, y3: 0.43 },
+ { x: new Date(2007, 0, 1), y: 1.98, y1: 0.46, y2: 0.76, y3: 0.52 },
+ { x: new Date(2008, 0, 1), y: 1.99, y1: 0.64, y2: 0.77, y3: 0.72 },
+ { x: new Date(2009, 0, 1), y: 1.70, y1: 0.75, y2: 0.55, y3: 1.29 },
+ { x: new Date(2010, 0, 1), y: 1.48, y1: 1.06, y2: 0.54, y3: 1.38 },
+ { x: new Date(2011, 0, 1), y: 1.38, y1: 1.25, y2: 0.57, y3: 1.82 },
+ { x: new Date(2012, 0, 1), y: 1.66, y1: 1.55, y2: 0.61, y3: 2.16 },
+ { x: new Date(2013, 0, 1), y: 1.66, y1: 1.55, y2: 0.67, y3: 2.51 },
+ { x: new Date(2014, 0, 1), y: 1.67, y1: 1.65, y2: 0.67, y3: 2.61 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedarea-cs2/app/index.jsx b/ej2-react/code-snippet/chart/series/stackedarea-cs2/app/index.jsx
new file mode 100644
index 000000000..a473dc4ba
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedarea-cs2/app/index.jsx
@@ -0,0 +1,34 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StackingAreaSeries } from '@syncfusion/ej2-react-charts';
+import { stackedData } from './datasource';
+function App() {
+ const primaryxAxis = {
+ title: 'Years', valueType: 'DateTime', intervalType: 'Years',
+ majorTickLines: { width: 0 }, labelFormat: 'y', edgeLabelPlacement: 'Shift'
+ };
+ const primaryyAxis = {
+ title: 'Spend in Billions', minimum: 0, maximum: 7, interval: 1,
+ majorTickLines: { width: 0 }, labelFormat: '{value}B'
+ };
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
-
+
-
+
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/stackedbar-cs/app/index.tsx b/ej2-react/code-snippet/chart/series/stackedbar-cs/app/index.tsx
index 931efb6ad..f17b9fbcd 100644
--- a/ej2-react/code-snippet/chart/series/stackedbar-cs/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/stackedbar-cs/app/index.tsx
@@ -21,11 +21,11 @@ function App() {
title='Sales Comparison'>
-
+
-
+
-
+
diff --git a/ej2-react/code-snippet/chart/series/stackedbar-cs1/app/datasource.jsx b/ej2-react/code-snippet/chart/series/stackedbar-cs1/app/datasource.jsx
new file mode 100644
index 000000000..73cbfac59
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedbar-cs1/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let stackBarData = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedbar-cs1/app/datasource.tsx b/ej2-react/code-snippet/chart/series/stackedbar-cs1/app/datasource.tsx
new file mode 100644
index 000000000..644e7b9a1
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedbar-cs1/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let stackBarData: Object[] = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedbar-cs1/app/index.jsx b/ej2-react/code-snippet/chart/series/stackedbar-cs1/app/index.jsx
new file mode 100644
index 000000000..774d2ecee
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedbar-cs1/app/index.jsx
@@ -0,0 +1,29 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ return
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedbar-cs1/systemjs.config.js b/ej2-react/code-snippet/chart/series/stackedbar-cs1/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedbar-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/stackedbar-cs2/app/datasource.jsx b/ej2-react/code-snippet/chart/series/stackedbar-cs2/app/datasource.jsx
new file mode 100644
index 000000000..73cbfac59
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedbar-cs2/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let stackBarData = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedbar-cs2/app/datasource.tsx b/ej2-react/code-snippet/chart/series/stackedbar-cs2/app/datasource.tsx
new file mode 100644
index 000000000..644e7b9a1
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedbar-cs2/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let stackBarData: Object[] = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedbar-cs2/app/index.jsx b/ej2-react/code-snippet/chart/series/stackedbar-cs2/app/index.jsx
new file mode 100644
index 000000000..6cfda7867
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedbar-cs2/app/index.jsx
@@ -0,0 +1,29 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ return
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedbar-cs2/systemjs.config.js b/ej2-react/code-snippet/chart/series/stackedbar-cs2/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedbar-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/stackedbar-cs3/app/datasource.jsx b/ej2-react/code-snippet/chart/series/stackedbar-cs3/app/datasource.jsx
new file mode 100644
index 000000000..73cbfac59
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedbar-cs3/app/datasource.jsx
@@ -0,0 +1,8 @@
+export let stackBarData = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedbar-cs3/app/datasource.tsx b/ej2-react/code-snippet/chart/series/stackedbar-cs3/app/datasource.tsx
new file mode 100644
index 000000000..644e7b9a1
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedbar-cs3/app/datasource.tsx
@@ -0,0 +1,8 @@
+export let stackBarData: Object[] = [
+ { x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
+ { x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
+ { x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
+ { x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
+ { x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
+ { x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedbar-cs3/app/index.jsx b/ej2-react/code-snippet/chart/series/stackedbar-cs3/app/index.jsx
new file mode 100644
index 000000000..30687bdb6
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedbar-cs3/app/index.jsx
@@ -0,0 +1,30 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
+import { stackBarData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Category', title: 'Months' };
+ const primaryyAxis = {
+ title: 'Percentage (%)', minimum: -20, maximum: 100,
+ edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
+ };
+ const border = { width: 1.5, color: 'red'}
+ return
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
-
+
-
+
-
+
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/stackedcolumn-cs/app/index.tsx b/ej2-react/code-snippet/chart/series/stackedcolumn-cs/app/index.tsx
index 786dfe1ed..35a63be30 100644
--- a/ej2-react/code-snippet/chart/series/stackedcolumn-cs/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/stackedcolumn-cs/app/index.tsx
@@ -21,13 +21,13 @@ function App() {
title='Mobile Game Market by Country'>
-
+
-
+
-
+
-
+
diff --git a/ej2-react/code-snippet/chart/series/stackedcolumn-cs1/app/datasource.jsx b/ej2-react/code-snippet/chart/series/stackedcolumn-cs1/app/datasource.jsx
new file mode 100644
index 000000000..d1d1af8cd
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedcolumn-cs1/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let stackColumndata = [
+ { x: '2014', y: 111.1, y1: 76.9, y2: 66.1, y3: 34.1 },
+ { x: '2015', y: 127.3, y1: 99.5, y2: 79.3, y3: 38.2 },
+ { x: '2016', y: 143.4, y1: 121.7, y2: 91.3, y3: 44.0 },
+ { x: '2017', y: 159.9, y1: 142.5, y2: 102.4, y3: 51.6 },
+ { x: '2018', y: 175.4, y1: 166.7, y2: 112.9, y3: 61.9 },
+ { x: '2019', y: 189.0, y1: 182.9, y2: 122.4, y3: 71.5 },
+ { x: '2020', y: 202.7, y1: 197.3, y2: 120.9, y3: 82.0 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedcolumn-cs1/app/datasource.tsx b/ej2-react/code-snippet/chart/series/stackedcolumn-cs1/app/datasource.tsx
new file mode 100644
index 000000000..05ba9a4e7
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedcolumn-cs1/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let stackColumndata: Object[] = [
+ { x: '2014', y: 111.1, y1: 76.9, y2: 66.1, y3: 34.1 },
+ { x: '2015', y: 127.3, y1: 99.5, y2: 79.3, y3: 38.2 },
+ { x: '2016', y: 143.4, y1: 121.7, y2: 91.3, y3: 44.0 },
+ { x: '2017', y: 159.9, y1: 142.5, y2: 102.4, y3: 51.6 },
+ { x: '2018', y: 175.4, y1: 166.7, y2: 112.9, y3: 61.9 },
+ { x: '2019', y: 189.0, y1: 182.9, y2: 122.4, y3: 71.5 },
+ { x: '2020', y: 202.7, y1: 197.3, y2: 120.9, y3: 82.0 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedcolumn-cs1/app/index.jsx b/ej2-react/code-snippet/chart/series/stackedcolumn-cs1/app/index.jsx
new file mode 100644
index 000000000..2ada8102c
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedcolumn-cs1/app/index.jsx
@@ -0,0 +1,31 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingColumnSeries } from '@syncfusion/ej2-react-charts';
+import { stackColumndata } from './datasource';
+function App() {
+ const primaryxAxis = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis = {
+ title: 'Sales in Billions', minimum: 0, maximum: 700, interval: 100,
+ labelFormat: '{value}B'
+ };
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedcolumn-cs1/systemjs.config.js b/ej2-react/code-snippet/chart/series/stackedcolumn-cs1/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedcolumn-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/stackedcolumn-cs10/app/datasource.jsx b/ej2-react/code-snippet/chart/series/stackedcolumn-cs10/app/datasource.jsx
new file mode 100644
index 000000000..d1d1af8cd
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedcolumn-cs10/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let stackColumndata = [
+ { x: '2014', y: 111.1, y1: 76.9, y2: 66.1, y3: 34.1 },
+ { x: '2015', y: 127.3, y1: 99.5, y2: 79.3, y3: 38.2 },
+ { x: '2016', y: 143.4, y1: 121.7, y2: 91.3, y3: 44.0 },
+ { x: '2017', y: 159.9, y1: 142.5, y2: 102.4, y3: 51.6 },
+ { x: '2018', y: 175.4, y1: 166.7, y2: 112.9, y3: 61.9 },
+ { x: '2019', y: 189.0, y1: 182.9, y2: 122.4, y3: 71.5 },
+ { x: '2020', y: 202.7, y1: 197.3, y2: 120.9, y3: 82.0 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedcolumn-cs10/app/datasource.tsx b/ej2-react/code-snippet/chart/series/stackedcolumn-cs10/app/datasource.tsx
new file mode 100644
index 000000000..05ba9a4e7
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedcolumn-cs10/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let stackColumndata: Object[] = [
+ { x: '2014', y: 111.1, y1: 76.9, y2: 66.1, y3: 34.1 },
+ { x: '2015', y: 127.3, y1: 99.5, y2: 79.3, y3: 38.2 },
+ { x: '2016', y: 143.4, y1: 121.7, y2: 91.3, y3: 44.0 },
+ { x: '2017', y: 159.9, y1: 142.5, y2: 102.4, y3: 51.6 },
+ { x: '2018', y: 175.4, y1: 166.7, y2: 112.9, y3: 61.9 },
+ { x: '2019', y: 189.0, y1: 182.9, y2: 122.4, y3: 71.5 },
+ { x: '2020', y: 202.7, y1: 197.3, y2: 120.9, y3: 82.0 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedcolumn-cs10/app/index.jsx b/ej2-react/code-snippet/chart/series/stackedcolumn-cs10/app/index.jsx
new file mode 100644
index 000000000..05f03720b
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedcolumn-cs10/app/index.jsx
@@ -0,0 +1,32 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingColumnSeries } from '@syncfusion/ej2-react-charts';
+import { stackColumndata } from './datasource';
+function App() {
+ const primaryxAxis = { title: 'Years', interval: 1, valueType: 'Category' };
+ const primaryyAxis = {
+ title: 'Sales in Billions', minimum: 0, maximum: 700, interval: 100,
+ labelFormat: '{value}B'
+ };
+
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
-
+
-
+
-
+
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/stackedline-cs1/app/index.tsx b/ej2-react/code-snippet/chart/series/stackedline-cs1/app/index.tsx
index c0a7a1d15..045aa3125 100644
--- a/ej2-react/code-snippet/chart/series/stackedline-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/stackedline-cs1/app/index.tsx
@@ -17,13 +17,13 @@ function App() {
primaryYAxis={{ title: 'Expense', minimum: 0, maximum: 400, interval: 100, labelFormat: '${value}' }}>
-
+
-
+
-
+
-
+
diff --git a/ej2-react/code-snippet/chart/series/stackedline-cs10/app/datasource.jsx b/ej2-react/code-snippet/chart/series/stackedline-cs10/app/datasource.jsx
new file mode 100644
index 000000000..49e3d86a5
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedline-cs10/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let chartData = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedline-cs10/app/datasource.tsx b/ej2-react/code-snippet/chart/series/stackedline-cs10/app/datasource.tsx
new file mode 100644
index 000000000..31ba8b98a
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedline-cs10/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let chartData: Object[] = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedline-cs10/app/index.jsx b/ej2-react/code-snippet/chart/series/stackedline-cs10/app/index.jsx
new file mode 100644
index 000000000..9fe45bd04
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedline-cs10/app/index.jsx
@@ -0,0 +1,35 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingLineSeries } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+function App() {
+ const marker = { visible: true, };
+ const pointRender = (args) => {
+ if (args.point.y < 100) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+ }
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedline-cs2/systemjs.config.js b/ej2-react/code-snippet/chart/series/stackedline-cs2/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedline-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/stackedline-cs3/app/datasource.jsx b/ej2-react/code-snippet/chart/series/stackedline-cs3/app/datasource.jsx
new file mode 100644
index 000000000..49e3d86a5
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedline-cs3/app/datasource.jsx
@@ -0,0 +1,14 @@
+export let chartData = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedline-cs3/app/datasource.tsx b/ej2-react/code-snippet/chart/series/stackedline-cs3/app/datasource.tsx
new file mode 100644
index 000000000..31ba8b98a
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedline-cs3/app/datasource.tsx
@@ -0,0 +1,14 @@
+export let chartData: Object[] = [
+ { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
+ { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
+ { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
+ { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
+ { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
+ { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
+ { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
+ { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
+ { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
+ { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
+ { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
+ { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedline-cs3/app/index.jsx b/ej2-react/code-snippet/chart/series/stackedline-cs3/app/index.jsx
new file mode 100644
index 000000000..e22a1c488
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedline-cs3/app/index.jsx
@@ -0,0 +1,27 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingLineSeries } from '@syncfusion/ej2-react-charts';
+import { chartData } from './datasource';
+function App() {
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ return
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
-
+
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/stackedsteparea-cs1/app/index.tsx b/ej2-react/code-snippet/chart/series/stackedsteparea-cs1/app/index.tsx
index 860421b28..8f291d491 100644
--- a/ej2-react/code-snippet/chart/series/stackedsteparea-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/stackedsteparea-cs1/app/index.tsx
@@ -17,9 +17,9 @@ function App() {
title='Annual Temperature Comparison'>
-
+
-
+
diff --git a/ej2-react/code-snippet/chart/series/stackedsteparea-cs10/app/datasource.jsx b/ej2-react/code-snippet/chart/series/stackedsteparea-cs10/app/datasource.jsx
new file mode 100644
index 000000000..0d2af6f5c
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedsteparea-cs10/app/datasource.jsx
@@ -0,0 +1,12 @@
+export let stepAreaData = [
+ { x: 1, y: 7, y1: 10 }, { x: 2, y: 1, y1: 5 },
+ { x: 3, y: 1, y1: 7 }, { x: 4, y: 14, y1: 12 },
+ { x: 5, y: 1, y1: 4 }, { x: 6, y: 10, y1: 15 },
+ { x: 7, y: 8, y1: 12 }, { x: 8, y: 6, y1: 10 },
+ { x: 9, y: 10, y1: 14 }, { x: 10, y: 10, y1: 15 },
+ { x: 11, y: 16, y1: 18 }, { x: 12, y: 6, y1: 10 },
+ { x: 13, y: 14, y1: 18 }, { x: 14, y: 7, y1: 11 },
+ { x: 15, y: 5, y1: 9 }, { x: 16, y: 2, y1: 5 },
+ { x: 17, y: 14, y1: 18 }, { x: 18, y: 7, y1: 11 },
+ { x: 19, y: 7, y1: 10 }, { x: 20, y: 10, y1: 14 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedsteparea-cs10/app/datasource.tsx b/ej2-react/code-snippet/chart/series/stackedsteparea-cs10/app/datasource.tsx
new file mode 100644
index 000000000..f6d887ed8
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedsteparea-cs10/app/datasource.tsx
@@ -0,0 +1,12 @@
+export let stepAreaData: Object[] = [
+ { x: 1, y: 7, y1: 10 }, { x: 2, y: 1, y1: 5 },
+ { x: 3, y: 1, y1: 7 }, { x: 4, y: 14, y1: 12 },
+ { x: 5, y: 1, y1: 4 }, { x: 6, y: 10, y1: 15 },
+ { x: 7, y: 8, y1: 12 }, { x: 8, y: 6, y1: 10 },
+ { x: 9, y: 10, y1: 14 }, { x: 10, y: 10, y1: 15 },
+ { x: 11, y: 16, y1: 18 }, { x: 12, y: 6, y1: 10 },
+ { x: 13, y: 14, y1: 18 }, { x: 14, y: 7, y1: 11 },
+ { x: 15, y: 5, y1: 9 }, { x: 16, y: 2, y1: 5 },
+ { x: 17, y: 14, y1: 18 }, { x: 18, y: 7, y1: 11 },
+ { x: 19, y: 7, y1: 10 }, { x: 20, y: 10, y1: 14 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedsteparea-cs10/app/index.jsx b/ej2-react/code-snippet/chart/series/stackedsteparea-cs10/app/index.jsx
new file mode 100644
index 000000000..33b4084f9
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedsteparea-cs10/app/index.jsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, StackingStepAreaSeries } from '@syncfusion/ej2-react-charts';
+import { stepAreaData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Double', title: 'Overs' };
+ const primaryyAxis = { title: 'Runs' };
+ const pointRender = (args) => {
+ if (args.point.index % 2 !== 0) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+ };
+ return
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedsteparea-cs2/systemjs.config.js b/ej2-react/code-snippet/chart/series/stackedsteparea-cs2/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedsteparea-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/stackedsteparea-cs3/app/datasource.jsx b/ej2-react/code-snippet/chart/series/stackedsteparea-cs3/app/datasource.jsx
new file mode 100644
index 000000000..0d2af6f5c
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedsteparea-cs3/app/datasource.jsx
@@ -0,0 +1,12 @@
+export let stepAreaData = [
+ { x: 1, y: 7, y1: 10 }, { x: 2, y: 1, y1: 5 },
+ { x: 3, y: 1, y1: 7 }, { x: 4, y: 14, y1: 12 },
+ { x: 5, y: 1, y1: 4 }, { x: 6, y: 10, y1: 15 },
+ { x: 7, y: 8, y1: 12 }, { x: 8, y: 6, y1: 10 },
+ { x: 9, y: 10, y1: 14 }, { x: 10, y: 10, y1: 15 },
+ { x: 11, y: 16, y1: 18 }, { x: 12, y: 6, y1: 10 },
+ { x: 13, y: 14, y1: 18 }, { x: 14, y: 7, y1: 11 },
+ { x: 15, y: 5, y1: 9 }, { x: 16, y: 2, y1: 5 },
+ { x: 17, y: 14, y1: 18 }, { x: 18, y: 7, y1: 11 },
+ { x: 19, y: 7, y1: 10 }, { x: 20, y: 10, y1: 14 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedsteparea-cs3/app/datasource.tsx b/ej2-react/code-snippet/chart/series/stackedsteparea-cs3/app/datasource.tsx
new file mode 100644
index 000000000..f6d887ed8
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedsteparea-cs3/app/datasource.tsx
@@ -0,0 +1,12 @@
+export let stepAreaData: Object[] = [
+ { x: 1, y: 7, y1: 10 }, { x: 2, y: 1, y1: 5 },
+ { x: 3, y: 1, y1: 7 }, { x: 4, y: 14, y1: 12 },
+ { x: 5, y: 1, y1: 4 }, { x: 6, y: 10, y1: 15 },
+ { x: 7, y: 8, y1: 12 }, { x: 8, y: 6, y1: 10 },
+ { x: 9, y: 10, y1: 14 }, { x: 10, y: 10, y1: 15 },
+ { x: 11, y: 16, y1: 18 }, { x: 12, y: 6, y1: 10 },
+ { x: 13, y: 14, y1: 18 }, { x: 14, y: 7, y1: 11 },
+ { x: 15, y: 5, y1: 9 }, { x: 16, y: 2, y1: 5 },
+ { x: 17, y: 14, y1: 18 }, { x: 18, y: 7, y1: 11 },
+ { x: 19, y: 7, y1: 10 }, { x: 20, y: 10, y1: 14 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stackedsteparea-cs3/app/index.jsx b/ej2-react/code-snippet/chart/series/stackedsteparea-cs3/app/index.jsx
new file mode 100644
index 000000000..cc8392469
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stackedsteparea-cs3/app/index.jsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, StackingStepAreaSeries } from '@syncfusion/ej2-react-charts';
+import { stepAreaData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Double', title: 'Overs' };
+ const primaryyAxis = { title: 'Runs' };
+ return
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Accumulation Series
+
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/steparea-cs/app/index.tsx b/ej2-react/code-snippet/chart/series/steparea-cs/app/index.tsx
index ce12e314b..7c7ae8dc5 100644
--- a/ej2-react/code-snippet/chart/series/steparea-cs/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/steparea-cs/app/index.tsx
@@ -17,8 +17,7 @@ function App() {
title='Annual Temperature Comparison'>
-
+
diff --git a/ej2-react/code-snippet/chart/series/steparea-cs1/app/datasource.jsx b/ej2-react/code-snippet/chart/series/steparea-cs1/app/datasource.jsx
new file mode 100644
index 000000000..45d1ebd3b
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/steparea-cs1/app/datasource.jsx
@@ -0,0 +1,12 @@
+export let stepAreaData = [
+ { x: 1, y: 7 }, { x: 2, y: 1 },
+ { x: 3, y: 1 }, { x: 4, y: 14 },
+ { x: 5, y: 1 }, { x: 6, y: 10 },
+ { x: 7, y: 8 }, { x: 8, y: 6 },
+ { x: 9, y: 10 }, { x: 10, y: 10 },
+ { x: 11, y: 16 }, { x: 12, y: 6 },
+ { x: 13, y: 14 }, { x: 14, y: 7 },
+ { x: 15, y: 5 }, { x: 16, y: 2 },
+ { x: 17, y: 14 }, { x: 18, y: 7 },
+ { x: 19, y: 7 }, { x: 20, y: 10 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/steparea-cs1/app/datasource.tsx b/ej2-react/code-snippet/chart/series/steparea-cs1/app/datasource.tsx
new file mode 100644
index 000000000..ee50c6708
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/steparea-cs1/app/datasource.tsx
@@ -0,0 +1,12 @@
+export let stepAreaData: Object[] = [
+ { x: 1, y: 7 }, { x: 2, y: 1 },
+ { x: 3, y: 1 }, { x: 4, y: 14 },
+ { x: 5, y: 1 }, { x: 6, y: 10 },
+ { x: 7, y: 8 }, { x: 8, y: 6 },
+ { x: 9, y: 10 }, { x: 10, y: 10 },
+ { x: 11, y: 16 }, { x: 12, y: 6 },
+ { x: 13, y: 14 }, { x: 14, y: 7 },
+ { x: 15, y: 5 }, { x: 16, y: 2 },
+ { x: 17, y: 14 }, { x: 18, y: 7 },
+ { x: 19, y: 7 }, { x: 20, y: 10 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/steparea-cs1/app/index.jsx b/ej2-react/code-snippet/chart/series/steparea-cs1/app/index.jsx
new file mode 100644
index 000000000..7185eb4e3
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/steparea-cs1/app/index.jsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, StepAreaSeries } from '@syncfusion/ej2-react-charts';
+import { stepAreaData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Double', title: 'Overs' };
+ const primaryyAxis = { title: 'Runs' };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/steparea-cs1/systemjs.config.js b/ej2-react/code-snippet/chart/series/steparea-cs1/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/steparea-cs1/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/steparea-cs2/app/datasource.jsx b/ej2-react/code-snippet/chart/series/steparea-cs2/app/datasource.jsx
new file mode 100644
index 000000000..45d1ebd3b
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/steparea-cs2/app/datasource.jsx
@@ -0,0 +1,12 @@
+export let stepAreaData = [
+ { x: 1, y: 7 }, { x: 2, y: 1 },
+ { x: 3, y: 1 }, { x: 4, y: 14 },
+ { x: 5, y: 1 }, { x: 6, y: 10 },
+ { x: 7, y: 8 }, { x: 8, y: 6 },
+ { x: 9, y: 10 }, { x: 10, y: 10 },
+ { x: 11, y: 16 }, { x: 12, y: 6 },
+ { x: 13, y: 14 }, { x: 14, y: 7 },
+ { x: 15, y: 5 }, { x: 16, y: 2 },
+ { x: 17, y: 14 }, { x: 18, y: 7 },
+ { x: 19, y: 7 }, { x: 20, y: 10 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/steparea-cs2/app/datasource.tsx b/ej2-react/code-snippet/chart/series/steparea-cs2/app/datasource.tsx
new file mode 100644
index 000000000..ee50c6708
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/steparea-cs2/app/datasource.tsx
@@ -0,0 +1,12 @@
+export let stepAreaData: Object[] = [
+ { x: 1, y: 7 }, { x: 2, y: 1 },
+ { x: 3, y: 1 }, { x: 4, y: 14 },
+ { x: 5, y: 1 }, { x: 6, y: 10 },
+ { x: 7, y: 8 }, { x: 8, y: 6 },
+ { x: 9, y: 10 }, { x: 10, y: 10 },
+ { x: 11, y: 16 }, { x: 12, y: 6 },
+ { x: 13, y: 14 }, { x: 14, y: 7 },
+ { x: 15, y: 5 }, { x: 16, y: 2 },
+ { x: 17, y: 14 }, { x: 18, y: 7 },
+ { x: 19, y: 7 }, { x: 20, y: 10 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/steparea-cs2/app/index.jsx b/ej2-react/code-snippet/chart/series/steparea-cs2/app/index.jsx
new file mode 100644
index 000000000..848701fa7
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/steparea-cs2/app/index.jsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, StepAreaSeries } from '@syncfusion/ej2-react-charts';
+import { stepAreaData } from './datasource';
+function App() {
+ const primaryxAxis = { valueType: 'Double', title: 'Overs' };
+ const primaryyAxis = { title: 'Runs' };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Accumulation Series
+
-
+
;
diff --git a/ej2-react/code-snippet/chart/series/stepline-cs1/app/index.tsx b/ej2-react/code-snippet/chart/series/stepline-cs1/app/index.tsx
index 949030da7..2b786ee5d 100644
--- a/ej2-react/code-snippet/chart/series/stepline-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/stepline-cs1/app/index.tsx
@@ -14,8 +14,8 @@ function App() {
return
-
+
diff --git a/ej2-react/code-snippet/chart/series/stepline-cs10/app/datasource.jsx b/ej2-react/code-snippet/chart/series/stepline-cs10/app/datasource.jsx
new file mode 100644
index 000000000..609287ba7
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stepline-cs10/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let data = [
+ { x: 2005, y: 28 },
+ { x: 2006, y: 25 },
+ { x: 2007, y: 26 },
+ { x: 2008, y: 27 },
+ { x: 2009, y: 32 },
+ { x: 2010, y: 35 },
+ { x: 2011, y: 30 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stepline-cs10/app/datasource.tsx b/ej2-react/code-snippet/chart/series/stepline-cs10/app/datasource.tsx
new file mode 100644
index 000000000..c88c0e7d8
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stepline-cs10/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let data: Object[] = [
+ { x: 2005, y: 28 },
+ { x: 2006, y: 25 },
+ { x: 2007, y: 26 },
+ { x: 2008, y: 27 },
+ { x: 2009, y: 32 },
+ { x: 2010, y: 35 },
+ { x: 2011, y: 30 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stepline-cs10/app/index.jsx b/ej2-react/code-snippet/chart/series/stepline-cs10/app/index.jsx
new file mode 100644
index 000000000..8e1148f9e
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stepline-cs10/app/index.jsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StepLineSeries } from '@syncfusion/ej2-react-charts';
+import { data } from './datasource';
+function App() {
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ const seriesRender = (args) => {
+ args.fill = '#ff6347';
+ };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stepline-cs2/systemjs.config.js b/ej2-react/code-snippet/chart/series/stepline-cs2/systemjs.config.js
new file mode 100644
index 000000000..4ed36970d
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stepline-cs2/systemjs.config.js
@@ -0,0 +1,55 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
+"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/chart/series/stepline-cs3/app/datasource.jsx b/ej2-react/code-snippet/chart/series/stepline-cs3/app/datasource.jsx
new file mode 100644
index 000000000..609287ba7
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stepline-cs3/app/datasource.jsx
@@ -0,0 +1,9 @@
+export let data = [
+ { x: 2005, y: 28 },
+ { x: 2006, y: 25 },
+ { x: 2007, y: 26 },
+ { x: 2008, y: 27 },
+ { x: 2009, y: 32 },
+ { x: 2010, y: 35 },
+ { x: 2011, y: 30 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stepline-cs3/app/datasource.tsx b/ej2-react/code-snippet/chart/series/stepline-cs3/app/datasource.tsx
new file mode 100644
index 000000000..c88c0e7d8
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stepline-cs3/app/datasource.tsx
@@ -0,0 +1,9 @@
+export let data: Object[] = [
+ { x: 2005, y: 28 },
+ { x: 2006, y: 25 },
+ { x: 2007, y: 26 },
+ { x: 2008, y: 27 },
+ { x: 2009, y: 32 },
+ { x: 2010, y: 35 },
+ { x: 2011, y: 30 }
+];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/chart/series/stepline-cs3/app/index.jsx b/ej2-react/code-snippet/chart/series/stepline-cs3/app/index.jsx
new file mode 100644
index 000000000..378f9d5ea
--- /dev/null
+++ b/ej2-react/code-snippet/chart/series/stepline-cs3/app/index.jsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StepLineSeries } from '@syncfusion/ej2-react-charts';
+import { data } from './datasource';
+function App() {
+ const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
+ return
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Accumulation Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Line Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: ISeriesRenderEventArgs): void => {
+ args.fill = '#ff6347';
+ };
+ return
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render( = (args: IPointRenderEventArgs): void => {
+ if (args.point.index % 2 !== 0) {
+ args.fill = '#ff6347';
+ }
+ else {
+ args.fill = '#009cb8';
+ }
+ };
+ return
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+ ${point.y} ' };
-
- return
-
-
-
-
-
+ const primaryxAxis = { title: 'Defects', valueType: 'Category' };
+ const primaryyAxis = { title: 'Frequency', minimum: 0, maximum: 150, interval: 30 };
+ const tooltipsettings = { enable: true };
+ const marker = { visible: true, width: 10, height: 10 };
+ const paretoOptions = {
+ fill: 'red'
+ }
+ return
+
+
+
+
+ ;
}
;
export default App;
ReactDOM.render(${point.y} ' };
- return
-
-
-
-
-
+function App() {
+ const primaryxAxis: AxisModel= { title: 'Defects', valueType: 'Category' } ;
+ const primaryyAxis: AxisModel= { title: 'Frequency', minimum: 0, maximum: 150,interval: 30 } ;
+ const tooltipsettings: TooltipSettingsModel={ enable: true };
+ const marker={ visible: true, width: 10, height: 10};
+ const paretoOptions: object = {
+ fill: 'red'
+ };
+ return
+
+
+
+
+
};
export default App;
ReactDOM.render(
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-RangeColumn Series
+
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(
+
+
+
+
+
+
+};
+export default App;
+ReactDOM.render(Syncfusion React Chart-Zooming
+ EJ2 React ColorPicker
+
+ {/* Primary Button - Used to represent a primary action. */}
+ button
+
+ {/* Success Button - Used to represent a positive action. */}
+ button
+
+ {/* Info Button - Used to represent an informative action. */}
+ button
+
+ {/* Warning Button - Used to represent an action with caution.*/}
+ button
+
+ {/* Danger Button - Used to represent a negative action.*/}
+ button
+
+
);
+}
+export default App;
+ReactDom.render() => {
+ setIsChecked(event.target.checked);
+
+ // Add or remove the class on the body element based on the checkbox state
+ if (event.target.checked) {
+ document.body.classList.add('dark');
+ document.body.classList.add('e-dark-mode');
+ } else {
+ document.body.classList.remove('dark');
+ document.body.classList.remove('e-dark-mode');
+ }
+ };
+ return (
+
+ { /* checkbox - Used to represent checkbox. */ }
+ Button
+
+ { /* Success Button - Used to represent a positive action. */ }
+ Button
+
+ { /* Info Button - Used to represent an informative action. */ }
+ Button
+
+ { /* Warning Button - Used to represent an action with caution.*/ }
+ Button
+
+ { /* Danger Button - Used to represent a negative action.*/ }
+ Button
+
+
+ );
+}
+export default App;
+ReactDom.render(Syncfusion React Button
+
+ {/* Primary Button - Used to represent a primary action. */}
+ button
+
);
+}
+export default App;
+ReactDom.render(
+ { /* Primary Button - Used to represent a primary action. */ }
+ Button
+
+ );
+}
+export default App;
+ReactDom.render(Syncfusion React Button
+
{/* Primary Button - Used to represent a primary action. */}
-
button
{/* Success Button - Used to represent a positive action. */}
diff --git a/ej2-react/code-snippet/common/fluent2-cs1/app/index.tsx b/ej2-react/code-snippet/common/fluent2-cs1/app/index.tsx
index bb2d89311..494486910 100644
--- a/ej2-react/code-snippet/common/fluent2-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/common/fluent2-cs1/app/index.tsx
@@ -1,6 +1,7 @@
import {ButtonComponent, CheckBoxComponent} from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
+import { ChangeEventArgs } from '@syncfusion/ej2-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useState } from 'react';
@@ -9,11 +10,12 @@ enableRipple(true);
function App() {
const [isChecked, setIsChecked] = useState(false);
- const handleCheckboxChange = (event: React.ChangeEvent) => {
- setIsChecked(event.target.checked);
+ const handleCheckboxChange = (event: ChangeEventArgs) => {
+ const checked = event.checked ?? false;
+ setIsChecked(checked);
// Add or remove the class on the body element based on the checkbox state
- if (event.target.checked) {
+ if (checked) {
document.body.classList.add('dark');
document.body.classList.add('e-dark-mode');
} else {
@@ -24,7 +26,7 @@ function App() {
return (
{ /* checkbox - Used to represent checkbox. */ }
-
Button
diff --git a/ej2-react/code-snippet/common/fluent2-cs2/index.css b/ej2-react/code-snippet/common/fluent2-cs2/index.css
index 391b66de9..e36b76f4f 100644
--- a/ej2-react/code-snippet/common/fluent2-cs2/index.css
+++ b/ej2-react/code-snippet/common/fluent2-cs2/index.css
@@ -1,5 +1,5 @@
:root {
- --color-sf-primary: 104, 134, 164;
+ --color-sf-primary: #6886a4;
}
button {
diff --git a/ej2-react/code-snippet/common/material3-cs1/app/index.jsx b/ej2-react/code-snippet/common/material3-cs1/app/index.jsx
index 06d4a8828..a11f70d4d 100644
--- a/ej2-react/code-snippet/common/material3-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/common/material3-cs1/app/index.jsx
@@ -8,22 +8,22 @@ function App() {
const [isChecked, setIsChecked] = useState(false);
const handleCheckboxChange = (event) => {
- setIsChecked(event.target.checked);
+ setIsChecked(event.checked);
// Add or remove the classes on the body element based on the checkbox state
const body = document.body;
- if (event.target.checked) {
- body.classList.add('dark');
+ if (event.checked) {
body.classList.add('dark');
+ body.classList.add('e-dark-mode');
} else {
- body.classList.remove('e-dark-mode');
+ body.classList.remove('dark');
body.classList.remove('e-dark-mode');
}
};
return (
{/* Primary Button - Used to represent a primary action. */}
-
button
{/* Success Button - Used to represent a positive action. */}
diff --git a/ej2-react/code-snippet/common/material3-cs1/app/index.tsx b/ej2-react/code-snippet/common/material3-cs1/app/index.tsx
index bb2d89311..494486910 100644
--- a/ej2-react/code-snippet/common/material3-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/common/material3-cs1/app/index.tsx
@@ -1,6 +1,7 @@
import {ButtonComponent, CheckBoxComponent} from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
+import { ChangeEventArgs } from '@syncfusion/ej2-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useState } from 'react';
@@ -9,11 +10,12 @@ enableRipple(true);
function App() {
const [isChecked, setIsChecked] = useState(false);
- const handleCheckboxChange = (event: React.ChangeEvent) => {
- setIsChecked(event.target.checked);
+ const handleCheckboxChange = (event: ChangeEventArgs) => {
+ const checked = event.checked ?? false;
+ setIsChecked(checked);
// Add or remove the class on the body element based on the checkbox state
- if (event.target.checked) {
+ if (checked) {
document.body.classList.add('dark');
document.body.classList.add('e-dark-mode');
} else {
@@ -24,7 +26,7 @@ function App() {
return (
{ /* checkbox - Used to represent checkbox. */ }
-
Button
diff --git a/ej2-react/code-snippet/dashboard-layout/getting-started-cs1/app/App.jsx b/ej2-react/code-snippet/dashboard-layout/getting-started-cs1/app/App.jsx
index 4a9bddbf8..0aa63d6f7 100644
--- a/ej2-react/code-snippet/dashboard-layout/getting-started-cs1/app/App.jsx
+++ b/ej2-react/code-snippet/dashboard-layout/getting-started-cs1/app/App.jsx
@@ -1,5 +1,6 @@
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
+import './index.css'
function App() {
const cellSpacing = [5, 5];
return (
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/app/index.jsx
new file mode 100644
index 000000000..2a813f0fe
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/app/index.jsx
@@ -0,0 +1,68 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, ComplexHierarchicalTree } from "@syncfusion/ej2-react-diagrams";
+
+
+//Initialize nodes for diagram
+let nodes = [
+ { id: 'node1' },
+ { id: 'node2' },
+ { id: 'node3' },
+ { id: 'node4' },
+ { id: 'node5' },
+ { id: 'node6' },
+ { id: 'node7' },
+ ];
+
+//Initialize connectors for diagram
+let connectors = [
+ { id: 'node1-node4', sourceID: 'node1', targetID: 'node4' },
+ { id: 'node2-node4', sourceID: 'node2', targetID: 'node4' },
+ { id: 'node3-node4', sourceID: 'node3', targetID: 'node4' },
+ { id: 'node4-node5', sourceID: 'node4', targetID: 'node5' },
+ { id: 'node4-node6', sourceID: 'node4', targetID: 'node6' },
+ { id: 'node5-node6', sourceID: 'node6', targetID: 'node7' },
+ ];
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 70; node.height = 70;
+ node.annotations = [{ content: node.id }];
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/app/index.tsx
new file mode 100644
index 000000000..930556379
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/app/index.tsx
@@ -0,0 +1,69 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding,
+ ComplexHierarchicalTree } from "@syncfusion/ej2-react-diagrams";
+
+
+//Initialize nodes for diagram
+let nodes: NodeModel[] = [
+ { id: 'node1' },
+ { id: 'node2' },
+ { id: 'node3' },
+ { id: 'node4' },
+ { id: 'node5' },
+ { id: 'node6' },
+ { id: 'node7' },
+];
+
+//Initialize connectors for diagram
+let connectors: ConnectorModel[] = [
+ { id: 'node1-node4', sourceID: 'node1', targetID: 'node4' },
+ { id: 'node2-node4', sourceID: 'node2', targetID: 'node4' },
+ { id: 'node3-node4', sourceID: 'node3', targetID: 'node4' },
+ { id: 'node4-node5', sourceID: 'node4', targetID: 'node5' },
+ { id: 'node4-node6', sourceID: 'node4', targetID: 'node6' },
+ { id: 'node5-node6', sourceID: 'node6', targetID: 'node7' },
+];
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 70; node.height = 70;
+ node.annotations = [{ content: node.id }];
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/contextmenu/es5custom-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/contextmenu/es5custom-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/app/index.jsx
new file mode 100644
index 000000000..7ad26e1c0
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/app/index.jsx
@@ -0,0 +1,83 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, ComplexHierarchicalTree } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+
+//Initializes data source
+let data = [
+ { "Name": "node11" },
+ { "Name": "node12", "ReportingPerson": ["node114"] },
+ { "Name": "node13", "ReportingPerson": ["node12"] },
+ { "Name": "node14", "ReportingPerson": ["node12"] },
+ { "Name": "node15", "ReportingPerson": ["node12"] },
+ { "Name": "node16", "ReportingPerson": [] },
+ { "Name": "node17", "ReportingPerson": ["node13", "node14", "node15"] },
+ { "Name": "node18", "ReportingPerson": [] },
+ { "Name": "node19", "ReportingPerson": ["node16", "node17", "node18"] },
+ { "Name": "node110", "ReportingPerson": ["node16", "node17", "node18"] },
+ { "Name": "node111", "ReportingPerson": ["node16", "node17", "node18", "node116"] },
+ { "Name": "node21" },
+ { "Name": "node22", "ReportingPerson": ["node114"] },
+ { "Name": "node23", "ReportingPerson": ["node22"] },
+ { "Name": "node24", "ReportingPerson": ["node22"] },
+ { "Name": "node25", "ReportingPerson": ["node22"] },
+ { "Name": "node26", "ReportingPerson": [] },
+ { "Name": "node27", "ReportingPerson": ["node23", "node24", "node25"] },
+ { "Name": "node28", "ReportingPerson": [] },
+ { "Name": "node29", "ReportingPerson": ["node26", "node27", "node28", "node116"] },
+ { "Name": "node210", "ReportingPerson": ["node26", "node27", "node28"] },
+ { "Name": "node211", "ReportingPerson": ["node26", "node27", "node28"] },
+ { "Name": "node31" },
+ { "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"] },
+ { "Name": "node116", "ReportingPerson": ["node12", "node22"], }
+];
+
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 70; node.height = 70;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/app/index.tsx
new file mode 100644
index 000000000..509bb7214
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/app/index.tsx
@@ -0,0 +1,84 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding,
+ ComplexHierarchicalTree } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+
+//Initializes data source
+let data: object[] = [
+ { "Name": "node11" },
+ { "Name": "node12", "ReportingPerson": ["node114"] },
+ { "Name": "node13", "ReportingPerson": ["node12"] },
+ { "Name": "node14", "ReportingPerson": ["node12"] },
+ { "Name": "node15", "ReportingPerson": ["node12"] },
+ { "Name": "node16", "ReportingPerson": [] },
+ { "Name": "node17", "ReportingPerson": ["node13", "node14", "node15"] },
+ { "Name": "node18", "ReportingPerson": [] },
+ { "Name": "node19", "ReportingPerson": ["node16", "node17", "node18"] },
+ { "Name": "node110", "ReportingPerson": ["node16", "node17", "node18"] },
+ { "Name": "node111", "ReportingPerson": ["node16", "node17", "node18", "node116"] },
+ { "Name": "node21" },
+ { "Name": "node22", "ReportingPerson": ["node114"] },
+ { "Name": "node23", "ReportingPerson": ["node22"] },
+ { "Name": "node24", "ReportingPerson": ["node22"] },
+ { "Name": "node25", "ReportingPerson": ["node22"] },
+ { "Name": "node26", "ReportingPerson": [] },
+ { "Name": "node27", "ReportingPerson": ["node23", "node24", "node25"] },
+ { "Name": "node28", "ReportingPerson": [] },
+ { "Name": "node29", "ReportingPerson": ["node26", "node27", "node28", "node116"] },
+ { "Name": "node210", "ReportingPerson": ["node26", "node27", "node28"] },
+ { "Name": "node211", "ReportingPerson": ["node26", "node27", "node28"] },
+ { "Name": "node31" },
+ { "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"] },
+ { "Name": "node116", "ReportingPerson": ["node12", "node22"], }
+];
+
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 70; node.height = 70;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/contextmenu/es5default-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/contextmenu/es5default-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/app/index.jsx
new file mode 100644
index 000000000..2dcc5c87f
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/app/index.jsx
@@ -0,0 +1,78 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, ComplexHierarchicalTree,
+ ConnectionPointOrigin, LineDistribution } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+
+//Initializes data source
+let data = [
+ { "Name": "node11" },
+ { "Name": "node12", "ReportingPerson": ["node114"] },
+ { "Name": "node13", "ReportingPerson": ["node12"] },
+ { "Name": "node14", "ReportingPerson": ["node12"] },
+ { "Name": "node15", "ReportingPerson": ["node12"] },
+ { "Name": "node116", "ReportingPerson": ["node22", "node12"] },
+ { "Name": "node16", "ReportingPerson": [] },
+ { "Name": "node18", "ReportingPerson": [] },
+ { "Name": "node21" },
+ { "Name": "node22", "ReportingPerson": ["node114"] },
+ { "Name": "node23", "ReportingPerson": ["node22"] },
+ { "Name": "node24", "ReportingPerson": ["node22"] },
+ { "Name": "node25", "ReportingPerson": ["node22"] },
+ { "Name": "node26", "ReportingPerson": [] },
+ { "Name": "node28", "ReportingPerson": [] },
+ { "Name": "node31" },
+ { "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"] }
+];
+
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 40; node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ connector.cornerRadius = 7;
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/app/index.tsx
new file mode 100644
index 000000000..e58d6a9b9
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/app/index.tsx
@@ -0,0 +1,78 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding,
+ ComplexHierarchicalTree, ConnectionPointOrigin, LineDistribution } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+
+//Initializes data source
+let data: object[] = [
+ { "Name": "node11" },
+ { "Name": "node12", "ReportingPerson": ["node114"] },
+ { "Name": "node13", "ReportingPerson": ["node12"] },
+ { "Name": "node14", "ReportingPerson": ["node12"] },
+ { "Name": "node15", "ReportingPerson": ["node12"] },
+ { "Name": "node116", "ReportingPerson": ["node22", "node12"] },
+ { "Name": "node16", "ReportingPerson": [] },
+ { "Name": "node18", "ReportingPerson": [] },
+ { "Name": "node21" },
+ { "Name": "node22", "ReportingPerson": ["node114"] },
+ { "Name": "node23", "ReportingPerson": ["node22"] },
+ { "Name": "node24", "ReportingPerson": ["node22"] },
+ { "Name": "node25", "ReportingPerson": ["node22"] },
+ { "Name": "node26", "ReportingPerson": [] },
+ { "Name": "node28", "ReportingPerson": [] },
+ { "Name": "node31" },
+ { "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"] }
+];
+
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 40; node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = 'Orthogonal';
+ connector.cornerRadius = 7;
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/group/es5group-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/group/es5group-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/app/index.jsx
new file mode 100644
index 000000000..23c5a346a
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/app/index.jsx
@@ -0,0 +1,78 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, ComplexHierarchicalTree, LineDistribution,
+ ChildArrangement } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+
+//Initializes data source
+let data = [
+ { "Name": "node11" },
+ { "Name": "node12", "ReportingPerson": ["node114"] },
+ { "Name": "node13", "ReportingPerson": ["node12"] },
+ { "Name": "node14", "ReportingPerson": ["node12"] },
+ { "Name": "node15", "ReportingPerson": ["node12"] },
+ { "Name": "node116", "ReportingPerson": ["node22", "node12"] },
+ { "Name": "node16", "ReportingPerson": [] },
+ { "Name": "node18", "ReportingPerson": [] },
+ { "Name": "node21" },
+ { "Name": "node22", "ReportingPerson": ["node114"] },
+ { "Name": "node23", "ReportingPerson": ["node22"] },
+ { "Name": "node24", "ReportingPerson": ["node22"] },
+ { "Name": "node25", "ReportingPerson": ["node22"] },
+ { "Name": "node26", "ReportingPerson": [] },
+ { "Name": "node28", "ReportingPerson": [] },
+ { "Name": "node31" },
+ { "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"] }
+];
+
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 40; node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ connector.cornerRadius = 7;
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/app/index.tsx
new file mode 100644
index 000000000..216896dff
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/app/index.tsx
@@ -0,0 +1,78 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding, ComplexHierarchicalTree,
+ LineDistribution, ChildArrangement } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+
+//Initializes data source
+let data: object[] = [
+ { "Name": "node11" },
+ { "Name": "node12", "ReportingPerson": ["node114"] },
+ { "Name": "node13", "ReportingPerson": ["node12"] },
+ { "Name": "node14", "ReportingPerson": ["node12"] },
+ { "Name": "node15", "ReportingPerson": ["node12"] },
+ { "Name": "node116", "ReportingPerson": ["node22", "node12"] },
+ { "Name": "node16", "ReportingPerson": [] },
+ { "Name": "node18", "ReportingPerson": [] },
+ { "Name": "node21" },
+ { "Name": "node22", "ReportingPerson": ["node114"] },
+ { "Name": "node23", "ReportingPerson": ["node22"] },
+ { "Name": "node24", "ReportingPerson": ["node22"] },
+ { "Name": "node25", "ReportingPerson": ["node22"] },
+ { "Name": "node26", "ReportingPerson": [] },
+ { "Name": "node28", "ReportingPerson": [] },
+ { "Name": "node31" },
+ { "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"] }
+];
+
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 40; node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = 'Orthogonal';
+ connector.cornerRadius = 7;
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/group/es5groupadd-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/group/es5groupadd-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/app/index.jsx
new file mode 100644
index 000000000..3491af471
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/app/index.jsx
@@ -0,0 +1,74 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, ComplexHierarchicalTree, LineDistribution } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+
+//Initializes data source
+let data = [
+ { Name: 'node11' },
+ { Name: 'node12', ReportingPerson: ['node114'] },
+ { Name: 'node13', ReportingPerson: ['node12'] },
+ { Name: 'node14', ReportingPerson: ['node12'] },
+ { Name: 'node15', ReportingPerson: ['node12'] },
+ { Name: 'node16', ReportingPerson: ['node12'] },
+ { Name: 'node116', ReportingPerson: ['node22', 'node12', 'node114'] },
+ { Name: 'node21' },
+ { Name: 'node22', ReportingPerson: ['node114'] },
+ { Name: 'node222', ReportingPerson: ['node114'] },
+ { Name: 'node2222', ReportingPerson: ['node114'] },
+ { Name: 'node23', ReportingPerson: ['node22'] },
+ { Name: 'node31' },
+ { Name: 'node114', ReportingPerson: ['node11', 'node21', 'node31'] },
+ ];
+
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 40; node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ connector.cornerRadius = 7;
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/app/index.tsx
new file mode 100644
index 000000000..55ee67793
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/app/index.tsx
@@ -0,0 +1,74 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding, ComplexHierarchicalTree, LineDistribution } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+
+//Initializes data source
+let data: object[] = [
+ { Name: 'node11' },
+ { Name: 'node12', ReportingPerson: ['node114'] },
+ { Name: 'node13', ReportingPerson: ['node12'] },
+ { Name: 'node14', ReportingPerson: ['node12'] },
+ { Name: 'node15', ReportingPerson: ['node12'] },
+ { Name: 'node16', ReportingPerson: ['node12'] },
+ { Name: 'node116', ReportingPerson: ['node22', 'node12', 'node114'] },
+ { Name: 'node21' },
+ { Name: 'node22', ReportingPerson: ['node114'] },
+ { Name: 'node222', ReportingPerson: ['node114'] },
+ { Name: 'node2222', ReportingPerson: ['node114'] },
+ { Name: 'node23', ReportingPerson: ['node22'] },
+ { Name: 'node31' },
+ { Name: 'node114', ReportingPerson: ['node11', 'node21', 'node31'] },
+];
+
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 40; node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = 'Orthogonal';
+ connector.cornerRadius = 7;
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/group/es5groupaddatruntime-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/group/es5groupaddatruntime-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Assistant-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Assistant-cs1/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Assistant-cs1/index.html
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Assistant-cs1/index.html
@@ -2,7 +2,7 @@
-
Syncfusion React Chart-DataLabel
+
Syncfusion® React Chart-DataLabel
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5GetLayoutInfo-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/es5GetLayoutInfo-cs1/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5GetLayoutInfo-cs1/index.html
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5GetLayoutInfo-cs1/index.html
@@ -2,7 +2,7 @@
-
Syncfusion React Chart-DataLabel
+
Syncfusion® React Chart-DataLabel
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutMargin-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutMargin-cs1/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutMargin-cs1/index.html
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutMargin-cs1/index.html
@@ -2,7 +2,7 @@
-
Syncfusion React Chart-DataLabel
+
Syncfusion® React Chart-DataLabel
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutOrientation-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutOrientation-cs1/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutOrientation-cs1/index.html
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutOrientation-cs1/index.html
@@ -2,7 +2,7 @@
-
Syncfusion React Chart-DataLabel
+
Syncfusion® React Chart-DataLabel
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LineDistribution-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LineDistribution-cs1/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LineDistribution-cs1/index.html
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LineDistribution-cs1/index.html
@@ -2,7 +2,7 @@
-
Syncfusion React Chart-DataLabel
+
Syncfusion® React Chart-DataLabel
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs1/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs1/index.html
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs1/index.html
@@ -2,7 +2,7 @@
-
Syncfusion React Chart-DataLabel
+
Syncfusion® React Chart-DataLabel
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs2/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs2/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs2/index.html
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs2/index.html
@@ -2,7 +2,7 @@
-
Syncfusion React Chart-DataLabel
+
Syncfusion® React Chart-DataLabel
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs3/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs3/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs3/index.html
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs3/index.html
@@ -2,7 +2,7 @@
-
Syncfusion React Chart-DataLabel
+
Syncfusion® React Chart-DataLabel
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs4/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs4/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs4/index.html
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs4/index.html
@@ -2,7 +2,7 @@
-
Syncfusion React Chart-DataLabel
+
Syncfusion® React Chart-DataLabel
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs5/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs5/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs5/index.html
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs5/index.html
@@ -2,7 +2,7 @@
-
Syncfusion React Chart-DataLabel
+
Syncfusion® React Chart-DataLabel
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5OrganizationalChart-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/es5OrganizationalChart-cs1/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5OrganizationalChart-cs1/index.html
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5OrganizationalChart-cs1/index.html
@@ -2,7 +2,7 @@
-
Syncfusion React Chart-DataLabel
+
Syncfusion® React Chart-DataLabel
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5RadialTreeLayout-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/es5RadialTreeLayout-cs1/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5RadialTreeLayout-cs1/index.html
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5RadialTreeLayout-cs1/index.html
@@ -2,7 +2,7 @@
-
Syncfusion React Chart-DataLabel
+
Syncfusion® React Chart-DataLabel
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5SymmetricLayout-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/es5SymmetricLayout-cs1/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5SymmetricLayout-cs1/index.html
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5SymmetricLayout-cs1/index.html
@@ -2,7 +2,7 @@
-
Syncfusion React Chart-DataLabel
+
Syncfusion® React Chart-DataLabel
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/esNodeTemplate-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/esNodeTemplate-cs1/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/esNodeTemplate-cs1/index.html
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/esNodeTemplate-cs1/index.html
@@ -2,7 +2,7 @@
-
Syncfusion React Chart-DataLabel
+
Syncfusion® React Chart-DataLabel
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/app/index.jsx
new file mode 100644
index 000000000..592859ee1
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/app/index.jsx
@@ -0,0 +1,118 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, FlowchartLayout } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+
+//Initializes data source
+let data = [
+ {
+ "id": "1",
+ "name": "Start",
+ "shape": "Terminator",
+ "color": "#6CA0DC"
+ },
+ {
+ "id": "2",
+ "name": "Input",
+ "parentId": ["1"],
+ "shape": "Parallelogram",
+ "color": "#6CA0DC"
+ },
+ {
+ "id": "3",
+ "name": "Decision?",
+ "parentId": ["2"],
+ "shape": "Decision",
+ "color": "#6CA0DC"
+ },
+ {
+ "id": "4",
+ "label": ["No"],
+ "name": "Process1",
+ "parentId": ["3"],
+ "shape": "Process",
+ "color": "#6CA0DC"
+ },
+ {
+ "id": "5",
+ "label": ["Yes"],
+ "name": "Process2",
+ "parentId": ["3"],
+ "shape": "Process",
+ "color": "#6CA0DC"
+ },
+ {
+ "id": "6",
+ "name": "Output",
+ "parentId": ["5"],
+ "shape": "Parallelogram",
+ "color": "#6CA0DC"
+ },
+ {
+ "id": "7",
+ "name": "Output",
+ "parentId": ["4"],
+ "shape": "Parallelogram",
+ "color": "#6CA0DC"
+ },
+ {
+ "id": "8",
+ "name": "End",
+ "parentId": ["6", "7"],
+ "shape": "Terminator",
+ "color": "#6CA0DC"
+ }
+];
+
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 120; node.height = 50;
+ if (node.shape.shape === 'Decision') {
+ node.height = 80;
+ }
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/app/index.tsx
new file mode 100644
index 000000000..04a3c09c8
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/app/index.tsx
@@ -0,0 +1,118 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding, FlowchartLayout } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+
+//Initializes data source
+let data: object[] = [
+ {
+ "id": "1",
+ "name": "Start",
+ "shape": "Terminator",
+ "color": "#6CA0DC"
+ },
+ {
+ "id": "2",
+ "name": "Input",
+ "parentId": ["1"],
+ "shape": "Parallelogram",
+ "color": "#6CA0DC"
+ },
+ {
+ "id": "3",
+ "name": "Decision?",
+ "parentId": ["2"],
+ "shape": "Decision",
+ "color": "#6CA0DC"
+ },
+ {
+ "id": "4",
+ "label": ["No"],
+ "name": "Process1",
+ "parentId": ["3"],
+ "shape": "Process",
+ "color": "#6CA0DC"
+ },
+ {
+ "id": "5",
+ "label": ["Yes"],
+ "name": "Process2",
+ "parentId": ["3"],
+ "shape": "Process",
+ "color": "#6CA0DC"
+ },
+ {
+ "id": "6",
+ "name": "Output",
+ "parentId": ["5"],
+ "shape": "Parallelogram",
+ "color": "#6CA0DC"
+ },
+ {
+ "id": "7",
+ "name": "Output",
+ "parentId": ["4"],
+ "shape": "Parallelogram",
+ "color": "#6CA0DC"
+ },
+ {
+ "id": "8",
+ "name": "End",
+ "parentId": ["6", "7"],
+ "shape": "Terminator",
+ "color": "#6CA0DC"
+ }
+];
+
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 120; node.height = 50;
+ if ((node.shape as any).shape === 'Decision') {
+ node.height = 80;
+ }
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/group/es5groupchild-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/group/es5groupchild-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/app/index.jsx
new file mode 100644
index 000000000..c73fbd538
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/app/index.jsx
@@ -0,0 +1,73 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, FlowchartLayout } from "@syncfusion/ej2-react-diagrams";
+
+
+ //Initialize nodes for diagram
+ let nodes = [
+ { id: '1', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'Start' }], style: { fill: '#6CA0DC' } },
+ { id: '2', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Input' }], style: { fill: '#6CA0DC' } },
+ { id: '3', shape: { type: 'Flow', shape: 'Decision' }, annotations: [{ content: 'Decision?' }], style: { fill: '#6CA0DC' } },
+ { id: '4', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process1' }], style: { fill: '#6CA0DC' } },
+ { id: '5', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process2' }], style: { fill: '#6CA0DC' } },
+ { id: '6', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Output' }], style: { fill: '#6CA0DC' } },
+ { id: '7', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Output' }], style: { fill: '#6CA0DC' } },
+ { id: '8', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'End' }], style: { fill: '#6CA0DC' } }
+ ];
+
+ //Initialize connectors for diagram
+ let connectors = [
+ { id: 'connector1', sourceID: '1', targetID: '2' },
+ { id: 'connector2', sourceID: '2', targetID: '3' },
+ { id: 'connector3', sourceID: '3', targetID: '4', annotations: [{ content: 'No' }] },
+ { id: 'connector4', sourceID: '3', targetID: '5', annotations: [{ content: 'Yes' }] },
+ { id: 'connector5', sourceID: '5', targetID: '6' },
+ { id: 'connector6', sourceID: '4', targetID: '7' },
+ { id: 'connector7', sourceID: '6', targetID: '8' },
+ { id: 'connector8', sourceID: '7', targetID: '8' }
+ ];
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 120; node.height = 50;
+ if (node.shape.shape === 'Decision') {
+ node.height = 80;
+ }
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/app/index.tsx
new file mode 100644
index 000000000..d9f4db5e7
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/app/index.tsx
@@ -0,0 +1,73 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding, FlowchartLayout } from "@syncfusion/ej2-react-diagrams";
+
+
+ //Initialize nodes for diagram
+ let nodes: NodeModel[] = [
+ { id: '1', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'Start' }], style: { fill: '#6CA0DC' } },
+ { id: '2', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Input' }], style: { fill: '#6CA0DC' } },
+ { id: '3', shape: { type: 'Flow', shape: 'Decision' }, annotations: [{ content: 'Decision?' }], style: { fill: '#6CA0DC' } },
+ { id: '4', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process1' }], style: { fill: '#6CA0DC' } },
+ { id: '5', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process2' }], style: { fill: '#6CA0DC' } },
+ { id: '6', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Output' }], style: { fill: '#6CA0DC' } },
+ { id: '7', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Output' }], style: { fill: '#6CA0DC' } },
+ { id: '8', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'End' }], style: { fill: '#6CA0DC' } }
+ ];
+
+ //Initialize connectors for diagram
+ let connectors: ConnectorModel[] = [
+ { id: 'connector1', sourceID: '1', targetID: '2' },
+ { id: 'connector2', sourceID: '2', targetID: '3' },
+ { id: 'connector3', sourceID: '3', targetID: '4', annotations: [{ content: 'No' }] },
+ { id: 'connector4', sourceID: '3', targetID: '5', annotations: [{ content: 'Yes' }] },
+ { id: 'connector5', sourceID: '5', targetID: '6' },
+ { id: 'connector6', sourceID: '4', targetID: '7' },
+ { id: 'connector7', sourceID: '6', targetID: '8' },
+ { id: 'connector8', sourceID: '7', targetID: '8' }
+ ];
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 120; node.height = 50;
+ if ((node.shape as any).shape === 'Decision') {
+ node.height = 80;
+ }
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/group/es5ungroup-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/group/es5ungroup-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/app/index.jsx
new file mode 100644
index 000000000..3b1aae73d
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/app/index.jsx
@@ -0,0 +1,84 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, FlowchartLayout } from "@syncfusion/ej2-react-diagrams";
+
+
+//Initialize nodes for diagram
+let nodes = [
+ { id: '1', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'Start' }], style: { fill: '#6CA0DC' } },
+ { id: '2', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Input' }], style: { fill: '#6CA0DC' } },
+ { id: '3', shape: { type: 'Flow', shape: 'Decision' }, annotations: [{ content: 'Decision?' }], style: { fill: '#6CA0DC' } },
+ { id: '4', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process1' }], style: { fill: '#6CA0DC' } },
+ { id: '5', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process2' }], style: { fill: '#6CA0DC' } },
+ { id: '6', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Output' }], style: { fill: '#6CA0DC' } },
+ { id: '7', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Output' }], style: { fill: '#6CA0DC' } },
+ { id: '8', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'End' }], style: { fill: '#6CA0DC' } }
+];
+
+//Initialize connectors for diagram
+let connectors = [
+ { id: 'connector1', sourceID: '1', targetID: '2' },
+ { id: 'connector2', sourceID: '2', targetID: '3' },
+ { id: 'connector3', sourceID: '3', targetID: '4', annotations: [{ content: 'No' }] },
+ { id: 'connector4', sourceID: '3', targetID: '5', annotations: [{ content: 'Yes' }] },
+ { id: 'connector5', sourceID: '5', targetID: '6' },
+ { id: 'connector6', sourceID: '4', targetID: '7' },
+ { id: 'connector7', sourceID: '6', targetID: '8' },
+ { id: 'connector8', sourceID: '7', targetID: '8' }
+];
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 120; node.height = 50;
+ if (node.shape.shape === 'Decision') {
+ node.height = 80;
+ }
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/app/index.tsx
new file mode 100644
index 000000000..28d7744a0
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/app/index.tsx
@@ -0,0 +1,84 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding, FlowchartLayout } from "@syncfusion/ej2-react-diagrams";
+
+
+//Initialize nodes for diagram
+let nodes: NodeModel[] = [
+ { id: '1', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'Start' }], style: { fill: '#6CA0DC' } },
+ { id: '2', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Input' }], style: { fill: '#6CA0DC' } },
+ { id: '3', shape: { type: 'Flow', shape: 'Decision' }, annotations: [{ content: 'Decision?' }], style: { fill: '#6CA0DC' } },
+ { id: '4', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process1' }], style: { fill: '#6CA0DC' } },
+ { id: '5', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process2' }], style: { fill: '#6CA0DC' } },
+ { id: '6', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Output' }], style: { fill: '#6CA0DC' } },
+ { id: '7', shape: { type: 'Flow', shape: 'Data' }, annotations: [{ content: 'Output' }], style: { fill: '#6CA0DC' } },
+ { id: '8', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'End' }], style: { fill: '#6CA0DC' } }
+];
+
+//Initialize connectors for diagram
+let connectors: ConnectorModel[] = [
+ { id: 'connector1', sourceID: '1', targetID: '2' },
+ { id: 'connector2', sourceID: '2', targetID: '3' },
+ { id: 'connector3', sourceID: '3', targetID: '4', annotations: [{ content: 'No' }] },
+ { id: 'connector4', sourceID: '3', targetID: '5', annotations: [{ content: 'Yes' }] },
+ { id: 'connector5', sourceID: '5', targetID: '6' },
+ { id: 'connector6', sourceID: '4', targetID: '7' },
+ { id: 'connector7', sourceID: '6', targetID: '8' },
+ { id: 'connector8', sourceID: '7', targetID: '8' }
+];
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 120; node.height = 50;
+ if ((node.shape as any).shape === 'Decision') {
+ node.height = 80;
+ }
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/interaction/es5resizeThumb-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/interaction/es5resizeThumb-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/app/index.jsx
new file mode 100644
index 000000000..b0e074a45
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/app/index.jsx
@@ -0,0 +1,77 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, FlowchartLayout } from "@syncfusion/ej2-react-diagrams";
+
+
+//Initialize nodes for diagram
+let nodes = [
+ { id: '1', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'Start' }], style: { fill: '#6CA0DC' } },
+ { id: '2', shape: { type: 'Flow', shape: 'Decision' }, annotations: [{ content: 'Decision?' }], style: { fill: '#6CA0DC' } },
+ { id: '3', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process1' }], style: { fill: '#6CA0DC' } },
+ { id: '4', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process2' }], style: { fill: '#6CA0DC' } },
+ { id: '5', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'End' }], style: { fill: '#6CA0DC' } }
+ ];
+
+//Initialize connectors for diagram
+let connectors = [
+ { id: 'connector1', sourceID: '1', targetID: '2' },
+ { id: 'connector2', sourceID: '2', targetID: '3', annotations: [{ content: 'Reject' }] },
+ { id: 'connector3', sourceID: '2', targetID: '4', annotations: [{ content: 'Accept' }] },
+ { id: 'connector4', sourceID: '4', targetID: '5', },
+ ];
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 120; node.height = 50;
+ if (node.shape.shape === 'Decision') {
+ node.height = 80;
+ }
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/app/index.tsx
new file mode 100644
index 000000000..3aaa545fb
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/app/index.tsx
@@ -0,0 +1,77 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding, FlowchartLayout } from "@syncfusion/ej2-react-diagrams";
+
+
+//Initialize nodes for diagram
+let nodes: NodeModel[] = [
+ { id: '1', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'Start' }], style: { fill: '#6CA0DC' } },
+ { id: '2', shape: { type: 'Flow', shape: 'Decision' }, annotations: [{ content: 'Decision?' }], style: { fill: '#6CA0DC' } },
+ { id: '3', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process1' }], style: { fill: '#6CA0DC' } },
+ { id: '4', shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process2' }], style: { fill: '#6CA0DC' } },
+ { id: '5', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'End' }], style: { fill: '#6CA0DC' } }
+];
+
+//Initialize connectors for diagram
+let connectors: ConnectorModel[] = [
+ { id: 'connector1', sourceID: '1', targetID: '2' },
+ { id: 'connector2', sourceID: '2', targetID: '3', annotations: [{ content: 'Reject' }] },
+ { id: 'connector3', sourceID: '2', targetID: '4', annotations: [{ content: 'Accept' }] },
+ { id: 'connector4', sourceID: '4', targetID: '5', },
+];
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 120; node.height = 50;
+ if ((node.shape as any).shape === 'Decision') {
+ node.height = 80;
+ }
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/es5Appear-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/nodes/es5Appear-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/app/index.jsx
new file mode 100644
index 000000000..4caf9963c
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/app/index.jsx
@@ -0,0 +1,104 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
+
+//Initialize nodes for diagram
+let nodes = [
+ {
+ id: 'Steve-Ceo',
+ },
+ {
+ id: 'Kevin-Manager',
+ },
+ {
+ id: 'Peter-Manager',
+ },
+ {
+ id: 'John-Manager',
+ },
+ {
+ id: 'Mary-CSE',
+ },
+ {
+ id: 'Jim-CSE',
+ },
+ {
+ id: 'Martin-CSE',
+ },
+];
+
+//Initialize connectors for diagram
+let connectors = [
+ {
+ id: 'Steve-Ceo_Kevin-Manager',
+ sourceID: 'Steve-Ceo',
+ targetID: 'Kevin-Manager',
+ },
+ {
+ id: 'Steve-Ceo_Peter-Manager',
+ sourceID: 'Steve-Ceo',
+ targetID: 'Peter-Manager',
+ },
+ {
+ id: 'Peter-Manager_John-Manager',
+ sourceID: 'Peter-Manager',
+ targetID: 'John-Manager',
+ },
+ {
+ id: 'Peter-Manager_Mary-CSE',
+ sourceID: 'Peter-Manager',
+ targetID: 'Mary-CSE',
+ },
+ {
+ id: 'Kevin-Manager_Jim-CSE',
+ sourceID: 'Kevin-Manager',
+ targetID: 'Jim-CSE',
+ },
+ {
+ id: 'Kevin-Manager_Martin-CSE',
+ sourceID: 'Kevin-Manager',
+ targetID: 'Martin-CSE',
+ },
+];
+
+export default function App() {
+
+ return (
+
+ {
+ node.annotations = [{ content: node.id }];
+ node.width = 100; node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/app/index.tsx
new file mode 100644
index 000000000..40ac26b54
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/app/index.tsx
@@ -0,0 +1,106 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, ConnectorModel, DataBinding,
+ NodeModel, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
+
+//Initialize nodes for diagram
+let nodes: NodeModel[] = [
+ {
+ id: 'Steve-Ceo',
+ },
+ {
+ id: 'Kevin-Manager',
+ },
+ {
+ id: 'Peter-Manager',
+ },
+ {
+ id: 'John-Manager',
+ },
+ {
+ id: 'Mary-CSE',
+ },
+ {
+ id: 'Jim-CSE',
+ },
+ {
+ id: 'Martin-CSE',
+ },
+];
+
+//Initialize connectors for diagram
+let connectors: ConnectorModel[] = [
+ {
+ id: 'Steve-Ceo_Kevin-Manager',
+ sourceID: 'Steve-Ceo',
+ targetID: 'Kevin-Manager',
+ },
+ {
+ id: 'Steve-Ceo_Peter-Manager',
+ sourceID: 'Steve-Ceo',
+ targetID: 'Peter-Manager',
+ },
+ {
+ id: 'Peter-Manager_John-Manager',
+ sourceID: 'Peter-Manager',
+ targetID: 'John-Manager',
+ },
+ {
+ id: 'Peter-Manager_Mary-CSE',
+ sourceID: 'Peter-Manager',
+ targetID: 'Mary-CSE',
+ },
+ {
+ id: 'Kevin-Manager_Jim-CSE',
+ sourceID: 'Kevin-Manager',
+ targetID: 'Jim-CSE',
+ },
+ {
+ id: 'Kevin-Manager_Martin-CSE',
+ sourceID: 'Kevin-Manager',
+ targetID: 'Martin-CSE',
+ },
+];
+
+export default function App() {
+
+ return (
+
+ {
+ node.annotations = [{ content: node.id }];
+ node.width = 100; node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/es5Gradient-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/nodes/es5Gradient-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/app/index.jsx
new file mode 100644
index 000000000..e16009c39
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/app/index.jsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+//Initializes data source
+let data = [
+ { Name: "Steve-Ceo" },
+ { Name: "Kevin-Manager", ReportingPerson: "Steve-Ceo" },
+ { Name: "Peter-Manager", ReportingPerson: "Steve-Ceo" },
+ { Name: "John- Manager", ReportingPerson: "Peter-Manager" },
+ { Name: "Mary-CSE ", ReportingPerson: "Peter-Manager" },
+ { Name: "Jim-CSE ", ReportingPerson: "Kevin-Manager" },
+ { Name: "Martin-CSE", ReportingPerson: "Kevin-Manager" }
+];
+
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.annotations = [{ content: node.data.Name }];
+ node.width = 100; node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/app/index.tsx
new file mode 100644
index 000000000..2ccc38d4a
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/app/index.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, ConnectorModel, DataBinding, NodeModel, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+//Initializes data source
+let data: object[] = [
+ { Name: "Steve-Ceo" },
+ { Name: "Kevin-Manager", ReportingPerson: "Steve-Ceo" },
+ { Name: "Peter-Manager", ReportingPerson: "Steve-Ceo" },
+ { Name: "John- Manager", ReportingPerson: "Peter-Manager" },
+ { Name: "Mary-CSE ", ReportingPerson: "Peter-Manager" },
+ { Name: "Jim-CSE ", ReportingPerson: "Kevin-Manager" },
+ { Name: "Martin-CSE", ReportingPerson: "Kevin-Manager" }
+];
+
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.annotations = [{ content: (node.data as { Name: 'string' }).Name }];
+ node.width = 100; node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/es5Gradient-cs2/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/nodes/es5Gradient-cs2/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/app/index.jsx
new file mode 100644
index 000000000..d8c74b0f3
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/app/index.jsx
@@ -0,0 +1,101 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data = [
+ { Name: 'Steve-Ceo' },
+ { Name: 'Kevin-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Peter-Manager', ReportingPerson: 'Kevin-Manager' },
+ { Name: 'John- Manager', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Mary-CSE ', ReportingPerson: 'Peter-Manager' },
+];
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+ let diagramInstance;
+ let horizontalInstance;
+ let verticalInstance;
+
+ // Function to handle Horizontal Alignment
+ function horizontalAlign() {
+ diagramInstance.layout.horizontalAlignment = horizontalInstance.value;
+ diagramInstance.dataBind();
+ }
+
+ // Function to handle Vertical Alignment
+ function verticalAlign() {
+ diagramInstance.layout.verticalAlignment = verticalInstance.value;
+ diagramInstance.dataBind();
+ }
+
+ return (
+
+ Horizontal :
+ (horizontalInstance = horizontal)}
+ >
+ Left
+ Center
+ Right
+
+ Vertical :
+
+ (verticalInstance = vertical)}
+ >
+ Top
+ Center
+ Bottom
+
+
+ (diagramInstance = diagram)}
+
+ //Uses layout to auto-arrange nodes on the diagram page
+ layout={{
+ //Sets layout type
+ type: 'HierarchicalTree',
+ //set layout alignment
+ horizontalAlignment: 'Left',
+ verticalAlignment: 'Top',
+ }}
+
+ //Configures data source for diagram
+ dataSourceSettings={{
+ id: 'Name',
+ parentId: 'ReportingPerson',
+ dataManager: items,
+ }}
+
+ //Sets the default properties for nodes
+ getNodeDefaults={(node) => {
+ node.annotations = [{ content: node.data.Name }];
+ node.width = 100;
+ node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/app/index.tsx
new file mode 100644
index 000000000..73a61d123
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/app/index.tsx
@@ -0,0 +1,102 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding, ConnectorModel,
+ NodeModel, HorizontalAlignment, VerticalAlignment } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data: object[] = [
+ { Name: 'Steve-Ceo' },
+ { Name: 'Kevin-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Peter-Manager', ReportingPerson: 'Kevin-Manager' },
+ { Name: 'John- Manager', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Mary-CSE ', ReportingPerson: 'Peter-Manager' },
+];
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+ let diagramInstance: DiagramComponent;
+ let horizontalInstance: HTMLSelectElement;
+ let verticalInstance: HTMLSelectElement;
+
+ // Function to handle Horizontal Alignment
+ function horizontalAlign() {
+ diagramInstance.layout.horizontalAlignment = horizontalInstance.value as HorizontalAlignment;
+ diagramInstance.dataBind();
+ }
+
+ // Function to handle Vertical Alignment
+ function verticalAlign() {
+ diagramInstance.layout.verticalAlignment = verticalInstance.value as VerticalAlignment;
+ diagramInstance.dataBind();
+ }
+
+ return (
+
+ Horizontal :
+ (horizontalInstance = horizontal)}
+ >
+ Left
+ Center
+ Right
+
+ Vertical :
+
+ (verticalInstance = vertical)}
+ >
+ Top
+ Center
+ Bottom
+
+
+ (diagramInstance = diagram)}
+
+ //Uses layout to auto-arrange nodes on the diagram page
+ layout={{
+ //Sets layout type
+ type: 'HierarchicalTree',
+ //set layout alignment
+ horizontalAlignment: 'Left',
+ verticalAlignment: 'Top',
+ }}
+
+ //Configures data source for diagram
+ dataSourceSettings={{
+ id: 'Name',
+ parentId: 'ReportingPerson',
+ dataManager: items,
+ }}
+
+ //Sets the default properties for nodes
+ getNodeDefaults={(node: NodeModel): NodeModel => {
+ node.annotations = [{ content: (node.data as { Name: 'string' }).Name }];
+ node.width = 100;
+ node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel): ConnectorModel => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/es5Node-cs7/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/nodes/es5Node-cs7/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/app/index.jsx
new file mode 100644
index 000000000..6aeacfce5
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/app/index.jsx
@@ -0,0 +1,72 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding, LayoutAnimation } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data = [
+ { Name: 'Steve-Ceo' },
+ { Name: 'Kevin-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Robert-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Peter-Manager', ReportingPerson: 'Kevin-Manager' },
+ { Name: 'Hary-Manager', ReportingPerson: 'Robert-Manager' },
+ { Name: 'John- Manager', ReportingPerson: 'Hary-Manager' },
+ { Name: 'Mary-CSE ', ReportingPerson: 'Hary-Manager' },
+ { Name: 'John- Manager', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Mary-CSE ', ReportingPerson: 'Peter-Manager' }
+];
+
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 100;
+ node.height = 40;
+ node.annotations = [{ content: node.data.Name }];
+ node.expandIcon = { shape: "Minus" };
+ node.collapseIcon = { shape: "Plus" };
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/app/index.tsx
new file mode 100644
index 000000000..b18cb0afa
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/app/index.tsx
@@ -0,0 +1,73 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding,
+ ConnectorModel, NodeModel, LayoutAnimation } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data: object[] = [
+ { Name: 'Steve-Ceo' },
+ { Name: 'Kevin-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Robert-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Peter-Manager', ReportingPerson: 'Kevin-Manager' },
+ { Name: 'Hary-Manager', ReportingPerson: 'Robert-Manager' },
+ { Name: 'John- Manager', ReportingPerson: 'Hary-Manager' },
+ { Name: 'Mary-CSE ', ReportingPerson: 'Hary-Manager' },
+ { Name: 'John- Manager', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Mary-CSE ', ReportingPerson: 'Peter-Manager' }
+];
+
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 100;
+ node.height = 40;
+ node.annotations = [{ content: (node.data as { Name: 'string' }).Name }];
+ node.expandIcon = { shape: "Minus" };
+ node.collapseIcon = { shape: "Plus" };
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel): ConnectorModel => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/es5Node-cs8/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/nodes/es5Node-cs8/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/app/index.jsx
new file mode 100644
index 000000000..6f8ceb74b
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/app/index.jsx
@@ -0,0 +1,76 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding, Rect, } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+//Initializes data source
+let data = [
+ {
+ Name: "Steve-Ceo",
+ },
+ {
+ Name: "Kevin-Manager",
+ ReportingPerson: "Steve-Ceo",
+ },
+ {
+ Name: "Peter-Manager",
+ ReportingPerson: "Kevin-Manager",
+ },
+ {
+ Name: "John- Manager",
+ ReportingPerson: "Peter-Manager",
+ },
+ {
+ Name: "Mary-CSE ",
+ ReportingPerson: "Peter-Manager",
+ },
+];
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+ return (
+
{
+ node.annotations = [{ content: node.data.Name }];
+ node.width = 100; node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = "Orthogonal";
+ return connector;
+ }}>
+
+ {/* Inject necessary services for the diagram */}
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/app/index.tsx
new file mode 100644
index 000000000..319dcb024
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/app/index.tsx
@@ -0,0 +1,77 @@
+{% raw %}
+
+import * as React from "react";
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding, Rect,
+ NodeModel, ConnectorModel, } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+//Initialize data source
+let data: object[] = [
+ {
+ Name: "Steve-Ceo",
+ },
+ {
+ Name: "Kevin-Manager",
+ ReportingPerson: "Steve-Ceo",
+ },
+ {
+ Name: "Peter-Manager",
+ ReportingPerson: "Kevin-Manager",
+ },
+ {
+ Name: "John- Manager",
+ ReportingPerson: "Peter-Manager",
+ },
+ {
+ Name: "Mary-CSE ",
+ ReportingPerson: "Peter-Manager",
+ },
+];
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+
+ return (
+
{
+ node.annotations = [{ content: (node.data as { Name: 'string' }).Name }];
+ node.width = 100; node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel): ConnectorModel => {
+ connector.type = "Orthogonal";
+ return connector;
+ }}>
+
+ {/* Inject necessary services for the diagram */}
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/es5position-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/nodes/es5position-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/app/index.jsx
new file mode 100644
index 000000000..92889f91b
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/app/index.jsx
@@ -0,0 +1,73 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data = [
+ { Name: 'Steve-Ceo' },
+ { Name: 'Kevin-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Robert', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Peter-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'John- Manager', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Mary-CSE ', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Jim-CSE ', ReportingPerson: 'Kevin-Manager' },
+ { Name: 'Martin-CSE', ReportingPerson: 'Kevin-Manager' }
+];
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.annotations = [{ content: node.data.Name }];
+ node.width = 100;
+ node.height = 40;
+ if ((node.data).Name === 'Robert') {
+ //Excludes node from layout
+ node.excludeFromLayout = true;
+ node.offsetX = 350;
+ node.offsetY = 75;
+ }
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/app/index.tsx
new file mode 100644
index 000000000..b43dba5c2
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/app/index.tsx
@@ -0,0 +1,74 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding,
+ ConnectorModel, NodeModel } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data: object[] = [
+ { Name: 'Steve-Ceo' },
+ { Name: 'Kevin-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Robert', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Peter-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'John- Manager', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Mary-CSE ', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Jim-CSE ', ReportingPerson: 'Kevin-Manager' },
+ { Name: 'Martin-CSE', ReportingPerson: 'Kevin-Manager' }
+];
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.annotations = [{ content: (node.data as { Name: 'string' }).Name }];
+ node.width = 100;
+ node.height = 40;
+ if ((node.data as any).Name === 'Robert') {
+ //Excludes node from layout
+ node.excludeFromLayout = true;
+ node.offsetX = 350;
+ node.offsetY = 75;
+ }
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel): ConnectorModel => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/es5position-cs2/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/nodes/es5position-cs2/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/app/index.jsx
new file mode 100644
index 000000000..8dcdebc30
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/app/index.jsx
@@ -0,0 +1,121 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding, SelectorConstraints } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data = [
+ {
+ 'Id': 'parent1',
+ 'Name': 'Maria ',
+ 'Designation': 'Managing Director',
+ 'RatingColor': '#C34444'
+ },
+ {
+ 'Id': 'parent',
+ 'Name': ' sam',
+ 'Designation': 'Managing Director',
+ 'ReportingPerson': 'parent1',
+ 'RatingColor': '#C34444'
+ },
+ {
+ 'Id': 'parent3',
+ 'Name': ' sam geo',
+ 'Designation': 'Managing Director',
+ 'ReportingPerson': 'parent1',
+ 'RatingColor': '#C34444'
+ },
+ {
+ 'Id': '80',
+ 'Name': ' david',
+ 'Designation': 'Managing Director',
+ 'ReportingPerson': 'parent3',
+ 'RatingColor': '#C34444'
+ },
+ {
+ 'Id': '82',
+ 'Name': ' pirlo',
+ 'Designation': 'Managing Director',
+ 'ReportingPerson': 'parent',
+ 'RatingColor': '#C34444'
+ }
+];
+
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+ let diagramInstance;
+
+ return (
+
+ {
+ if (!tree.hasSubTree) {
+ tree.orientation = 'vertical';
+ tree.type = 'alternate';
+ }
+ }
+ }}
+
+ //Configures data source for diagram
+ dataSourceSettings={{
+ id: 'Id',
+ parentId: 'ReportingPerson',
+ dataManager: items,
+ }}
+
+ //Sets the default properties for nodes
+ getNodeDefaults={(node) => {
+ node.width = 50; node.height = 50;
+ node.expandIcon = {
+ height: 15,
+ width: 15,
+ shape: "Plus",
+ fill: 'lightgray',
+ offset: { x: .5, y: .85 }
+ }
+ node.collapseIcon = {
+ height: 15,
+ width: 15,
+ shape: "Minus",
+ offset: { x: .5, y: .85 },
+ }
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ connector.targetDecorator.shape = 'None';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/app/index.tsx
new file mode 100644
index 000000000..88fca6c7d
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/app/index.tsx
@@ -0,0 +1,121 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding, ConnectorModel,
+ NodeModel, SelectorConstraints, DecoratorModel, TreeInfo } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data: object[] = [
+ {
+ 'Id': 'parent1',
+ 'Name': 'Maria ',
+ 'Designation': 'Managing Director',
+ 'RatingColor': '#C34444'
+ },
+ {
+ 'Id': 'parent',
+ 'Name': ' sam',
+ 'Designation': 'Managing Director',
+ 'ReportingPerson': 'parent1',
+ 'RatingColor': '#C34444'
+ },
+ {
+ 'Id': 'parent3',
+ 'Name': ' sam geo',
+ 'Designation': 'Managing Director',
+ 'ReportingPerson': 'parent1',
+ 'RatingColor': '#C34444'
+ },
+ {
+ 'Id': '80',
+ 'Name': ' david',
+ 'Designation': 'Managing Director',
+ 'ReportingPerson': 'parent3',
+ 'RatingColor': '#C34444'
+ },
+ {
+ 'Id': '82',
+ 'Name': ' pirlo',
+ 'Designation': 'Managing Director',
+ 'ReportingPerson': 'parent',
+ 'RatingColor': '#C34444'
+ }
+];
+
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ if (!tree.hasSubTree) {
+ tree.orientation = 'vertical';
+ tree.type = 'alternate';
+ }
+ }
+ }}
+
+ //Configures data source for diagram
+ dataSourceSettings={{
+ id: 'Id',
+ parentId: 'ReportingPerson',
+ dataManager: items,
+ }}
+
+ //Sets the default properties for nodes
+ getNodeDefaults={(node: NodeModel): NodeModel => {
+ node.width = 50; node.height = 50;
+ node.expandIcon = {
+ height: 15,
+ width: 15,
+ shape: "Plus",
+ fill: 'lightgray',
+ offset: { x: .5, y: .85 }
+ }
+ node.collapseIcon = {
+ height: 15,
+ width: 15,
+ shape: "Minus",
+ offset: { x: .5, y: .85 },
+ }
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel): ConnectorModel => {
+ connector.type = 'Orthogonal';
+ (connector.targetDecorator as DecoratorModel).shape = 'None';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/es5run-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/nodes/es5run-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/app/index.jsx
new file mode 100644
index 000000000..483e39eb2
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/app/index.jsx
@@ -0,0 +1,68 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, FlowchartLayout, DataBinding } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data = [
+ { Name: "Steve-Ceo" },
+ { Name: "Kevin-Manager", ReportingPerson: "Steve-Ceo" },
+ { Name: "Peter-Manager", ReportingPerson: "Steve-Ceo" },
+ { Name: "John-Manager", ReportingPerson: "Peter-Manager" },
+ { Name: "Mary-CSE", ReportingPerson: "Peter-Manager" },
+ { Name: "Jim-CSE", ReportingPerson: "Kevin-Manager" },
+ { Name: "Martin-CSE ", ReportingPerson: "Kevin-Manager" },
+];
+
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+ return (
+
+ {
+ node.width = 100;
+ node.height = 40;
+ node.annotations = [{ content: node.data.Name }];
+
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/app/index.tsx
new file mode 100644
index 000000000..b5fd02d94
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/app/index.tsx
@@ -0,0 +1,69 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, FlowchartLayout, DataBinding, ConnectorModel, NodeModel } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data: object[] = [
+ { Name: "Steve-Ceo" },
+ { Name: "Kevin-Manager", ReportingPerson: "Steve-Ceo" },
+ { Name: "Peter-Manager", ReportingPerson: "Steve-Ceo" },
+ { Name: "John-Manager", ReportingPerson: "Peter-Manager" },
+ { Name: "Mary-CSE", ReportingPerson: "Peter-Manager" },
+ { Name: "Jim-CSE", ReportingPerson: "Kevin-Manager" },
+ { Name: "Martin-CSE ", ReportingPerson: "Kevin-Manager" },
+];
+
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.width = 100;
+ node.height = 40;
+ node.annotations = [{ content: (node.data as { Name: 'string' }).Name }];
+
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel): ConnectorModel => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/es5shadow-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/nodes/es5shadow-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/app/index.jsx
new file mode 100644
index 000000000..d5403e021
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/app/index.jsx
@@ -0,0 +1,69 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data = [
+ { Name: 'Steve-Ceo' },
+ { Name: 'Kevin-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Peter-Manager', ReportingPerson: 'Kevin-Manager' },
+ { Name: 'John- Manager', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Mary-CSE ', ReportingPerson: 'Peter-Manager' },
+];
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.annotations = [{ content: node.data.Name }];
+ node.width = 100;
+ node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/app/index.tsx
new file mode 100644
index 000000000..06365bdaa
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/app/index.tsx
@@ -0,0 +1,70 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding,
+ ConnectorModel, NodeModel } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data: object[] = [
+ { Name: 'Steve-Ceo' },
+ { Name: 'Kevin-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Peter-Manager', ReportingPerson: 'Kevin-Manager' },
+ { Name: 'John- Manager', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Mary-CSE ', ReportingPerson: 'Peter-Manager' },
+];
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.annotations = [{ content: (node.data as { Name: 'string' }).Name }];
+ node.width = 100;
+ node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel): ConnectorModel => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/es5shadow2-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/nodes/es5shadow2-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/app/index.jsx
new file mode 100644
index 000000000..bf6fe8dc7
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/app/index.jsx
@@ -0,0 +1,66 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data = [
+ { Name: 'Steve-Ceo' },
+ { Name: 'Kevin-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Peter-Manager', ReportingPerson: 'Kevin-Manager' },
+ { Name: 'John- Manager', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Mary-CSE ', ReportingPerson: 'Peter-Manager' },
+];
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.annotations = [{ content: node.data.Name }];
+ node.width = 100;
+ node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/app/index.tsx
new file mode 100644
index 000000000..c3ae30f8d
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/app/index.tsx
@@ -0,0 +1,67 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding,
+ ConnectorModel, NodeModel } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data: object[] = [
+ { Name: 'Steve-Ceo' },
+ { Name: 'Kevin-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Peter-Manager', ReportingPerson: 'Kevin-Manager' },
+ { Name: 'John- Manager', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Mary-CSE ', ReportingPerson: 'Peter-Manager' },
+];
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ node.annotations = [{ content: (node.data as { Name: 'string' }).Name }];
+ node.width = 100;
+ node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel): ConnectorModel => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/symbol-palette/es5defaultsettings-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/symbol-palette/es5defaultsettings-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/app/index.jsx
new file mode 100644
index 000000000..9a4e300c4
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/app/index.jsx
@@ -0,0 +1,125 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding, NodeConstraints,
+ randomId, SymbolPaletteComponent } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data = [
+ { Name: 'Steve-Ceo' },
+ { Name: 'Kevin-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Peter-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'John-Manager', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Mary-CSE ', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Jim-CSE ', ReportingPerson: 'Kevin-Manager' },
+ { Name: 'Martin-CSE', ReportingPerson: 'Kevin-Manager' }
+];
+
+let items = new DataManager(data, new Query().take(7));
+
+//Initialize shapes for symbol palette
+let palettes = [
+ {
+ title: 'Basic shapes',
+ id: 'basicShapes',
+ symbols: [
+ {
+ id: 'Node',
+ width: 100,
+ height: 50,
+ data: { Name: 'New Node' },
+ },
+ ],
+ },
+];
+
+export default function App() {
+ let diagramInstance;
+
+ // Handle drop event that create a connection between the source and target item
+ function drop(args) {
+ setTimeout(() => {
+ //Argument element is used to get the dropped node.
+ let node = args.element;
+ let bottomNode = args.target;
+ //Gets the connector that connected to dropped node
+ let edges = diagramInstance.getEdges(node);
+ if (edges && edges.length > 0) {
+ let connector = diagramInstance.getObject(edges[0]);
+ //Argument target is used to get the hovered node
+ connector.sourceID = args.target.id;
+ diagramInstance.dataBind();
+ } else {
+ let newCon = {
+ id: 'newcon' + randomId(),
+ sourceID: args.target.id,
+ targetID: args.element.id,
+ };
+ if (newCon.sourceID === undefined || newCon.sourceID === 'container') {
+ newCon.sourceID = diagramInstance.nodes[0].id;
+ }
+ diagramInstance.dataBind();
+ diagramInstance.add(newCon);
+ }
+ diagramInstance.doLayout();
+ }, 100);
+ }
+
+ return (
+
+
+
+
+
(diagramInstance = diagram)}
+ // Event Triggers when a symbol is dragged and dropped from symbol palette
+ drop={drop}
+ //Uses layout to auto-arrange nodes on the diagram page
+ layout={{
+ //Sets layout type
+ type: 'HierarchicalTree',
+ }}
+
+ //Configures data source for diagram
+ dataSourceSettings={{
+ id: 'Name',
+ parentId: 'ReportingPerson',
+ dataManager: items,
+ }}
+
+ //Sets the default properties for nodes
+ getNodeDefaults={(node) => {
+ node.width = 100;
+ node.height = 40;
+ node.constraints = NodeConstraints.Default | NodeConstraints.AllowDrop;
+
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/app/index.tsx
new file mode 100644
index 000000000..388a5c6bb
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/app/index.tsx
@@ -0,0 +1,125 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding, ConnectorModel, NodeModel,
+ PaletteModel, NodeConstraints, IDropEventArgs, randomId, SymbolPaletteComponent } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data: object[] = [
+ { Name: 'Steve-Ceo' },
+ { Name: 'Kevin-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Peter-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'John-Manager', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Mary-CSE ', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Jim-CSE ', ReportingPerson: 'Kevin-Manager' },
+ { Name: 'Martin-CSE', ReportingPerson: 'Kevin-Manager' }
+];
+
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+//Initialize shapes for symbol palette
+let palettes: PaletteModel[] = [
+ {
+ title: 'Basic shapes',
+ id: 'basicShapes',
+ symbols: [
+ {
+ id: 'Node',
+ width: 100,
+ height: 50,
+ data: { Name: 'New Node' },
+ },
+ ],
+ },
+];
+
+export default function App() {
+ let diagramInstance: DiagramComponent;
+
+ // Handle drop event that create a connection between the source and target item
+ function drop(args: IDropEventArgs) {
+ setTimeout(() => {
+ //Argument element is used to get the dropped node.
+ let node: NodeModel = args.element as NodeModel;
+ let bottomNode: NodeModel = args.target as NodeModel;
+ //Gets the connector that connected to dropped node
+ let edges: string[] = diagramInstance.getEdges(node);
+ if (edges && edges.length > 0) {
+ let connector: ConnectorModel = diagramInstance.getObject(edges[0]);
+ //Argument target is used to get the hovered node
+ connector.sourceID = (args.target as NodeModel).id;
+ diagramInstance.dataBind();
+ } else {
+ let newCon: ConnectorModel = {
+ id: 'newcon' + randomId(),
+ sourceID: (args.target as NodeModel).id,
+ targetID: (args.element as NodeModel).id,
+ };
+ if (newCon.sourceID === undefined || newCon.sourceID === 'container') {
+ newCon.sourceID = diagramInstance.nodes[0].id;
+ }
+ diagramInstance.dataBind();
+ diagramInstance.add(newCon);
+ }
+ diagramInstance.doLayout();
+ }, 100);
+ }
+
+ return (
+
+
+
+
+
(diagramInstance = diagram)}
+ // Event Triggers when a symbol is dragged and dropped from symbol palette
+ drop={drop}
+ //Uses layout to auto-arrange nodes on the diagram page
+ layout={{
+ //Sets layout type
+ type: 'HierarchicalTree',
+ }}
+
+ //Configures data source for diagram
+ dataSourceSettings={{
+ id: 'Name',
+ parentId: 'ReportingPerson',
+ dataManager: items,
+ }}
+
+ //Sets the default properties for nodes
+ getNodeDefaults={(node: NodeModel): NodeModel => {
+ node.width = 100;
+ node.height = 40;
+ node.constraints = NodeConstraints.Default | NodeConstraints.AllowDrop;
+
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel): ConnectorModel => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/symbol-palette/es5description-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/symbol-palette/es5description-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/app/index.jsx
new file mode 100644
index 000000000..bbee17461
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/app/index.jsx
@@ -0,0 +1,106 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding, ImageElement,
+ StackPanel, TextElement } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data = [
+ { Name: "Steve-Ceo" },
+ { Name: "Kevin-Manager", ReportingPerson: "Steve-Ceo", color: 'darkcyan' },
+ { Name: "Peter-Manager", ReportingPerson: "Steve-Ceo", color: 'white' },
+ { Name: "John-Manager", ReportingPerson: "Peter-Manager", color: 'darkcyan' },
+ { Name: "Mary-CSE", ReportingPerson: "Peter-Manager", color: 'white' },
+ { Name: "Jim-CSE", ReportingPerson: "Kevin-Manager", color: 'darkcyan' },
+ { Name: "Martin-CSE ", ReportingPerson: "Kevin-Manager", color: 'white' },
+];
+
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+
+ //Function to add the Template of the Node.
+ function setNodeTemplate(node) {
+
+ // Create an outer StackPanel as container to contain image and text elements
+ let container = new StackPanel();
+ container.width = 200;
+ container.height = 60;
+ container.style.fill = 'skyblue';
+ container.horizontalAlignment = 'Left';
+ container.orientation = 'Horizontal';
+ container.id = node.data.Name + '_StackContainter';
+
+ // Create an inner image element to displaying image
+ let innerContent = new ImageElement();
+ innerContent.id = node.data.Name + '_innerContent';
+ innerContent.width = 40;
+ innerContent.height = 40;
+ innerContent.margin.left = 20;
+ innerContent.style.fill = 'lightgrey';
+
+ // Create a inner text element for displaying employee details
+ let text = new TextElement();
+ text.content = 'Name: ' + node.data.Name;
+ text.margin = { left: 10, top: 5 };
+ text.id = node.data.Name + '_textContent';
+ text.style.fill = 'green';
+ text.style.color = 'white';
+ if (node.data.Name === 'Steve-Ceo') {
+ text.style.fill = 'black';
+ text.style.color = 'white';
+ }
+
+ // Add inner image and text element to the outer StackPanel
+ container.children = [innerContent, text];
+ return container;
+ }
+
+ return (
+
+ {
+ node.width = 200;
+ node.height = 60;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ connector.targetDecorator.shape = 'None';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/app/index.tsx
new file mode 100644
index 000000000..1096a9764
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/app/index.tsx
@@ -0,0 +1,106 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding, ConnectorModel, Container,
+ NodeModel, DecoratorModel, ImageElement, StackPanel, TextElement } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data: object[] = [
+ { Name: "Steve-Ceo" },
+ { Name: "Kevin-Manager", ReportingPerson: "Steve-Ceo", color: 'darkcyan' },
+ { Name: "Peter-Manager", ReportingPerson: "Steve-Ceo", color: 'white' },
+ { Name: "John-Manager", ReportingPerson: "Peter-Manager", color: 'darkcyan' },
+ { Name: "Mary-CSE", ReportingPerson: "Peter-Manager", color: 'white' },
+ { Name: "Jim-CSE", ReportingPerson: "Kevin-Manager", color: 'darkcyan' },
+ { Name: "Martin-CSE ", ReportingPerson: "Kevin-Manager", color: 'white' },
+];
+
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+
+ //Function to add the Template of the Node.
+ function setNodeTemplate(node: NodeModel): Container {
+
+ // Create an outer StackPanel as container to contain image and text elements
+ let container = new StackPanel();
+ container.width = 200;
+ container.height = 60;
+ container.style.fill = 'skyblue';
+ container.horizontalAlignment = 'Left';
+ container.orientation = 'Horizontal';
+ container.id = (node.data as any).Name + '_StackContainter';
+
+ // Create an inner image element to displaying image
+ let innerContent = new ImageElement();
+ innerContent.id = (node.data as any).Name + '_innerContent';
+ innerContent.width = 40;
+ innerContent.height = 40;
+ innerContent.margin.left = 20;
+ innerContent.style.fill = 'lightgrey';
+
+ // Create a inner text element for displaying employee details
+ let text = new TextElement();
+ text.content = 'Name: ' + (node.data as any).Name;
+ text.margin = { left: 10, top: 5 };
+ text.id = (node.data as any).Name + '_textContent';
+ text.style.fill = 'green';
+ text.style.color = 'white';
+ if ((node.data as any).Name === 'Steve-Ceo') {
+ text.style.fill = 'black';
+ text.style.color = 'white';
+ }
+
+ // Add inner image and text element to the outer StackPanel
+ container.children = [innerContent, text];
+ return container;
+ }
+
+ return (
+
+ {
+ node.width = 200;
+ node.height = 60;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel): ConnectorModel => {
+ connector.type = 'Orthogonal';
+ (connector.targetDecorator as DecoratorModel).shape = 'None';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/index.html
new file mode 100644
index 000000000..92a551fd7
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/index.html
@@ -0,0 +1,40 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/symbol-palette/es5description-cs2/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/symbol-palette/es5description-cs2/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/app/index.jsx
new file mode 100644
index 000000000..fc6fcfb83
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/app/index.jsx
@@ -0,0 +1,105 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+
+//Initializes data source
+let data = [
+ { Name: 'Steve-Ceo' },
+ { Name: 'Kevin-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Peter-Manager', ReportingPerson: 'Kevin-Manager' },
+ { Name: 'John- Manager', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Mary-CSE ', ReportingPerson: 'Peter-Manager' },
+];
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+ let diagramInstance;
+ let horizontalInstance;
+ let verticalInstance;
+
+ // Function to handle Horizontal Spacing
+ function horizontalSpacing() {
+ let value = Number(horizontalInstance.value);
+ if (value < 20) {
+ value = 20;
+ }
+ if (value > 100) {
+ value = 100;
+ }
+ diagramInstance.layout.horizontalSpacing = value;
+ diagramInstance.dataBind();
+ }
+
+ // Function to handle Vertical Spacing
+ function verticalSpacing() {
+ let value = Number(verticalInstance.value);
+ if (value < 20) {
+ value = 20;
+ }
+ if (value > 100) {
+ value = 100;
+ }
+ diagramInstance.layout.verticalSpacing = value;
+ diagramInstance.dataBind();
+ }
+
+ return (
+
+ Horizontal :
+ Vertical :
+ (diagramInstance = diagram)}
+
+ //Uses layout to auto-arrange nodes on the diagram page
+ layout={{
+ //Sets layout type
+ type: 'HierarchicalTree',
+ //set layout spacing
+ horizontalSpacing: 30,
+ verticalSpacing: 30,
+ }}
+
+ //Configures data source for diagram
+ dataSourceSettings={{
+ id: 'Name',
+ parentId: 'ReportingPerson',
+ dataManager: items,
+ }}
+
+ //Sets the default properties for nodes
+ getNodeDefaults={(node) => {
+ node.annotations = [{ content: node.data.Name }];
+ node.width = 100;
+ node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/app/index.tsx
new file mode 100644
index 000000000..fb7c66675
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/app/index.tsx
@@ -0,0 +1,104 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, DataBinding, ConnectorModel, NodeModel } from '@syncfusion/ej2-react-diagrams';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+
+//Initializes data source
+let data: object[] = [
+ { Name: 'Steve-Ceo' },
+ { Name: 'Kevin-Manager', ReportingPerson: 'Steve-Ceo' },
+ { Name: 'Peter-Manager', ReportingPerson: 'Kevin-Manager' },
+ { Name: 'John- Manager', ReportingPerson: 'Peter-Manager' },
+ { Name: 'Mary-CSE ', ReportingPerson: 'Peter-Manager' },
+];
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+ let diagramInstance: DiagramComponent;
+ let horizontalInstance: HTMLSelectElement;
+ let verticalInstance: HTMLSelectElement;
+
+ // Function to handle Horizontal Spacing
+ function horizontalSpacing() {
+ let value = Number(horizontalInstance.value);
+ if (value < 20) {
+ value = 20;
+ }
+ if (value > 100) {
+ value = 100;
+ }
+ diagramInstance.layout.horizontalSpacing = value;
+ diagramInstance.dataBind();
+ }
+
+ // Function to handle Vertical Spacing
+ function verticalSpacing() {
+ let value = Number(verticalInstance.value);
+ if (value < 20) {
+ value = 20;
+ }
+ if (value > 100) {
+ value = 100;
+ }
+ diagramInstance.layout.verticalSpacing = value;
+ diagramInstance.dataBind();
+ }
+
+ return (
+
+ Horizontal :
+ Vertical :
+ (diagramInstance = diagram)}
+
+ //Uses layout to auto-arrange nodes on the diagram page
+ layout={{
+ //Sets layout type
+ type: 'HierarchicalTree',
+ //set layout spacing
+ horizontalSpacing: 30,
+ verticalSpacing: 30,
+ }}
+
+ //Configures data source for diagram
+ dataSourceSettings={{
+ id: 'Name',
+ parentId: 'ReportingPerson',
+ dataManager: items,
+ }}
+
+ //Sets the default properties for nodes
+ getNodeDefaults={(node: NodeModel): NodeModel => {
+ node.annotations = [{ content: (node.data as { Name: 'string' }).Name }];
+ node.width = 100;
+ node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel): ConnectorModel => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/symbol-palette/es5fit-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/symbol-palette/es5fit-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/app/index.jsx
new file mode 100644
index 000000000..d35010188
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/app/index.jsx
@@ -0,0 +1,81 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree } from '@syncfusion/ej2-react-diagrams';
+
+
+//Initialize nodes
+let nodes = [
+ {
+ id: 'Start',
+ width: 140,
+ height: 50,
+ offsetX: 300,
+ offsetY: 50,
+ annotations: [{ content: 'Node1' }],
+ style: { fill: '#6BA5D7', strokeColor: 'white' },
+ expandIcon: {
+ shape: 'ArrowDown',
+ width: 20,
+ height: 15,
+ },
+ collapseIcon: {
+ shape: 'ArrowUp',
+ width: 20,
+ height: 15,
+ },
+ },
+ {
+ id: 'Init',
+ width: 140,
+ height: 50,
+ offsetX: 300,
+ offsetY: 140,
+ style: { fill: '#6BA5D7', strokeColor: 'white' },
+ annotations: [{ content: 'Node2' }],
+ },
+];
+
+//Initializes connectors
+let connectors = [{
+ id: 'connector1',
+ sourceID: 'Start',
+ targetID: 'Init',
+ type: 'Orthogonal',
+}];
+
+export default function App() {
+
+ // Function expand/collapse state changes
+ function expandStateChange(args) {
+ //We can get the expanded or collapsed state in args
+ console.log('Expanded ' + args.state);
+ }
+ return (
+
+
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/app/index.tsx
new file mode 100644
index 000000000..53196b661
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/app/index.tsx
@@ -0,0 +1,81 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, ConnectorModel, NodeModel, IExpandStateChangeEventArgs } from '@syncfusion/ej2-react-diagrams';
+
+
+//Initialize nodes
+let nodes: NodeModel[] = [
+ {
+ id: 'Start',
+ width: 140,
+ height: 50,
+ offsetX: 300,
+ offsetY: 50,
+ annotations: [{ content: 'Node1' }],
+ style: { fill: '#6BA5D7', strokeColor: 'white' },
+ expandIcon: {
+ shape: 'ArrowDown',
+ width: 20,
+ height: 15,
+ },
+ collapseIcon: {
+ shape: 'ArrowUp',
+ width: 20,
+ height: 15,
+ },
+ },
+ {
+ id: 'Init',
+ width: 140,
+ height: 50,
+ offsetX: 300,
+ offsetY: 140,
+ style: { fill: '#6BA5D7', strokeColor: 'white' },
+ annotations: [{ content: 'Node2' }],
+ },
+];
+
+//Initializes connectors
+let connectors: ConnectorModel[] = [{
+ id: 'connector1',
+ sourceID: 'Start',
+ targetID: 'Init',
+ type: 'Orthogonal',
+}];
+
+export default function App() {
+
+ // Function expand/collapse state changes
+ function expandStateChange(args: IExpandStateChangeEventArgs) {
+ //We can get the expanded or collapsed state in args
+ console.log('Expanded ' + args.state);
+ }
+ return (
+
+
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/symbol-palette/es5palettes-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/symbol-palette/es5palettes-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/app/index.jsx
new file mode 100644
index 000000000..c18acb177
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/app/index.jsx
@@ -0,0 +1,119 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, LayoutAnimation } from '@syncfusion/ej2-react-diagrams';
+
+
+//Initialize nodes
+let nodes = [
+ {
+ id: 'Start',
+ width: 140,
+ height: 50,
+ offsetX: 300,
+ offsetY: 50,
+ annotations: [{ content: 'Node1' }],
+ style: { fill: '#6BA5D7', strokeColor: 'white' },
+ expandIcon: {
+ shape: 'ArrowDown',
+ width: 20,
+ height: 15,
+ },
+ collapseIcon: {
+ shape: 'ArrowUp',
+ width: 20,
+ height: 15,
+ },
+ },
+ {
+ id: 'Init',
+ width: 140,
+ height: 50,
+ offsetX: 300,
+ offsetY: 140,
+ style: { fill: '#6BA5D7', strokeColor: 'white' },
+ annotations: [{ content: 'Node2' }],
+ },
+ {
+ id: 'Init2',
+ width: 140,
+ height: 50,
+ offsetX: 100,
+ offsetY: 140,
+ style: { fill: '#6BA5D7', strokeColor: 'white' },
+ annotations: [{ content: 'Node3' }],
+ },
+ {
+ id: 'Init3',
+ width: 140,
+ height: 50,
+ offsetX: 150,
+ offsetY: 140,
+ style: { fill: '#6BA5D7', strokeColor: 'white' },
+ annotations: [{ content: 'Node4' }],
+ }
+];
+
+//Initializes connectors
+let connectors = [
+ {
+ id: 'connector1',
+ sourceID: 'Start',
+ targetID: 'Init',
+ type: 'Orthogonal',
+ },
+ {
+ id: 'connector2',
+ sourceID: 'Start',
+ targetID: 'Init2',
+ type: 'Orthogonal',
+ },
+ {
+ id: 'connector3',
+ sourceID: 'Init2',
+ targetID: 'Init3',
+ type: 'Orthogonal',
+ }
+];
+
+export default function App() {
+ let diagramInstance;
+
+ // Function to handle animation state changes
+ function animationComplete() {
+ console.log('Animation complete');
+ diagramInstance.nodes[0].style.fill =
+ diagramInstance.nodes[0].style.fill === '#6BA5D7' ? 'red' : '#6BA5D7';
+ diagramInstance.dataBind();
+
+ //customize
+ }
+ return (
+
+ (diagramInstance = diagram)}
+ // Event Triggers when animation complete
+ animationComplete={animationComplete}
+ //Uses layout to auto-arrange nodes on the diagram page
+ layout={{
+ //Sets layout type
+ type: 'HierarchicalTree',
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/app/index.tsx
new file mode 100644
index 000000000..0d0e5b5a8
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/app/index.tsx
@@ -0,0 +1,119 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, HierarchicalTree, LayoutAnimation, ConnectorModel, NodeModel, ShapeStyleModel } from '@syncfusion/ej2-react-diagrams';
+
+
+//Initialize nodes
+let nodes: NodeModel[] = [
+ {
+ id: 'Start',
+ width: 140,
+ height: 50,
+ offsetX: 300,
+ offsetY: 50,
+ annotations: [{ content: 'Node1' }],
+ style: { fill: '#6BA5D7', strokeColor: 'white' },
+ expandIcon: {
+ shape: 'ArrowDown',
+ width: 20,
+ height: 15,
+ },
+ collapseIcon: {
+ shape: 'ArrowUp',
+ width: 20,
+ height: 15,
+ },
+ },
+ {
+ id: 'Init',
+ width: 140,
+ height: 50,
+ offsetX: 300,
+ offsetY: 140,
+ style: { fill: '#6BA5D7', strokeColor: 'white' },
+ annotations: [{ content: 'Node2' }],
+ },
+ {
+ id: 'Init2',
+ width: 140,
+ height: 50,
+ offsetX: 100,
+ offsetY: 140,
+ style: { fill: '#6BA5D7', strokeColor: 'white' },
+ annotations: [{ content: 'Node3' }],
+ },
+ {
+ id: 'Init3',
+ width: 140,
+ height: 50,
+ offsetX: 150,
+ offsetY: 140,
+ style: { fill: '#6BA5D7', strokeColor: 'white' },
+ annotations: [{ content: 'Node4' }],
+ }
+];
+
+//Initializes connectors
+let connectors: ConnectorModel[] = [
+ {
+ id: 'connector1',
+ sourceID: 'Start',
+ targetID: 'Init',
+ type: 'Orthogonal',
+ },
+ {
+ id: 'connector2',
+ sourceID: 'Start',
+ targetID: 'Init2',
+ type: 'Orthogonal',
+ },
+ {
+ id: 'connector3',
+ sourceID: 'Init2',
+ targetID: 'Init3',
+ type: 'Orthogonal',
+ }
+];
+
+export default function App() {
+ let diagramInstance: DiagramComponent;
+
+ // Function to handle animation state changes
+ function animationComplete() {
+ console.log('Animation complete');
+ (diagramInstance.nodes[0].style as ShapeStyleModel).fill =
+ (diagramInstance.nodes[0].style as ShapeStyleModel).fill === '#6BA5D7' ? 'red' : '#6BA5D7';
+ diagramInstance.dataBind();
+
+ //customize
+ }
+ return (
+
+ (diagramInstance = diagram)}
+ // Event Triggers when the animation complete
+ animationComplete={animationComplete}
+ //Uses layout to auto-arrange nodes on the diagram page
+ layout={{
+ //Sets layout type
+ type: 'HierarchicalTree',
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/symbol-palette/es5preview-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/symbol-palette/es5preview-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/app/index.jsx
new file mode 100644
index 000000000..fd79a8891
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/app/index.jsx
@@ -0,0 +1,65 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, MindMap } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+//Initializes data source
+let data = [
+ { id: 1, Label: "StackPanel" },
+ { id: 2, Label: "Label", parentId: 1 },
+ { id: 3, Label: "ListBox", parentId: 1 },
+ { id: 4, Label: "StackPanel", parentId: 2 },
+ { id: 5, Label: "Border", parentId: 2 },
+ { id: 6, Label: "Border", parentId: 4 },
+ { id: 7, Label: "Button", parentId: 4 },
+ { id: 8, Label: "ContentPresenter", parentId: 5 },
+ { id: 9, Label: "Text Block", parentId: 5 },
+];
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+ return (
+
{
+ node.annotations = [{ content: node.data.Label }];
+ node.width = 100; node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = "Orthogonal";
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/app/index.tsx
new file mode 100644
index 000000000..37af93767
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/app/index.tsx
@@ -0,0 +1,65 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, ConnectorModel, DataBinding, NodeModel, MindMap } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+//Initializes data source
+let data: object[] = [
+ { id: 1, Label: "StackPanel" },
+ { id: 2, Label: "Label", parentId: 1 },
+ { id: 3, Label: "ListBox", parentId: 1 },
+ { id: 4, Label: "StackPanel", parentId: 2 },
+ { id: 5, Label: "Border", parentId: 2 },
+ { id: 6, Label: "Border", parentId: 4 },
+ { id: 7, Label: "Button", parentId: 4 },
+ { id: 8, Label: "ContentPresenter", parentId: 5 },
+ { id: 9, Label: "Text Block", parentId: 5 },
+];
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+ return (
+
{
+ node.annotations = [{ content: (node.data as { Label: 'string' }).Label }];
+ node.width = 100; node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = "Orthogonal";
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/symbol-palette/es5preview-cs2/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/symbol-palette/es5preview-cs2/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/app/index.jsx
new file mode 100644
index 000000000..9ce61e746
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/app/index.jsx
@@ -0,0 +1,74 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, MindMap } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+//Initializes data source
+let data = [
+ { id: 1, Label: "StackPanel" },
+ { id: 2, Label: "Label", parentId: 1 },
+ { id: 3, Label: "ListBox", parentId: 1 },
+ { id: 4, Label: "StackPanel", parentId: 2 },
+ { id: 5, Label: "Border", parentId: 2 },
+ { id: 6, Label: "Border", parentId: 4 },
+ { id: 7, Label: "Button", parentId: 4 },
+ { id: 8, Label: "ContentPresenter", parentId: 5 },
+ { id: 9, Label: "Text Block", parentId: 5 },
+];
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+ return (
+
{
+ if (node.data.id === 1) {
+ return 'Root';
+ }
+ return 'Right';
+ }
+ }}
+
+ //Configures data source for diagram
+ dataSourceSettings={{
+ id: "id",
+ parentId: "parentId",
+ dataManager: items,
+ root: String(1),
+ }}
+
+ //Sets the default properties for nodes
+ getNodeDefaults={(node) => {
+ node.annotations = [{ content: node.data.Label }];
+ node.width = 100; node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = "Orthogonal";
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/app/index.tsx
new file mode 100644
index 000000000..a1fa4ebeb
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/app/index.tsx
@@ -0,0 +1,74 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, ConnectorModel, DataBinding, NodeModel, MindMap } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+//Initializes data source
+let data: object[] = [
+ { id: 1, Label: "StackPanel" },
+ { id: 2, Label: "Label", parentId: 1 },
+ { id: 3, Label: "ListBox", parentId: 1 },
+ { id: 4, Label: "StackPanel", parentId: 2 },
+ { id: 5, Label: "Border", parentId: 2 },
+ { id: 6, Label: "Border", parentId: 4 },
+ { id: 7, Label: "Button", parentId: 4 },
+ { id: 8, Label: "ContentPresenter", parentId: 5 },
+ { id: 9, Label: "Text Block", parentId: 5 },
+];
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+ return (
+
{
+ if ((node.data as any).id === 1) {
+ return 'Root';
+ }
+ return 'Right';
+ }
+ }}
+
+ //Configures data source for diagram
+ dataSourceSettings={{
+ id: "id",
+ parentId: "parentId",
+ dataManager: items,
+ root: String(1),
+ }}
+
+ //Sets the default properties for nodes
+ getNodeDefaults={(node: NodeModel) => {
+ node.annotations = [{ content: (node.data as { Label: 'string' }).Label }];
+ node.width = 100; node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = "Orthogonal";
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/symbol-palette/es5preview-cs3/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/symbol-palette/es5preview-cs3/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/node.style-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/node.style-cs1/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/node.style-cs1/index.html
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/node.style-cs1/index.html
@@ -2,7 +2,7 @@
-
Syncfusion React Chart-DataLabel
+
Syncfusion® React Chart-DataLabel
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/app/index.jsx
new file mode 100644
index 000000000..c327b8918
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/app/index.jsx
@@ -0,0 +1,157 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+
+//Initializes data source
+let data = [
+ {
+ Id: 'parent',
+ Role: 'Project Management',
+ },
+ {
+ Id: 1,
+ Role: 'R&D Team',
+ Team: 'parent',
+ },
+ {
+ Id: 3,
+ Role: 'Philosophy',
+ Team: '1',
+ },
+ {
+ Id: 4,
+ Role: 'Organization',
+ Team: '1',
+ },
+ {
+ Id: 5,
+ Role: 'Technology',
+ Team: '1',
+ },
+ {
+ Id: 7,
+ Role: 'Funding',
+ Team: '1',
+ },
+ {
+ Id: 8,
+ Role: 'Resource Allocation',
+ Team: '1',
+ },
+ {
+ Id: 9,
+ Role: 'Targeting',
+ Team: '1',
+ },
+ {
+ Id: 11,
+ Role: 'Evaluation',
+ Team: '1',
+ },
+ {
+ Id: 156,
+ Role: 'HR Team',
+ Team: 'parent',
+ },
+ {
+ Id: 13,
+ Role: 'Recruitment',
+ Team: '156',
+ },
+ {
+ Id: 112,
+ Role: 'Employee Relation',
+ Team: '156',
+ },
+ {
+ Id: 17,
+ Role: 'Production & Sales Team',
+ Team: 'parent',
+ },
+ {
+ Id: 119,
+ Role: 'Design',
+ Team: '17',
+ },
+ {
+ Id: 19,
+ Role: 'Operation',
+ Team: '17',
+ },
+ {
+ Id: 20,
+ Role: 'Support',
+ Team: '17',
+ },
+ {
+ Id: 21,
+ Role: 'Quality Assurance',
+ Team: '17',
+ },
+ {
+ Id: 23,
+ Role: 'Customer Interaction',
+ Team: '17',
+ },
+ {
+ Id: 24,
+ Role: 'Support and Maintenance',
+ Team: '17',
+ },
+ {
+ Id: 25,
+ Role: 'Task Coordination',
+ Team: '17',
+ }
+];
+
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+ return (
+
{
+ node.annotations = [{ content: node.data.Role }];
+ node.width = 75;
+ node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/app/index.tsx
new file mode 100644
index 000000000..2db76ac77
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/app/index.tsx
@@ -0,0 +1,157 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, ConnectorModel, DataBinding, NodeModel, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+
+//Initializes data source
+let data: object[] = [
+ {
+ Id: 'parent',
+ Role: 'Project Management',
+ },
+ {
+ Id: 1,
+ Role: 'R&D Team',
+ Team: 'parent',
+ },
+ {
+ Id: 3,
+ Role: 'Philosophy',
+ Team: '1',
+ },
+ {
+ Id: 4,
+ Role: 'Organization',
+ Team: '1',
+ },
+ {
+ Id: 5,
+ Role: 'Technology',
+ Team: '1',
+ },
+ {
+ Id: 7,
+ Role: 'Funding',
+ Team: '1',
+ },
+ {
+ Id: 8,
+ Role: 'Resource Allocation',
+ Team: '1',
+ },
+ {
+ Id: 9,
+ Role: 'Targeting',
+ Team: '1',
+ },
+ {
+ Id: 11,
+ Role: 'Evaluation',
+ Team: '1',
+ },
+ {
+ Id: 156,
+ Role: 'HR Team',
+ Team: 'parent',
+ },
+ {
+ Id: 13,
+ Role: 'Recruitment',
+ Team: '156',
+ },
+ {
+ Id: 112,
+ Role: 'Employee Relation',
+ Team: '156',
+ },
+ {
+ Id: 17,
+ Role: 'Production & Sales Team',
+ Team: 'parent',
+ },
+ {
+ Id: 119,
+ Role: 'Design',
+ Team: '17',
+ },
+ {
+ Id: 19,
+ Role: 'Operation',
+ Team: '17',
+ },
+ {
+ Id: 20,
+ Role: 'Support',
+ Team: '17',
+ },
+ {
+ Id: 21,
+ Role: 'Quality Assurance',
+ Team: '17',
+ },
+ {
+ Id: 23,
+ Role: 'Customer Interaction',
+ Team: '17',
+ },
+ {
+ Id: 24,
+ Role: 'Support and Maintenance',
+ Team: '17',
+ },
+ {
+ Id: 25,
+ Role: 'Task Coordination',
+ Team: '17',
+ }
+];
+
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+ return (
+
{
+ node.annotations = [{ content: (node.data as { Role: 'string' }).Role }];
+ node.width = 75;
+ node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/symbol-palette/es5size-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/symbol-palette/es5size-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/app/index.jsx
new file mode 100644
index 000000000..4efd7a570
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/app/index.jsx
@@ -0,0 +1,168 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
+
+//Initialize nodes for diagram
+let nodes = [
+ { id: 'Project Management' },
+ { id: 'R&D Team' },
+ { id: 'Philosophy' },
+ { id: 'Organization' },
+ { id: 'Technology' },
+ { id: 'Funding' },
+ { id: 'Resource Allocation' },
+ { id: 'Targeting' },
+ { id: 'Evaluation' },
+ { id: 'HR Team' },
+ { id: 'Recruitment' },
+ { id: 'Employee Relation' },
+ { id: 'Production & Sales Team' },
+ { id: 'Design' },
+ { id: 'Operation' },
+ { id: 'Support' },
+ { id: 'Quality Assurance' },
+ { id: 'Customer Interaction' },
+ { id: 'Support and Maintenance' },
+ { id: 'Task Coordination' },
+];
+
+//Initialize connectors for diagram
+let connectors = [
+ {
+ id: 'Project Management-R&D Team',
+ sourceID: 'Project Management',
+ targetID: 'R&D Team',
+ },
+ {
+ id: 'R&D Team-Philosophy',
+ sourceID: 'R&D Team',
+ targetID: 'Philosophy'
+ },
+ {
+ id: 'R&D Team-Organization',
+ sourceID: 'R&D Team',
+ targetID: 'Organization',
+ },
+ {
+ id: 'R&D Team-Technology',
+ sourceID: 'R&D Team',
+ targetID: 'Technology'
+ },
+ {
+ id: 'R&D Team-Funding',
+ sourceID: 'R&D Team',
+ targetID: 'Funding'
+ },
+ {
+ id: 'R&D Team-Resource Allocation',
+ sourceID: 'R&D Team',
+ targetID: 'Resource Allocation',
+ },
+ {
+ id: 'R&D Team-Targeting',
+ sourceID: 'R&D Team',
+ targetID: 'Targeting'
+ },
+ {
+ id: 'R&D Team-Evaluation',
+ sourceID: 'R&D Team',
+ targetID: 'Evaluation'
+ },
+ {
+ id: 'Project Management-HR Team',
+ sourceID: 'Project Management',
+ targetID: 'HR Team',
+ },
+ {
+ id: 'HR Team-Recruitment',
+ sourceID: 'HR Team',
+ targetID: 'Recruitment'
+ },
+ {
+ id: 'HR Team-Employee Relation',
+ sourceID: 'HR Team',
+ targetID: 'Employee Relation',
+ },
+ {
+ id: 'Project Management-Production & Sales Team',
+ sourceID: 'Project Management',
+ targetID: 'Production & Sales Team',
+ },
+ {
+ id: 'Production & Sales Team-Design',
+ sourceID: 'Production & Sales Team',
+ targetID: 'Design',
+ },
+ {
+ id: 'Production & Sales Team-Operation',
+ sourceID: 'Production & Sales Team',
+ targetID: 'Operation',
+ },
+ {
+ id: 'Production & Sales Team-Support',
+ sourceID: 'Production & Sales Team',
+ targetID: 'Support',
+ },
+ {
+ id: 'Production & Sales Team-Quality Assurance',
+ sourceID: 'Production & Sales Team',
+ targetID: 'Quality Assurance',
+ },
+ {
+ id: 'Production & Sales Team-Customer Interaction',
+ sourceID: 'Production & Sales Team',
+ targetID: 'Customer Interaction',
+ },
+ {
+ id: 'Production & Sales Team-Support and Maintenance',
+ sourceID: 'Production & Sales Team',
+ targetID: 'Support and Maintenance',
+ },
+ {
+ id: 'Production & Sales Team-Task Coordination',
+ sourceID: 'Production & Sales Team',
+ targetID: 'Task Coordination',
+ },
+];
+
+export default function App() {
+ return (
+
{
+ node.annotations = [{ content: node.id }];
+ node.width = 75;
+ node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/app/index.tsx
new file mode 100644
index 000000000..2babe6e61
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/app/index.tsx
@@ -0,0 +1,169 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, ConnectorModel, DataBinding, NodeModel, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
+
+
+//Initialize nodes for diagram
+let nodes: NodeModel[] = [
+ { id: 'Project Management' },
+ { id: 'R&D Team' },
+ { id: 'Philosophy' },
+ { id: 'Organization' },
+ { id: 'Technology' },
+ { id: 'Funding' },
+ { id: 'Resource Allocation' },
+ { id: 'Targeting' },
+ { id: 'Evaluation' },
+ { id: 'HR Team' },
+ { id: 'Recruitment' },
+ { id: 'Employee Relation' },
+ { id: 'Production & Sales Team' },
+ { id: 'Design' },
+ { id: 'Operation' },
+ { id: 'Support' },
+ { id: 'Quality Assurance' },
+ { id: 'Customer Interaction' },
+ { id: 'Support and Maintenance' },
+ { id: 'Task Coordination' },
+];
+
+//Initialize connectors for diagram
+let connectors: ConnectorModel[] = [
+ {
+ id: 'Project Management-R&D Team',
+ sourceID: 'Project Management',
+ targetID: 'R&D Team',
+ },
+ {
+ id: 'R&D Team-Philosophy',
+ sourceID: 'R&D Team',
+ targetID: 'Philosophy'
+ },
+ {
+ id: 'R&D Team-Organization',
+ sourceID: 'R&D Team',
+ targetID: 'Organization',
+ },
+ {
+ id: 'R&D Team-Technology',
+ sourceID: 'R&D Team',
+ targetID: 'Technology'
+ },
+ {
+ id: 'R&D Team-Funding',
+ sourceID: 'R&D Team',
+ targetID: 'Funding'
+ },
+ {
+ id: 'R&D Team-Resource Allocation',
+ sourceID: 'R&D Team',
+ targetID: 'Resource Allocation',
+ },
+ {
+ id: 'R&D Team-Targeting',
+ sourceID: 'R&D Team',
+ targetID: 'Targeting'
+ },
+ {
+ id: 'R&D Team-Evaluation',
+ sourceID: 'R&D Team',
+ targetID: 'Evaluation'
+ },
+ {
+ id: 'Project Management-HR Team',
+ sourceID: 'Project Management',
+ targetID: 'HR Team',
+ },
+ {
+ id: 'HR Team-Recruitment',
+ sourceID: 'HR Team',
+ targetID: 'Recruitment'
+ },
+ {
+ id: 'HR Team-Employee Relation',
+ sourceID: 'HR Team',
+ targetID: 'Employee Relation',
+ },
+ {
+ id: 'Project Management-Production & Sales Team',
+ sourceID: 'Project Management',
+ targetID: 'Production & Sales Team',
+ },
+ {
+ id: 'Production & Sales Team-Design',
+ sourceID: 'Production & Sales Team',
+ targetID: 'Design',
+ },
+ {
+ id: 'Production & Sales Team-Operation',
+ sourceID: 'Production & Sales Team',
+ targetID: 'Operation',
+ },
+ {
+ id: 'Production & Sales Team-Support',
+ sourceID: 'Production & Sales Team',
+ targetID: 'Support',
+ },
+ {
+ id: 'Production & Sales Team-Quality Assurance',
+ sourceID: 'Production & Sales Team',
+ targetID: 'Quality Assurance',
+ },
+ {
+ id: 'Production & Sales Team-Customer Interaction',
+ sourceID: 'Production & Sales Team',
+ targetID: 'Customer Interaction',
+ },
+ {
+ id: 'Production & Sales Team-Support and Maintenance',
+ sourceID: 'Production & Sales Team',
+ targetID: 'Support and Maintenance',
+ },
+ {
+ id: 'Production & Sales Team-Task Coordination',
+ sourceID: 'Production & Sales Team',
+ targetID: 'Task Coordination',
+ },
+];
+
+export default function App() {
+ return (
+
{
+ node.annotations = [{ content: node.id }];
+ node.width = 75;
+ node.height = 40;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = 'Orthogonal';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/umldiagramshapes/es5Attribute-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/umldiagramshapes/es5Attribute-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/app/index.jsx
new file mode 100644
index 000000000..0b2debaab
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/app/index.jsx
@@ -0,0 +1,100 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+//Initializes data source
+let data = [
+ { Id: 1, Role: 'General Manager' },
+ { Id: 2, Role: 'Assistant Manager', Team: 1 },
+ { Id: 3, Role: 'Human Resource Manager', Team: 1 },
+ { Id: 4, Role: 'Design Manager', Team: 1 },
+ { Id: 5, Role: 'Operation Manager', Team: 1 },
+ { Id: 6, Role: 'Marketing Manager', Team: 1 },
+];
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+ let diagramInstance;
+ let alignmentInstance;
+
+ function onAlignmentChange() {
+ const args = alignmentInstance.value;
+ diagramInstance.layout.getLayoutInfo = (node, options) => {
+ if (!options.hasSubTree) {
+ options.type = args;
+ options.orientation = 'Horizontal';
+ }
+ };
+ };
+
+ return (
+
+ Alignment:
+ (alignmentInstance = alignment)}
+ >
+ Center
+ Right
+ Left
+ Balanced
+
+
+ (diagramInstance = diagram)}
+ snapSettings={{ constraints: 0 }}
+
+ //Uses layout to auto-arrange nodes on the diagram page
+ layout={{
+ //Sets layout type
+ type: 'OrganizationalChart',
+ // define the getLayoutInfo
+ getLayoutInfo: (node, options) => {
+ if (!options.hasSubTree) {
+ options.type = 'Center';
+ options.orientation = 'Horizontal';
+ }
+ }
+ }}
+
+ //Configures data source for diagram
+ dataSourceSettings={{
+ id: 'Id',
+ parentId: 'Team',
+ dataSource: items
+ }}
+
+ //Sets the default properties for nodes
+ getNodeDefaults={(node) => {
+ node.annotations = [{ content: node.data.Role }];
+ node.width = 150;
+ node.height = 50;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ (connector.targetDecorator).shape = 'None';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/app/index.tsx
new file mode 100644
index 000000000..3211270d1
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/app/index.tsx
@@ -0,0 +1,100 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, ConnectorModel, DataBinding, NodeModel, HierarchicalTree, SubTreeAlignments, TreeInfo, DecoratorModel } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+//Initializes data source
+let data: object[] = [
+ { Id: 1, Role: 'General Manager' },
+ { Id: 2, Role: 'Assistant Manager', Team: 1 },
+ { Id: 3, Role: 'Human Resource Manager', Team: 1 },
+ { Id: 4, Role: 'Design Manager', Team: 1 },
+ { Id: 5, Role: 'Operation Manager', Team: 1 },
+ { Id: 6, Role: 'Marketing Manager', Team: 1 },
+];
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+ let diagramInstance: DiagramComponent;
+ let alignmentInstance: HTMLSelectElement;
+
+ function onAlignmentChange() {
+ const args = alignmentInstance.value;
+ diagramInstance.layout.getLayoutInfo = (node: Node, options: TreeInfo) => {
+ if (!options.hasSubTree) {
+ options.type = (args as SubTreeAlignments);
+ options.orientation = 'Horizontal';
+ }
+ };
+ };
+
+ return (
+
+ Alignment:
+ (alignmentInstance = alignment)}
+ >
+ Center
+ Right
+ Left
+ Balanced
+
+
+ (diagramInstance = diagram)}
+ snapSettings={{ constraints: 0 }}
+
+ //Uses layout to auto-arrange nodes on the diagram page
+ layout={{
+ //Sets layout type
+ type: 'OrganizationalChart',
+ // define the getLayoutInfo
+ getLayoutInfo: (node: Node, options: TreeInfo) => {
+ if (!options.hasSubTree) {
+ options.type = 'Center';
+ options.orientation = 'Horizontal';
+ }
+ }
+ }}
+
+ //Configures data source for diagram
+ dataSourceSettings={{
+ id: 'Id',
+ parentId: 'Team',
+ dataSource: items
+ }}
+
+ //Sets the default properties for nodes
+ getNodeDefaults={(node: NodeModel) => {
+ node.annotations = [{ content: (node.data as { Role: 'string' }).Role }];
+ node.width = 150;
+ node.height = 50;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = 'Orthogonal';
+ (connector.targetDecorator as DecoratorModel).shape = 'None';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/umldiagramshapes/es5Member-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/systemjs.config.js
similarity index 100%
rename from ej2-react/code-snippet/diagram/umldiagramshapes/es5Member-cs1/systemjs.config.js
rename to ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/systemjs.config.js
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/app/index.jsx
new file mode 100644
index 000000000..d485f6a21
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/app/index.jsx
@@ -0,0 +1,99 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+//Initializes data source
+let data = [
+ { Id: 1, Role: 'General Manager' },
+ { Id: 2, Role: 'Assistant Manager', Team: 1 },
+ { Id: 3, Role: 'Human Resource Manager', Team: 1 },
+ { Id: 4, Role: 'Design Manager', Team: 1 },
+ { Id: 5, Role: 'Operation Manager', Team: 1 },
+ { Id: 6, Role: 'Marketing Manager', Team: 1 },
+];
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+ let diagramInstance;
+ let alignmentInstance;
+
+ function onAlignmentChange() {
+ const args = alignmentInstance.value;
+ diagramInstance.layout.getLayoutInfo = (node, options) => {
+ if (!options.hasSubTree) {
+ options.type = args;
+ options.orientation = 'Vertical';
+ }
+ };
+ };
+
+ return (
+
+ Alignment:
+ (alignmentInstance = alignment)}
+ >
+ Left
+ Right
+ Alternate
+
+
+ (diagramInstance = diagram)}
+ snapSettings={{ constraints: 0 }}
+
+ //Uses layout to auto-arrange nodes on the diagram page
+ layout={{
+ //Sets layout type
+ type: 'OrganizationalChart',
+ // define the getLayoutInfo
+ getLayoutInfo: (node, options) => {
+ if (!options.hasSubTree) {
+ options.type = 'Left';
+ options.orientation = 'Vertical';
+ }
+ }
+ }}
+
+ //Configures data source for diagram
+ dataSourceSettings={{
+ id: 'Id',
+ parentId: 'Team',
+ dataSource: items
+ }}
+
+ //Sets the default properties for nodes
+ getNodeDefaults={(node) => {
+ node.annotations = [{ content: node.data.Role }];
+ node.width = 150;
+ node.height = 50;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ (connector.targetDecorator).shape = 'None';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/app/index.tsx
new file mode 100644
index 000000000..8cd18eb60
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/app/index.tsx
@@ -0,0 +1,99 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, ConnectorModel, DataBinding, NodeModel, HierarchicalTree, SubTreeAlignments, TreeInfo, DecoratorModel } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+//Initializes data source
+let data: object[] = [
+ { Id: 1, Role: 'General Manager' },
+ { Id: 2, Role: 'Assistant Manager', Team: 1 },
+ { Id: 3, Role: 'Human Resource Manager', Team: 1 },
+ { Id: 4, Role: 'Design Manager', Team: 1 },
+ { Id: 5, Role: 'Operation Manager', Team: 1 },
+ { Id: 6, Role: 'Marketing Manager', Team: 1 },
+];
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+ let diagramInstance: DiagramComponent;
+ let alignmentInstance: HTMLSelectElement;
+
+ function onAlignmentChange() {
+ const args = alignmentInstance.value;
+ diagramInstance.layout.getLayoutInfo = (node: Node, options: TreeInfo) => {
+ if (!options.hasSubTree) {
+ options.type = (args as SubTreeAlignments);
+ options.orientation = 'Vertical';
+ }
+ };
+ };
+
+ return (
+
+ Alignment:
+ (alignmentInstance = alignment)}
+ >
+ Left
+ Right
+ Alternate
+
+
+ (diagramInstance = diagram)}
+ snapSettings={{ constraints: 0 }}
+
+ //Uses layout to auto-arrange nodes on the diagram page
+ layout={{
+ //Sets layout type
+ type: 'OrganizationalChart',
+ // define the getLayoutInfo
+ getLayoutInfo: (node: Node, options: TreeInfo) => {
+ if (!options.hasSubTree) {
+ options.type = 'Left';
+ options.orientation = 'Vertical';
+ }
+ }
+ }}
+
+ //Configures data source for diagram
+ dataSourceSettings={{
+ id: 'Id',
+ parentId: 'Team',
+ dataSource: items
+ }}
+
+ //Sets the default properties for nodes
+ getNodeDefaults={(node: NodeModel) => {
+ node.annotations = [{ content: (node.data as { Role: 'string' }).Role }];
+ node.width = 150;
+ node.height = 50;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = 'Orthogonal';
+ (connector.targetDecorator as DecoratorModel).shape = 'None';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/systemjs.config.js
new file mode 100644
index 000000000..d2f0366a1
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/systemjs.config.js
@@ -0,0 +1,59 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js",
+ "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/app/index.jsx
new file mode 100644
index 000000000..b729f9abd
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/app/index.jsx
@@ -0,0 +1,81 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+//Initializes data source
+let data = [
+ { Id: 1, Role: 'General Manager' },
+ { Id: 2, Role: 'Assistant Manager', Team: 1 },
+ { Id: 3, Role: 'Human Resource Manager', Team: 1 },
+ { Id: 4, Role: 'Design Manager', Team: 1 },
+ { Id: 5, Role: 'Operation Manager', Team: 1 },
+ { Id: 6, Role: 'Marketing Manager', Team: 1 },
+];
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ if (node.data['Role'] === 'General Manager') {
+ options.assistants.push(options.children[0]);
+ options.children.splice(0, 1);
+ }
+ if (!options.hasSubTree) {
+ options.type = 'Center';
+ options.orientation = 'Horizontal';
+ }
+ }
+ }}
+
+ //Configures data source for diagram
+ dataSourceSettings={{
+ id: 'Id',
+ parentId: 'Team',
+ dataSource: items
+ }}
+
+ //Sets the default properties for nodes
+ getNodeDefaults={(node) => {
+ node.annotations = [{ content: node.data.Role }];
+ node.width = 150;
+ node.height = 50;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.type = 'Orthogonal';
+ connector.targetDecorator.shape = 'None';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/app/index.tsx
new file mode 100644
index 000000000..08ee553e4
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/app/index.tsx
@@ -0,0 +1,81 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, ConnectorModel, DataBinding, NodeModel, HierarchicalTree, TreeInfo, DecoratorModel } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+//Initializes data source
+let data: object[] = [
+ { Id: 1, Role: 'General Manager' },
+ { Id: 2, Role: 'Assistant Manager', Team: 1 },
+ { Id: 3, Role: 'Human Resource Manager', Team: 1 },
+ { Id: 4, Role: 'Design Manager', Team: 1 },
+ { Id: 5, Role: 'Operation Manager', Team: 1 },
+ { Id: 6, Role: 'Marketing Manager', Team: 1 },
+];
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+
+ return (
+
+ {
+ if (node.data['Role'] === 'General Manager') {
+ (options.assistants as string[]).push((options.children as string[])[0]);
+ (options.children as string[]).splice(0, 1);
+ }
+ if (!options.hasSubTree) {
+ options.type = 'Center';
+ options.orientation = 'Horizontal';
+ }
+ }
+ }}
+
+ //Configures data source for diagram
+ dataSourceSettings={{
+ id: 'Id',
+ parentId: 'Team',
+ dataSource: items
+ }}
+
+ //Sets the default properties for nodes
+ getNodeDefaults={(node: NodeModel) => {
+ node.annotations = [{ content: (node.data as { Role: 'string' }).Role }];
+ node.width = 150;
+ node.height = 50;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.type = 'Orthogonal';
+ (connector.targetDecorator as DecoratorModel).shape = 'None';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/systemjs.config.js
new file mode 100644
index 000000000..d2f0366a1
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/systemjs.config.js
@@ -0,0 +1,59 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js",
+ "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/app/index.jsx
new file mode 100644
index 000000000..414b0319c
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/app/index.jsx
@@ -0,0 +1,170 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, RadialTree } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+//Initializes data source
+let data = [
+ {
+ Id: 'parent',
+ Name: 'Maria Anders',
+ Designation: 'Managing Director'
+ },
+ {
+ Id: '1',
+ Name: 'Ana Trujillo',
+ Designation: 'Project Manager',
+ ReportingPerson: 'parent',
+ },
+ {
+ Id: '2',
+ Name: 'Lino Rodri',
+ Designation: 'Project Manager',
+ ReportingPerson: 'parent',
+ },
+ {
+ Id: '3',
+ Name: 'Philip Cramer',
+ Designation: 'Project Manager',
+ ReportingPerson: 'parent',
+ },
+ {
+ Id: '4',
+ Name: 'Pedro Afonso',
+ Designation: 'Project Manager',
+ ReportingPerson: 'parent',
+ },
+ {
+ Id: '15',
+ Name: 'Paul Henriot',
+ Designation: 'Project Manager',
+ ReportingPerson: 'parent',
+ },
+ {
+ Id: '18',
+ Name: 'Laura Callahan',
+ Designation: 'Project Manager',
+ ReportingPerson: 'parent',
+ },
+ {
+ Id: '5',
+ Name: 'Anto Moreno',
+ Designation: 'Project Lead',
+ ReportingPerson: '1',
+ },
+ {
+ Id: '6',
+ Name: 'Elizabeth Roel',
+ Designation: 'Project Lead',
+ ReportingPerson: '1',
+ },
+ {
+ Id: '7',
+ Name: 'Aria Cruz',
+ Designation: 'Project Lead',
+ ReportingPerson: '18',
+ },
+ {
+ Id: '8',
+ Name: 'Eduardo Roel',
+ Designation: 'Project Lead',
+ ReportingPerson: '18',
+ },
+ {
+ Id: '9',
+ Name: 'Howard Snyd',
+ Designation: 'Project Lead',
+ ReportingPerson: '2',
+ },
+ {
+ Id: '10',
+ Name: 'Daniel Tonini',
+ Designation: 'Project Lead',
+ ReportingPerson: '2',
+ },
+ {
+ Id: '11',
+ Name: 'Nardo Batista',
+ Designation: 'Project Lead',
+ ReportingPerson: '3',
+ },
+ {
+ Id: '12',
+ Name: 'Michael Holz',
+ Designation: 'Project Lead',
+ ReportingPerson: '3',
+ },
+ {
+ Id: '13',
+ Name: 'Kloss Perrier',
+ Designation: 'Project Lead',
+ ReportingPerson: '4',
+ },
+ {
+ Id: '14',
+ Name: 'Liz Nixon',
+ Designation: 'Project Lead',
+ ReportingPerson: '4',
+ },
+ {
+ Id: '16',
+ Name: 'Paula Parente',
+ Designation: 'Project Lead',
+ ReportingPerson: '15',
+ },
+ {
+ Id: '17',
+ Name: 'Matti Kenna',
+ Designation: 'Project Lead',
+ ReportingPerson: '15',
+ }
+];
+let items = new DataManager(data, new Query().take(7));
+
+export default function App() {
+ return (
+
{
+ node.height = 20;
+ node.width = 20;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.targetDecorator.shape = 'None';
+ connector.type = 'Straight';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/app/index.tsx
new file mode 100644
index 000000000..5ab1859cd
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/app/index.tsx
@@ -0,0 +1,170 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, ConnectorModel, DataBinding, NodeModel, RadialTree, DecoratorModel } from "@syncfusion/ej2-react-diagrams";
+import { DataManager, Query } from "@syncfusion/ej2-data";
+
+//Initializes data source
+let data: object[] = [
+ {
+ Id: 'parent',
+ Name: 'Maria Anders',
+ Designation: 'Managing Director'
+ },
+ {
+ Id: '1',
+ Name: 'Ana Trujillo',
+ Designation: 'Project Manager',
+ ReportingPerson: 'parent',
+ },
+ {
+ Id: '2',
+ Name: 'Lino Rodri',
+ Designation: 'Project Manager',
+ ReportingPerson: 'parent',
+ },
+ {
+ Id: '3',
+ Name: 'Philip Cramer',
+ Designation: 'Project Manager',
+ ReportingPerson: 'parent',
+ },
+ {
+ Id: '4',
+ Name: 'Pedro Afonso',
+ Designation: 'Project Manager',
+ ReportingPerson: 'parent',
+ },
+ {
+ Id: '15',
+ Name: 'Paul Henriot',
+ Designation: 'Project Manager',
+ ReportingPerson: 'parent',
+ },
+ {
+ Id: '18',
+ Name: 'Laura Callahan',
+ Designation: 'Project Manager',
+ ReportingPerson: 'parent',
+ },
+ {
+ Id: '5',
+ Name: 'Anto Moreno',
+ Designation: 'Project Lead',
+ ReportingPerson: '1',
+ },
+ {
+ Id: '6',
+ Name: 'Elizabeth Roel',
+ Designation: 'Project Lead',
+ ReportingPerson: '1',
+ },
+ {
+ Id: '7',
+ Name: 'Aria Cruz',
+ Designation: 'Project Lead',
+ ReportingPerson: '18',
+ },
+ {
+ Id: '8',
+ Name: 'Eduardo Roel',
+ Designation: 'Project Lead',
+ ReportingPerson: '18',
+ },
+ {
+ Id: '9',
+ Name: 'Howard Snyd',
+ Designation: 'Project Lead',
+ ReportingPerson: '2',
+ },
+ {
+ Id: '10',
+ Name: 'Daniel Tonini',
+ Designation: 'Project Lead',
+ ReportingPerson: '2',
+ },
+ {
+ Id: '11',
+ Name: 'Nardo Batista',
+ Designation: 'Project Lead',
+ ReportingPerson: '3',
+ },
+ {
+ Id: '12',
+ Name: 'Michael Holz',
+ Designation: 'Project Lead',
+ ReportingPerson: '3',
+ },
+ {
+ Id: '13',
+ Name: 'Kloss Perrier',
+ Designation: 'Project Lead',
+ ReportingPerson: '4',
+ },
+ {
+ Id: '14',
+ Name: 'Liz Nixon',
+ Designation: 'Project Lead',
+ ReportingPerson: '4',
+ },
+ {
+ Id: '16',
+ Name: 'Paula Parente',
+ Designation: 'Project Lead',
+ ReportingPerson: '15',
+ },
+ {
+ Id: '17',
+ Name: 'Matti Kenna',
+ Designation: 'Project Lead',
+ ReportingPerson: '15',
+ }
+];
+let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+
+export default function App() {
+ return (
+
{
+ node.height = 20;
+ node.width = 20;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ (connector.targetDecorator as DecoratorModel).shape = 'None';
+ connector.type = 'Straight';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/systemjs.config.js
new file mode 100644
index 000000000..d2f0366a1
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/systemjs.config.js
@@ -0,0 +1,59 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js",
+ "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/app/index.jsx
new file mode 100644
index 000000000..dd2543ffc
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/app/index.jsx
@@ -0,0 +1,164 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, DataBinding, RadialTree } from "@syncfusion/ej2-react-diagrams";
+
+
+//Initializes Nodes for diagram
+let nodes = [
+ { id: 'Maria Anders' },
+ { id: 'Ana Trujillo' },
+ { id: 'Lino Rodri' },
+ { id: 'Philip Cramer' },
+ { id: 'Pedro Afonso' },
+ { id: 'Paul Henriot' },
+ { id: 'Laura Callahan' },
+ { id: 'Anto Moreno' },
+ { id: 'Elizabeth Roel' },
+ { id: 'Aria Cruz' },
+ { id: 'Eduardo Roel' },
+ { id: 'Howard Snyd' },
+ { id: 'Daniel Tonini' },
+ { id: 'Nardo Batista' },
+ { id: 'Michael Holz' },
+ { id: 'Kloss Perrier' },
+ { id: 'Liz Nixon' },
+ { id: 'Paula Parente' },
+ { id: 'Matti Kenna' },
+];
+
+//Initializes Connectors for diagram
+let connectors = [
+ {
+ id: 'Maria Anders-Ana Trujillo',
+ sourceID: 'Maria Anders',
+ targetID: 'Ana Trujillo',
+ },
+ {
+ id: 'Maria Anders-Lino Rodri',
+ sourceID: 'Maria Anders',
+ targetID: 'Lino Rodri',
+ },
+ {
+ id: 'Maria Anders-Philip Cramer',
+ sourceID: 'Maria Anders',
+ targetID: 'Philip Cramer',
+ },
+ {
+ id: 'Maria Anders-Pedro Afonso',
+ sourceID: 'Maria Anders',
+ targetID: 'Pedro Afonso',
+ },
+ {
+ id: 'Maria Anders-Paul Henriot',
+ sourceID: 'Maria Anders',
+ targetID: 'Paul Henriot',
+ },
+ {
+ id: 'Maria Anders-Laura Callahan',
+ sourceID: 'Maria Anders',
+ targetID: 'Laura Callahan',
+ },
+ {
+ id: 'Ana Trujillo-Anto Moreno',
+ sourceID: 'Ana Trujillo',
+ targetID: 'Anto Moreno',
+ },
+ {
+ id: 'Ana Trujillo-Elizabeth Roel',
+ sourceID: 'Ana Trujillo',
+ targetID: 'Elizabeth Roel',
+ },
+ {
+ id: 'Laura Callahan-Aria Cruz',
+ sourceID: 'Laura Callahan',
+ targetID: 'Aria Cruz',
+ },
+ {
+ id: 'Laura Callahan-Eduardo Roel',
+ sourceID: 'Laura Callahan',
+ targetID: 'Eduardo Roel',
+ },
+ {
+ id: 'Lino Rodri-Howard Snyd',
+ sourceID: 'Lino Rodri',
+ targetID: 'Howard Snyd',
+ },
+ {
+ id: 'Lino Rodri-Daniel Tonini',
+ sourceID: 'Lino Rodri',
+ targetID: 'Daniel Tonini',
+ },
+ {
+ id: 'Philip Cramer-Nardo Batista',
+ sourceID: 'Philip Cramer',
+ targetID: 'Nardo Batista',
+ },
+ {
+ id: 'Philip Cramer-Michael Holz',
+ sourceID: 'Philip Cramer',
+ targetID: 'Michael Holz',
+ },
+ {
+ id: 'Pedro Afonso-Kloss Perrier',
+ sourceID: 'Pedro Afonso',
+ targetID: 'Kloss Perrier',
+ },
+ {
+ id: 'Pedro Afonso-Liz Nixon',
+ sourceID: 'Pedro Afonso',
+ targetID: 'Liz Nixon',
+ },
+ {
+ id: 'Paul Henriot-Paula Parente',
+ sourceID: 'Paul Henriot',
+ targetID: 'Paula Parente',
+ },
+ {
+ id: 'Paul Henriot-Matti Kenna',
+ sourceID: 'Paul Henriot',
+ targetID: 'Matti Kenna',
+ }
+];
+
+export default function App() {
+ return (
+
{
+ node.height = 20;
+ node.width = 20;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector) => {
+ connector.targetDecorator.shape = 'None';
+ connector.type = 'Straight';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/app/index.tsx
new file mode 100644
index 000000000..68144fe89
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/app/index.tsx
@@ -0,0 +1,164 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, ConnectorModel, DataBinding, NodeModel, RadialTree, DecoratorModel } from "@syncfusion/ej2-react-diagrams";
+
+
+//Initializes Nodes for diagram
+let nodes: NodeModel[] = [
+ { id: 'Maria Anders' },
+ { id: 'Ana Trujillo' },
+ { id: 'Lino Rodri' },
+ { id: 'Philip Cramer' },
+ { id: 'Pedro Afonso' },
+ { id: 'Paul Henriot' },
+ { id: 'Laura Callahan' },
+ { id: 'Anto Moreno' },
+ { id: 'Elizabeth Roel' },
+ { id: 'Aria Cruz' },
+ { id: 'Eduardo Roel' },
+ { id: 'Howard Snyd' },
+ { id: 'Daniel Tonini' },
+ { id: 'Nardo Batista' },
+ { id: 'Michael Holz' },
+ { id: 'Kloss Perrier' },
+ { id: 'Liz Nixon' },
+ { id: 'Paula Parente' },
+ { id: 'Matti Kenna' },
+];
+
+//Initializes Connectors for diagram
+let connectors: ConnectorModel[] = [
+ {
+ id: 'Maria Anders-Ana Trujillo',
+ sourceID: 'Maria Anders',
+ targetID: 'Ana Trujillo',
+ },
+ {
+ id: 'Maria Anders-Lino Rodri',
+ sourceID: 'Maria Anders',
+ targetID: 'Lino Rodri',
+ },
+ {
+ id: 'Maria Anders-Philip Cramer',
+ sourceID: 'Maria Anders',
+ targetID: 'Philip Cramer',
+ },
+ {
+ id: 'Maria Anders-Pedro Afonso',
+ sourceID: 'Maria Anders',
+ targetID: 'Pedro Afonso',
+ },
+ {
+ id: 'Maria Anders-Paul Henriot',
+ sourceID: 'Maria Anders',
+ targetID: 'Paul Henriot',
+ },
+ {
+ id: 'Maria Anders-Laura Callahan',
+ sourceID: 'Maria Anders',
+ targetID: 'Laura Callahan',
+ },
+ {
+ id: 'Ana Trujillo-Anto Moreno',
+ sourceID: 'Ana Trujillo',
+ targetID: 'Anto Moreno',
+ },
+ {
+ id: 'Ana Trujillo-Elizabeth Roel',
+ sourceID: 'Ana Trujillo',
+ targetID: 'Elizabeth Roel',
+ },
+ {
+ id: 'Laura Callahan-Aria Cruz',
+ sourceID: 'Laura Callahan',
+ targetID: 'Aria Cruz',
+ },
+ {
+ id: 'Laura Callahan-Eduardo Roel',
+ sourceID: 'Laura Callahan',
+ targetID: 'Eduardo Roel',
+ },
+ {
+ id: 'Lino Rodri-Howard Snyd',
+ sourceID: 'Lino Rodri',
+ targetID: 'Howard Snyd',
+ },
+ {
+ id: 'Lino Rodri-Daniel Tonini',
+ sourceID: 'Lino Rodri',
+ targetID: 'Daniel Tonini',
+ },
+ {
+ id: 'Philip Cramer-Nardo Batista',
+ sourceID: 'Philip Cramer',
+ targetID: 'Nardo Batista',
+ },
+ {
+ id: 'Philip Cramer-Michael Holz',
+ sourceID: 'Philip Cramer',
+ targetID: 'Michael Holz',
+ },
+ {
+ id: 'Pedro Afonso-Kloss Perrier',
+ sourceID: 'Pedro Afonso',
+ targetID: 'Kloss Perrier',
+ },
+ {
+ id: 'Pedro Afonso-Liz Nixon',
+ sourceID: 'Pedro Afonso',
+ targetID: 'Liz Nixon',
+ },
+ {
+ id: 'Paul Henriot-Paula Parente',
+ sourceID: 'Paul Henriot',
+ targetID: 'Paula Parente',
+ },
+ {
+ id: 'Paul Henriot-Matti Kenna',
+ sourceID: 'Paul Henriot',
+ targetID: 'Matti Kenna',
+ }
+];
+
+export default function App() {
+ return (
+
{
+ node.height = 20;
+ node.width = 20;
+ return node;
+ }}
+
+ //Sets the default properties for connectors
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ (connector.targetDecorator as DecoratorModel).shape = 'None';
+ connector.type = 'Straight';
+ return connector;
+ }}
+ >
+
+ {/* Inject necessary services for the diagram */}
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(
);
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/systemjs.config.js
new file mode 100644
index 000000000..d2f0366a1
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/systemjs.config.js
@@ -0,0 +1,59 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js",
+ "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/app/index.jsx
new file mode 100644
index 000000000..76da73340
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/app/index.jsx
@@ -0,0 +1,97 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, SymmetricLayout } from '@syncfusion/ej2-react-diagrams';
+
+
+//Initialize nodes
+let nodes = [];
+
+//Initializes connectors
+let connectors = [];
+
+// creating the connection between the layout nodes and connectors.
+function connectNodes(parentNode, childNode) {
+ const connector = {
+ id: parentNode.id + childNode.id,
+ sourceID: parentNode.id,
+ targetID: childNode.id,
+ targetDecorator: { shape: 'None' },
+ };
+ return connector;
+}
+
+// creating the layout nodes as rectangle in shape.
+function getRectangle(name) {
+ const shape = { type: 'Basic', shape: 'Ellipse' };
+ const node = {
+ id: name,
+ height: 25,
+ width: 25,
+ style: { fill: '#ff6329' },
+ shape: shape,
+ };
+ return node;
+}
+
+// creating the symmetrical layout child elements hierarchy.
+function populateNodes() {
+ const parentRect = getRectangle('p');
+ nodes.push(parentRect);
+ for (let i = 0; i < 2; i++) {
+ const childRect_i = getRectangle('c' + i);
+ nodes.push(childRect_i);
+ for (let j = 0; j < 2; j++) {
+ const childRect_j = getRectangle('c' + i + j);
+ nodes.push(childRect_j);
+ for (let k = 0; k < 6; k++) {
+ const childRect_k = getRectangle('c' + i + j + k);
+ nodes.push(childRect_k);
+ connectors.push(connectNodes(childRect_j, childRect_k));
+ }
+ connectors.push(connectNodes(childRect_i, childRect_j));
+ }
+ connectors.push(connectNodes(parentRect, childRect_i));
+ }
+ return nodes;
+}
+
+//sets the layout child elements
+populateNodes();
+
+export default function App() {
+
+ return (
+
+
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/app/index.tsx
new file mode 100644
index 000000000..f22e5a7c8
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/app/index.tsx
@@ -0,0 +1,100 @@
+{% raw %}
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { DiagramComponent, Inject, SymmetricLayout, ConnectorModel, NodeModel, BasicShapeModel } from '@syncfusion/ej2-react-diagrams';
+
+
+//Initialize nodes
+let nodes: NodeModel[] = [];
+
+//Initializes connectors
+let connectors: ConnectorModel[] = [];
+
+// creating the connection between the layout nodes and connectors.
+function connectNodes(parentNode: NodeModel | any, childNode: NodeModel): ConnectorModel {
+ const connector: ConnectorModel = {
+ id: parentNode.id + childNode.id,
+ sourceID: parentNode.id,
+ targetID: childNode.id,
+ targetDecorator: { shape: 'None' },
+ };
+ return connector;
+}
+
+// creating the layout nodes as rectangle in shape.
+function getRectangle(name: string): NodeModel {
+ const shape: BasicShapeModel = {
+ type: 'Basic',
+ shape: 'Ellipse',
+ };
+ const node: NodeModel = {
+ id: name,
+ height: 25,
+ width: 25,
+ style: { fill: '#ff6329' },
+ shape: shape,
+ };
+ return node;
+}
+
+// creating the symmetrical layout child elements hierarchy.
+function populateNodes() {
+ const parentRect: NodeModel = getRectangle('p');
+ nodes.push(parentRect);
+ for (let i = 0; i < 2; i++) {
+ const childRect_i: NodeModel = getRectangle('c' + i);
+ nodes.push(childRect_i);
+ for (let j = 0; j < 2; j++) {
+ const childRect_j: NodeModel = getRectangle('c' + i + j);
+ nodes.push(childRect_j);
+ for (let k = 0; k < 6; k++) {
+ const childRect_k: NodeModel = getRectangle('c' + i + j + k);
+ nodes.push(childRect_k);
+ connectors.push(connectNodes(childRect_j, childRect_k));
+ }
+ connectors.push(connectNodes(childRect_i, childRect_j));
+ }
+ connectors.push(connectNodes(parentRect, childRect_i));
+ }
+ return nodes;
+}
+
+//sets the layout child elements
+populateNodes();
+
+export default function App() {
+
+ return (
+
+
+
+ {/* Inject necessary services for the diagram */}
+
+
+
+ );
+}
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
+root.render(
);
+
+{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/index.html b/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/index.html
new file mode 100644
index 000000000..98f9d765e
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/systemjs.config.js
new file mode 100644
index 000000000..d2f0366a1
--- /dev/null
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/systemjs.config.js
@@ -0,0 +1,59 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+ "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+ "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js",
+ "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+
+ },
+ packages: {
+ 'app': { main: 'index', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/diagram/Tools/polygon-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/Tools/polygon-cs1/app/index.jsx
index 4d2dbf2d1..69da67473 100644
--- a/ej2-react/code-snippet/diagram/Tools/polygon-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/Tools/polygon-cs1/app/index.jsx
@@ -1,15 +1,17 @@
-{% raw %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
//Sets scroll status
let diagramInstance;
function App() {
- return (
(diagramInstance = diagram)} width={700} height={700} scrollSettings={{
- horizontalOffset: 100,
- verticalOffset: 50,
+ return ( (diagramInstance = diagram)} width={700} height={700} rulerSettings={{ showRulers: true }} scrollSettings={{
+ scrollLimit: 'Infinity',
+ }}
+ created={() => {
+ diagramInstance.scrollSettings.horizontalOffset = 100;
+ diagramInstance.scrollSettings.verticalOffset = 100;
+ diagramInstance.dataBind();
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
(diagramInstance = diagram)} width={700} height={700}/>);
+ const updateOffset = () => {
+ diagramInstance.scrollSettings.horizontalOffset = 200;
+ diagramInstance.scrollSettings.verticalOffset = 100;
+ diagramInstance.dataBind();
+ };
+ return (
+
+ Update Scroller Offset
+ (diagramInstance = diagram)} width={700} height={700} nodes={node} rulerSettings={{ showRulers: true }} scrollSettings={{ scrollLimit: 'Infinity' }}/>
+
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render( (diagramInstance = diagram)}
- width={700}
- height={700}
- />
+
+ Update Scroller Offset
+ (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ nodes={node}
+ rulerSettings={{ showRulers: true }}
+ scrollSettings={{ scrollLimit: 'Infinity' }}
+ />
+
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
(diagramInstance = diagram)}
+ width={700}
+ height={700}
+ created={() => {
+ //JSON to create a rectangle
+ let drawingshape = {
+ type: 'Basic',
+ shape: 'Rectangle',
+ };
+ let node = {
+ shape: drawingshape,
+ };
+ diagramInstance.drawingObject = node;
+ //To draw an object once, activate draw once
+ diagramInstance.tool = DiagramTools.ContinuousDraw;
+ diagramInstance.dataBind();
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ created={() => {
+ //JSON to create a rectangle
+ let drawingshape: BasicShapeModel = {
+ type: 'Basic',
+ shape: 'Rectangle',
+ };
+ let node: NodeModel = {
+ shape: drawingshape,
+ };
+ diagramInstance.drawingObject = node;
+ //To draw an object once, activate draw once
+ diagramInstance.tool = DiagramTools.ContinuousDraw;
+ diagramInstance.dataBind();
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ created={() => {
+ let node = {
+ id: "Path",
+ style: {
+ fill: "#fbe172"
+ },
+ annotations: [{
+ content: "Path"
+ }],
+ shape: {
+ type: 'Path',
+ data: 'M13.560 67.524 L 21.941 41.731 L 0.000 25.790 L 27.120 25.790 L 35.501 0.000 L 43.882 25.790 L 71.000 25.790 L 49.061 41.731 L 57.441 67.524 L 35.501 51.583 z'
+ }
+ };
+ diagramInstance.drawingObject = node;
+ //To draw an object once, activate draw once
+ diagramInstance.tool = DiagramTools.ContinuousDraw;
+ diagramInstance.dataBind();
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ created={() => {
+ let node: NodeModel = {
+ id: "Path",
+ style: {
+ fill: "#fbe172"
+ },
+ annotations: [{
+ content: "Path"
+ }],
+ shape: {
+ type: 'Path',
+ data: 'M13.560 67.524 L 21.941 41.731 L 0.000 25.790 L 27.120 25.790 L 35.501 0.000 L 43.882 25.790 L 71.000 25.790 L 49.061 41.731 L 57.441 67.524 L 35.501 51.583 z'
+ }
+ };
+ diagramInstance.drawingObject = node;
+ //To draw an object once, activate draw once
+ diagramInstance.tool = DiagramTools.ContinuousDraw;
+ diagramInstance.dataBind();
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ created={() => {
+ //JSON to create a text
+ let node = {
+ shape: {
+ type: 'Text',
+ }
+ };
+ diagramInstance.drawingObject = node;
+ //To draw an object once, activate draw once
+ diagramInstance.tool = DiagramTools.DrawOnce;
+ diagramInstance.dataBind();
+ }}
+ //customize the appearance of the shape
+ getNodeDefaults={(obj, diagramInstance) => {
+ obj.borderWidth = 1;
+ obj.style = {
+ fill: '#6BA5D7',
+ strokeWidth: 2,
+ strokeColor: '#6BA5D7',
+ };
+ return obj;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ created={() => {
+ //JSON to create a text
+ let node: NodeModel = {
+ shape: {
+ type: 'Text',
+ } as TextModel
+ };
+ diagramInstance.drawingObject = node;
+ //To draw an object once, activate draw once
+ diagramInstance.tool = DiagramTools.DrawOnce;
+ diagramInstance.dataBind();
+ }}
+ //customize the appearance of the shape
+ getNodeDefaults={(obj, diagramInstance) => {
+ obj.borderWidth = 1;
+ obj.style = {
+ fill: '#6BA5D7',
+ strokeWidth: 2,
+ strokeColor: '#6BA5D7',
+ };
+ return obj;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ created={() => {
+ //JSON to create a Connector
+ let connectors = {
+ id: 'connector1',
+ type: 'Straight',
+ segments: [
+ {
+ type: 'polyline',
+ },
+ ],
+ };
+ diagramInstance.drawingObject = connectors;
+ //To draw an object once, activate draw once
+ diagramInstance.tool = DiagramTools.ContinuousDraw;
+ diagramInstance.dataBind();
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ created={() => {
+ //JSON to create a Connector
+ let connectors: ConnectorModel = {
+ id: 'connector1',
+ type: 'Straight',
+ segments: [
+ {
+ type: 'polyline',
+ },
+ ],
+ };
+ diagramInstance.drawingObject = connectors;
+ //To draw an object once, activate draw once
+ diagramInstance.tool = DiagramTools.ContinuousDraw;
+ diagramInstance.dataBind();
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ created={() => {
+ let drawingshape = {
+ type: 'Basic',
+ shape: 'Polygon',
+ };
+ //JSON to create a polygon
+ let node = {
+ shape: drawingshape,
+ };
+ diagramInstance.drawingObject = node;
+ //To draw an object once, activate draw once
+ diagramInstance.tool = DiagramTools.DrawOnce;
+ diagramInstance.dataBind();
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ created={() => {
+ let drawingshape: BasicShapeModel = {
+ type: 'Basic',
+ shape: 'Polygon',
+ };
+ //JSON to create a polygon
+ let node = {
+ shape: drawingshape,
+ };
+ diagramInstance.drawingObject = node;
+ //To draw an object once, activate draw once
+ diagramInstance.tool = DiagramTools.DrawOnce;
+ diagramInstance.dataBind();
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ created={() => {
+ let connector = {
+ id: 'connector1',
+ type: 'Polyline',
+ };
+ diagramInstance.drawingObject = connector;
+ //To draw an object once, activate draw once
+ diagramInstance.tool = DiagramTools.DrawOnce;
+ diagramInstance.dataBind();
+ }}
+ //customize the appearance of the shape
+ getNodeDefaults={(obj, diagramInstance) => {
+ obj.borderWidth = 1;
+ obj.style = {
+ fill: '#6BA5D7',
+ strokeWidth: 2,
+ strokeColor: '#6BA5D7',
+ };
+ return obj;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ created = {
+ () => {
+ let connector: ConnectorModel = {
+ id: 'connector1',
+ type: 'Polyline'
+ };
+ diagramInstance.drawingObject = connector;
+ //To draw an object once, activate draw once
+ diagramInstance.tool = DiagramTools.DrawOnce;
+ diagramInstance.dataBind();
+ }
+ }
+ //customize the appearance of the shape
+ getNodeDefaults={(obj, diagramInstance) => {
+ obj.borderWidth = 1;
+ obj.style = {
+ fill: '#6BA5D7',
+ strokeWidth: 2,
+ strokeColor: '#6BA5D7',
+ };
+ return obj;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ created={() => {
+ //JSON to create a Connector
+ let connectors = {
+ id: 'connector1',
+ type: 'Freehand',
+ };
+ diagramInstance.drawingObject = connectors;
+ //To draw an object once, activate draw once
+ diagramInstance.tool = DiagramTools.DrawOnce;
+ diagramInstance.dataBind();
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ created={() => {
+ //JSON to create a Connector
+ let connectors: ConnectorModel = {
+ id: 'connector1',
+ type: 'Freehand',
+ };
+ diagramInstance.drawingObject = connectors;
+ //To draw an object once, activate draw once
+ diagramInstance.tool = DiagramTools.DrawOnce;
+ diagramInstance.dataBind();
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ nodes={nodes}
+ connectors={connectors}
+ tool={DiagramTools.DrawOnce | DiagramTools.ZoomPan}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ nodes={nodes}
+ connectors={connectors}
+ tool={DiagramTools.DrawOnce | DiagramTools.ZoomPan}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ nodes={nodes}
+ connectors={connectors}
+ tool={DiagramTools.DrawOnce | DiagramTools.ZoomPan}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ created={() => {
+ //JSON to create a rectangle
+ let drawingshape: BasicShapeModel = {
+ type: 'Basic',
+ shape: 'Rectangle',
+ };
+ let node: NodeModel = {
+ shape: drawingshape,
+ };
+ diagramInstance.drawingObject = node;
+ //To draw an object once, activate draw once
+ diagramInstance.tool = DiagramTools.DrawOnce;
+ diagramInstance.dataBind();
+ }}
+ elementDraw={(args: IElementDrawEventArgs) => {
+ if(args.state === 'Completed'){
+ alert('Element Draw Rectangle');
+ }
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+ Zoom In
+ Zoom Out
+ (diagramInstance = diagram)} width={700} height={700} nodes={node} rulerSettings={{ showRulers: true }} scrollSettings={{ scrollLimit: 'Infinity' }}/>
+
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+ Zoom In
+ Zoom Out
+ (diagramInstance = diagram)}
+ width={700}
+ height={700}
+ nodes={node}
+ rulerSettings={{ showRulers: true }}
+ scrollSettings={{ scrollLimit: 'Infinity' }}
+ />
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
+ Update Alignment
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+ Update Alignment
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
+
);
+}
+// initialize Diagram component
+function App() {
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+
);
+}
+// initialize Diagram component
+function App() {
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+
+
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} keyDown={keydown}/>);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} keyDown={keydown}/>);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} keyUp={keyup}/>);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} keyUp={keyup}/>);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render();
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render();
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+
+
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
+ return ();
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
+ return ();
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
+ return ();
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
+ const editAnnotation = () => {
+ //Method to edit the annotation programmatically
+ diagramInstance.startTextEdit(diagramInstance.nodes[0]);
+ };
+ return (
+
+ Edit Annotation
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
+
+ );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(
+ Edit Annotation
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
+
+);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
diff --git a/ej2-react/code-snippet/diagram/annotations/es5Overflow-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/annotations/es5Overflow-cs1/app/index.tsx
index c2fa06f84..248a32cbb 100644
--- a/ej2-react/code-snippet/diagram/annotations/es5Overflow-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/annotations/es5Overflow-cs1/app/index.tsx
@@ -3,31 +3,182 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
- Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
- id: 'node1',
- // Position of the node
- offsetX: 100,
- offsetY: 100,
- // Size of the node
- width: 100,
- height: 100,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white'
- },
- // Sets the annotation for the node
- annotations: [{
- content: 'Annotation Text',
- // Sets the style for the text to be displayed
- style: {
- textOverflow: 'Ellipsis'
- }
- }]
+ // Position of the node
+ offsetX: 100,
+ offsetY: 100,
+ // Size of the node
+ width: 100,
+ height: 100,
+ annotations: [
+ {
+ content: 'Clip Wrap',
+ offset: { x: 0.5, y: 1.4 },
+ },
+ {
+ content:
+ 'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text long annotation text long annotation text',
+ style: { textOverflow: 'Clip', textWrapping: 'Wrap' },
+ },
+ ],
+},
+{
+ // Position of the node
+ offsetX: 300,
+ offsetY: 100,
+ // Size of the node
+ width: 100,
+ height: 100,
+ annotations: [
+ {
+ content: 'Clip NoWrap',
+ offset: { x: 0.5, y: 1.4 },
+ },
+ {
+ content:
+ 'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
+ style: { textOverflow: 'Clip', textWrapping: 'NoWrap' },
+ },
+ ],
+},
+{
+ // Position of the node
+ offsetX: 500,
+ offsetY: 100,
+ // Size of the node
+ width: 100,
+ height: 100,
+ annotations: [
+ {
+ content: 'Clip WrapWithOverflow',
+ offset: { x: 0.5, y: 1.4 },
+ },
+ {
+ content:
+ 'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
+ style: { textOverflow: 'Clip', textWrapping: 'WrapWithOverflow' },
+ },
+ ],
+},
+
+{
+ // Position of the node
+ offsetX: 100,
+ offsetY: 300,
+ // Size of the node
+ width: 100,
+ height: 100,
+ annotations: [
+ {
+ content: 'Ellipsis Wrap',
+ offset: { x: 0.5, y: 1.4 },
+ },
+ {
+ content:
+ 'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text long annotation text long annotation text',
+ style: { textOverflow: 'Ellipsis', textWrapping: 'Wrap' },
+ },
+ ],
+},
+{
+ // Position of the node
+ offsetX: 300,
+ offsetY: 300,
+ // Size of the node
+ width: 100,
+ height: 100,
+ annotations: [
+ {
+ content: 'Ellipsis NoWrap',
+ offset: { x: 0.5, y: 1.4 },
+ },
+ {
+ content:
+ 'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
+ style: { textOverflow: 'Ellipsis', textWrapping: 'NoWrap' },
+ },
+ ],
+},
+{
+ // Position of the node
+ offsetX: 500,
+ offsetY: 300,
+ // Size of the node
+ width: 100,
+ height: 100,
+ annotations: [
+ {
+ content: 'Ellipsis WrapWithOverflow',
+ offset: { x: 0.5, y: 1.4 },
+ },
+ {
+ content:
+ 'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
+ style: { textOverflow: 'Ellipsis', textWrapping: 'WrapWithOverflow' },
+ },
+ ],
+},
+
+{
+ // Position of the node
+ offsetX: 100,
+ offsetY: 700,
+ // Size of the node
+ width: 100,
+ height: 100,
+ annotations: [
+ {
+ content: 'Wrap Wrap',
+ offset: { x: 0.5, y: 1.4 },
+ },
+ {
+ content:
+ 'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text long annotation text long annotation text',
+ style: { textOverflow: 'Wrap', textWrapping: 'Wrap' },
+ },
+ ],
+},
+{
+ // Position of the node
+ offsetX: 300,
+ offsetY: 500,
+ // Size of the node
+ width: 100,
+ height: 100,
+ annotations: [
+ {
+ content: 'Wrap NoWrap',
+ offset: { x: 0.5, y: 1.4 },
+ },
+ {
+ content:
+ 'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
+ style: { textOverflow: 'Wrap', textWrapping: 'NoWrap' },
+ },
+ ],
+},
+{
+ // Position of the node
+ offsetX: 500,
+ offsetY: 700,
+ // Size of the node
+ width: 100,
+ height: 100,
+ annotations: [
+ {
+ content: 'Wrap WrapWithOverflow',
+ offset: { x: 0.5, y: 1.4 },
+ },
+ {
+ content:
+ 'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
+ style: { textOverflow: 'Wrap', textWrapping: 'WrapWithOverflow' },
+ },
+ ],
}];
// initialize Diagram component
function App() {
diff --git a/ej2-react/code-snippet/diagram/annotations/es5Overflow-cs1/index.html b/ej2-react/code-snippet/diagram/annotations/es5Overflow-cs1/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/annotations/es5Overflow-cs1/index.html
+++ b/ej2-react/code-snippet/diagram/annotations/es5Overflow-cs1/index.html
@@ -2,7 +2,7 @@
- Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
(diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} created={() => {
- //Method to add labels at run time
- diagramInstance.addLabels(diagramInstance.nodes[0], annotation);
- diagramInstance.dataBind();
- }}/>);
+ const addAnnotation = () => {
+ //Method to add labels at run time
+ diagramInstance.addLabels(diagramInstance.nodes[0], annotation);
+ diagramInstance.dataBind();
+ };
+ return (
+
+ Add Annotation
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
+
+ );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render( (diagramInstance = diagram)}
- width={'100%'}
- height={'600px'}
- nodes={node}
- created = {
- () => {
- //Method to add labels at run time
- diagramInstance.addLabels(diagramInstance.nodes[0], annotation);
- diagramInstance.dataBind();
- }
- }
- />
- );
+ const addAnnotation = () => {
+ //Method to add labels at run time
+ diagramInstance.addLabels(diagramInstance.nodes[0], annotation);
+ diagramInstance.dataBind();
+ };
+ return (
+
+ Add Annotation
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
+
+ );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ );
+ return ();
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
(diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} created={() => {
- //Method to remove labels at run time
- diagramInstance.removeLabels(diagramInstance.nodes[0], diagramInstance.nodes[0].annotations[0]);
- }}/>);
+ const removeAnnotation = () => {
+ //Method to remove labels at run time
+ diagramInstance.removeLabels(diagramInstance.nodes[0], diagramInstance.nodes[0].annotations);
+ };
+ return (
+
+ remove Annotation
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
+
+ );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render( (diagramInstance = diagram)}
- width={'100%'}
- height={'600px'}
- nodes={node}
- created = {
- () => {
- //Method to remove labels at run time
- diagramInstance.removeLabels(diagramInstance.nodes[0], diagramInstance.nodes[0].annotations[0]);
- }
- }
- />
- );
+ const removeAnnotation = () => {
+ //Method to remove labels at run time
+ diagramInstance.removeLabels(diagramInstance.nodes[0], diagramInstance.nodes[0].annotations);
+ };
+ return (
+
+ remove Annotation
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
+
+ );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
(diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node} created={() => {
- diagramInstance.nodes[0].annotations[0].content = 'Updated Annotation';
- //Method to update the annotation at run time
- diagramInstance.dataBind();
- }}/>);
+ const updateAnnotation = () => {
+ //Method to update the annotation at run time
+ diagramInstance.nodes[0].annotations[0].content = 'Updated Annotation';
+ diagramInstance.dataBind();
+ };
+ return (
+
+ Update Annotation
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
+
+ );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render( (diagramInstance = diagram)}
- width={'100%'}
- height={'600px'}
- nodes={node}
- created = {
- () => {
- diagramInstance.nodes[0].annotations[0].content = 'Updated Annotation';
- //Method to update the annotation at run time
- diagramInstance.dataBind();
- }
- }
- />
- );
+ const updateAnnotation = () => {
+ //Method to update the annotation at run time
+ diagramInstance.nodes[0].annotations[0].content = 'Updated Annotation';
+ diagramInstance.dataBind();
+ };
+ return (
+
+ Update Annotation
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
+
+ );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
+ Update Offset
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+ Update Offset
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} nodes={node}/>
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ );
diff --git a/ej2-react/code-snippet/diagram/annotations/es5Wrap-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/annotations/es5Wrap-cs1/app/index.tsx
index b226bd418..b58941eac 100644
--- a/ej2-react/code-snippet/diagram/annotations/es5Wrap-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/annotations/es5Wrap-cs1/app/index.tsx
@@ -3,32 +3,67 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
- Diagram,
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node: NodeModel[] = [{
- id: 'node1',
- // Position of the node
- offsetX: 100,
- offsetY: 100,
- // Size of the node
- width: 100,
- height: 100,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white'
+ id: 'node1',
+ // Position of the node
+ offsetX: 100,
+ offsetY: 100,
+ // Size of the node
+ width: 100,
+ height: 100,
+ //Sets the annotation for the node
+ annotations: [
+ {
+ content: 'Annotation Text WrapWithOverflow',
+ // Sets the style for the text wrapping
+ style: {
+ textWrapping: 'WrapWithOverflow',
+ },
},
- //Sets the annotation for the node
- annotations: [{
- content: 'Annotation Text Wrapping',
- // Sets the style for the text wrapping
- style: {
- textWrapping: 'Wrap'
- }
- }]
-}];
+ ],
+},
+{
+ id: 'node2',
+ // Position of the node
+ offsetX: 300,
+ offsetY: 100,
+ // Size of the node
+ width: 100,
+ height: 100,
+ //Sets the annotation for the node
+ annotations: [
+ {
+ content: 'Annotation Text Wrap',
+ // Sets the style for the text wrapping
+ style: {
+ textWrapping: 'Wrap',
+ },
+ },
+ ],
+},
+{
+ id: 'node3',
+ // Position of the node
+ offsetX: 500,
+ offsetY: 100,
+ // Size of the node
+ width: 100,
+ height: 100,
+ //Sets the annotation for the node
+ annotations: [
+ {
+ content: 'Annotation Text NoWrap',
+ // Sets the style for the text wrapping
+ style: {
+ textWrapping: 'NoWrap',
+ },
+ },
+ ],
+},];
// initialize Diagram component
function App() {
return (
diff --git a/ej2-react/code-snippet/diagram/annotations/es5Wrap-cs1/index.html b/ej2-react/code-snippet/diagram/annotations/es5Wrap-cs1/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/annotations/es5Wrap-cs1/index.html
+++ b/ej2-react/code-snippet/diagram/annotations/es5Wrap-cs1/index.html
@@ -2,7 +2,7 @@
- Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
'
}]
}];
diff --git a/ej2-react/code-snippet/diagram/annotations/es5labeltemplate-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/annotations/es5labeltemplate-cs1/app/index.tsx
index 16a8b654f..7d3d2c2bd 100644
--- a/ej2-react/code-snippet/diagram/annotations/es5labeltemplate-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/annotations/es5labeltemplate-cs1/app/index.tsx
@@ -4,7 +4,6 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
- Diagram,
DiagramComponent,
NodeModel,
ConnectorModel
@@ -18,10 +17,6 @@ let node: NodeModel[] = [{
// Size of the node
width: 100,
height: 100,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white'
- },
// Sets the annotation for the Node
annotations: [{
// Set an template for annotation
@@ -44,7 +39,7 @@ let connector: ConnectorModel[] = [{
// Sets the Annotation for the Connector
annotations: [{
// Set an template for annotation
- height: 60, width: 100, offset: 0.5,
+ height: 60, width: 100,
template: '
'
}]
}];
diff --git a/ej2-react/code-snippet/diagram/annotations/es5labeltemplate-cs1/index.html b/ej2-react/code-snippet/diagram/annotations/es5labeltemplate-cs1/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/annotations/es5labeltemplate-cs1/index.html
+++ b/ej2-react/code-snippet/diagram/annotations/es5labeltemplate-cs1/index.html
@@ -2,7 +2,7 @@
- Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
- Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
-
- );
+ return (
+
+
+ );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
- Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
- Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
-
+ return (
+ );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
diff --git a/ej2-react/code-snippet/diagram/bpmnShapes/es5Message-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/bpmnShapes/es5Message-cs1/app/index.tsx
index 91b973bc9..6018dc7b1 100644
--- a/ej2-react/code-snippet/diagram/bpmnShapes/es5Message-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/bpmnShapes/es5Message-cs1/app/index.tsx
@@ -2,39 +2,63 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
-import {
- Diagram,
- DiagramComponent,
- Inject,
- NodeModel,
- ConnectorModel,
- BpmnShape,
- BpmnSubProcessModel,
- BpmnShapeModel,
- BpmnDiagrams,
- BpmnActivityModel,
- BpmnFlowModel,
- BpmnGatewayModel
-} from "@syncfusion/ej2-react-diagrams";
-// A node is created and stored in nodes array.
-let connector: ConnectorModel[] = [{
+import { DiagramComponent, Inject, ConnectorModel, BpmnDiagrams, } from "@syncfusion/ej2-react-diagrams";
+
+let connector: ConnectorModel[] = [
+ {
+
+ sourcePoint: {
+ x: 100,
+ y: 100
+ },
+ targetPoint: {
+ x: 300,
+ y: 100
+ },
+ type: 'Orthogonal',
+ //Sets type as Bpmn, flow as Message, and message as Default
+ shape: {
+ type: 'Bpmn',
+ flow: 'Message',
+ message: 'Default'
+ },
+ },
+ {
+
+ sourcePoint: {
+ x: 100,
+ y: 200
+ },
+ targetPoint: {
+ x: 300,
+ y: 200
+ },
+ type: 'Orthogonal',
+ //Sets type as Bpmn, flow as Message, and message as NonInitiatingMessage
+ shape: {
+ type: 'Bpmn',
+ flow: 'Message',
+ message: 'NonInitiatingMessage'
+ },
+ },
+ {
// Position of the node
sourcePoint: {
- x: 100,
- y: 200
+ x: 100,
+ y: 300
},
targetPoint: {
- x: 300,
- y: 200
+ x: 300,
+ y: 300
},
type: 'Orthogonal',
//Sets type as Bpmn, flow as Message and message as InitiatingMessage
shape: {
- type: 'Bpmn',
- flow: 'Message',
- message: 'InitiatingMessage'
+ type: 'Bpmn',
+ flow: 'Message',
+ message: 'InitiatingMessage'
},
-}];
+ }];
// initialize diagram component
function App() {
return (
@@ -52,5 +76,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
-
+ return (
+ );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
diff --git a/ej2-react/code-snippet/diagram/bpmnShapes/es5Sequence-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/bpmnShapes/es5Sequence-cs1/app/index.tsx
index 43d158212..bd1445c62 100644
--- a/ej2-react/code-snippet/diagram/bpmnShapes/es5Sequence-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/bpmnShapes/es5Sequence-cs1/app/index.tsx
@@ -2,22 +2,29 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
-import {
- Diagram,
- DiagramComponent,
- Inject,
- NodeModel,
- ConnectorModel,
- BpmnShape,
- BpmnSubProcessModel,
- BpmnShapeModel,
- BpmnDiagrams,
- BpmnActivityModel,
- BpmnFlowModel,
- BpmnGatewayModel
+import {DiagramComponent,Inject,ConnectorModel,BpmnDiagrams,
} from "@syncfusion/ej2-react-diagrams";
-// A node is created and stored in nodes array.
-let connector: ConnectorModel[] = [{
+
+let connector:ConnectorModel[] = [
+ {
+ // Position of the node
+ sourcePoint: {
+ x: 100,
+ y: 100
+ },
+ targetPoint: {
+ x: 300,
+ y: 100
+ },
+ type: 'Orthogonal',
+ //Sets type as Bpmn, flow as Sequence, and sequence as Default
+ shape: {
+ type: 'Bpmn',
+ flow: 'Sequence',
+ sequence: 'Default'
+ },
+},
+{
// Position of the node
sourcePoint: {
x: 100,
@@ -28,13 +35,31 @@ let connector: ConnectorModel[] = [{
y: 200
},
type: 'Orthogonal',
- //Sets type as Bpmn, flow as Sequence and sequence as Conditional
+ //Sets type as Bpmn, flow as Sequence, and sequence as Normal
shape: {
type: 'Bpmn',
flow: 'Sequence',
- sequence: 'Conditional'
+ sequence: 'Normal'
},
-}];
+},
+ {
+ // Position of the node
+ sourcePoint: {
+ x: 100,
+ y: 300
+ },
+ targetPoint: {
+ x: 300,
+ y: 300
+ },
+ type: 'Orthogonal',
+ //Sets type as Bpmn, flow as Sequence and sequence as Conditional
+ shape: {
+ type: 'Bpmn',
+ flow: 'Sequence',
+ sequence: 'Conditional'
+ },
+ }];
// initialize diagram component
function App() {
return (
diff --git a/ej2-react/code-snippet/diagram/bpmnShapes/es5Sequence-cs1/index.html b/ej2-react/code-snippet/diagram/bpmnShapes/es5Sequence-cs1/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/bpmnShapes/es5Sequence-cs1/index.html
+++ b/ej2-react/code-snippet/diagram/bpmnShapes/es5Sequence-cs1/index.html
@@ -2,7 +2,7 @@
- Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
- Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
+
+ {
+ symbol.width = 100;
+ symbol.height = 100;
+ }}
+ //Sets the margin of the dragging helper relative to the mouse cursor
+ symbolMargin={{
+ left: 12,
+ right: 12,
+ top: 12,
+ bottom: 12,
+ }}
+ getSymbolInfo={(symbol) => {
+ //Defines the symbol description
+ return { fit: true, description: { text: symbol.id } };
+ }}
+ />
+
+
+
+
+
+ {
+ symbol.width = 100;
+ symbol.height = 100;
+ }}
+ //Sets the margin of the dragging helper relative to the mouse cursor
+ symbolMargin={{
+ left: 12,
+ right: 12,
+ top: 12,
+ bottom: 12,
+ }}
+ getSymbolInfo={(symbol) => {
+ //Defines the symbol description
+ return { fit: true, description: { text: symbol.id } };
+ }}
+ />
+
+
+
+
Syncfusion® React Chart-DataLabel
+
+ (diagramInstance = diagram)}
+ // Add node
+ nodes={nodes}
+ >
+
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+ (diagramInstance = diagram)}
+ // Add node
+ nodes={nodes}
+ >
+
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+ (diagramInstance = diagram)}
+ // Add node
+ nodes={nodes}>
+
+
);
+}
+
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+
+
+ (diagramInstance = diagram)}
+ // Add node
+ nodes={nodes}>
+
+
+
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)}
+ width={'650px'}
+ height={'350px'}
+ nodes={node}
+ created={() => {
+ let selArray = [];
+ selArray.push(
+ diagramInstance.nodes[0],
+ diagramInstance.nodes[1],
+ diagramInstance.nodes[2]
+ );
+ //Selects the nodes
+ diagramInstance.select(selArray);
+ //Sets direction as left
+ diagramInstance.align(
+ 'Left',
+ diagramInstance.selectedItems.nodes,
+ 'Selector'
+ );
+ diagramInstance.dataBind();
+ }}
+ />
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)}
+ width={'650px'}
+ height={'350px'}
+ nodes={node}
+ created={() => {
+ let selArray:any = [];
+ selArray.push(
+ diagramInstance.nodes[0],
+ diagramInstance.nodes[1],
+ diagramInstance.nodes[2]
+ );
+ //Selects the nodes
+ diagramInstance.select(selArray);
+ //Sets direction as left
+ diagramInstance.align(
+ 'Left',
+ diagramInstance.selectedItems.nodes,
+ 'Selector'
+ );
+ diagramInstance.dataBind();
+ }}
+ />
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node}
+ tool={ DiagramTools.ZoomPan}
+ scrollSettings={{
+ //Sets the scroll limit
+ scrollLimit: 'Infinity',
+ }}
+ />
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node}
+ tool={ DiagramTools.ZoomPan}
+ scrollSettings={{
+ //Sets the scroll limit
+ scrollLimit: 'Infinity',
+ }}
+ />
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node}
+ tool={ DiagramTools.ZoomPan}
+ scrollSettings={{
+ //Sets the scroll limit
+ scrollLimit: 'Infinity',
+ }}
+ />
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node}
+ tool={ DiagramTools.ZoomPan}
+ scrollSettings={{
+ //Sets the scroll limit
+ scrollLimit: 'Infinity',
+ }}
+ />
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)}
+ width={'650px'}
+ height={'350px'}
+ nodes={node}
+ commandManager={{
+ commands: [
+ {
+ name: 'clone',
+ canExecute: function () {
+ return diagramInstance.selectedItems.nodes.length > 0;
+ },
+ execute: function () {
+ diagramInstance.copy();
+ diagramInstance.paste();
+ },
+ gesture: {
+ // Press G to clone node
+ key: Keys.G,
+ keyModifiers: null,
+ },
+ },
+ {
+ name: 'color',
+ canExecute: function () {
+ return diagramInstance.selectedItems.nodes.length > 0;
+ },
+ execute: function () {
+ const node = diagramInstance.selectedItems.nodes[0];
+ node.style.fill = node.style.fill === '#64abbb' ? 'yellow' : '#64abbb';
+ diagramInstance.dataBind();
+ },
+ gesture: {
+ // Press Shift+G or Alt+G to change node color
+ key: Keys.G,
+ keyModifiers: KeyModifiers.Shift | KeyModifiers.Alt,
+ },
+ },
+ ],
+ }}
+ />
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)}
+ width={'650px'}
+ height={'350px'}
+ nodes={node}
+ commandManager={{
+ commands: [
+ {
+ name: 'clone',
+ canExecute: function () {
+ return diagramInstance.selectedItems.nodes.length > 0;
+ },
+ execute: function () {
+ diagramInstance.copy();
+ diagramInstance.paste();
+ },
+ gesture: {
+ // Press G to clone node
+ key: Keys.G,
+ keyModifiers: null,
+ },
+ },
+ {
+ name: 'color',
+ canExecute: function () {
+ return diagramInstance.selectedItems.nodes.length > 0;
+ },
+ execute: function () {
+ const node = diagramInstance.selectedItems.nodes[0];
+ node.style.fill = node.style.fill === '#64abbb' ? 'yellow' : '#64abbb';
+ diagramInstance.dataBind();
+ },
+ gesture: {
+ // Press Shift+G or Alt+G to change node color
+ key: Keys.G,
+ keyModifiers: KeyModifiers.Shift | KeyModifiers.Alt,
+ },
+ },
+ ],
+ }}
+ />
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)}
+ width={'650px'}
+ height={'350px'}
+ nodes={node}
+ created={() => {
+ let selArray = []; selArray.push(diagramInstance.nodes[0], diagramInstance.nodes[1], diagramInstance.nodes[2]);
+ //Selects the nodes
+ diagramInstance.select(selArray);
+ //Distributes space between the nodes
+ diagramInstance.distribute('RightToLeft', diagramInstance.selectedItems.nodes);
+ }}
+ />
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)}
+ width={'650px'}
+ height={'350px'}
+ nodes={node}
+ created={() => {
+ let selArray: NodeModel[] = []; selArray.push(diagramInstance.nodes[0], diagramInstance.nodes[1], diagramInstance.nodes[2]);
+ //Selects the nodes
+ diagramInstance.select(selArray);
+ //Distributes space between the nodes
+ diagramInstance.distribute('RightToLeft', diagramInstance.selectedItems.nodes);
+ }}
+ />
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} created={() => {
- selArray.push(diagramInstance.nodes[2]);
- //Selects the nodes
- diagramInstance.select(selArray);
- //Brings to front
- diagramInstance.bringToFront();
- }}/>);
+ return (
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} />
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render( (diagramInstance = diagram)}
- width={'650px'}
- height={'350px'}
- nodes={node}
- created={() => {
- selArray.push(diagramInstance.nodes[2]);
- //Selects the nodes
- diagramInstance.select(selArray);
- //Brings to front
- diagramInstance.bringToFront();
- }}
- />
- );
+ return (
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} />
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
(diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} connectors={connector} created={() => {
- diagramInstance.select([
- diagramInstance.nodes[0],
- diagramInstance.nodes[1],
- diagramInstance.connectors[0],
- ]);
- //copies the selected nodes
- diagramInstance.copy();
- //pastes the copied objects
- diagramInstance.paste(diagramInstance.copy());
- }}/>);
+ return (
+
+
+
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node}/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render( (diagramInstance = diagram)}
- width={'650px'}
- height={'350px'}
- nodes={node}
- connectors={connector}
- created={() => {
- diagramInstance.select([
- diagramInstance.nodes[0],
- diagramInstance.nodes[1],
- diagramInstance.connectors[0],
- ]);
- //copies the selected nodes
- diagramInstance.copy();
- //pastes the copied objects
- diagramInstance.paste(diagramInstance.copy());
- }}
- />
- );
+ offsetX: 140,
+ offsetY: 200,
+ annotations: [{ content: 'Node2' }],
+ },
+ {
+ id: 'node3',
+ width: 200,
+ height: 30,
+ offsetX: 140,
+ offsetY: 300,
+ annotations: [{ content: 'Node3' }],
+ },];
+const cut = function(){
+ diagramInstance.cut();
}
-const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(
+
+
+
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node}/>
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
(diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={nodes} connectors={connector} created={() => {
- //Selects the diagram
- diagramInstance.selectAll();
- //Groups the selected elements.
- diagramInstance.group();
- }}/>);
+ return (
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={nodes} connectors={connector} />
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render( (diagramInstance = diagram)}
- width={'650px'}
- height={'350px'}
- nodes={nodes}
- connectors={connector}
- created={() => {
- //Selects the diagram
- diagramInstance.selectAll();
- //Groups the selected elements.
- diagramInstance.group();
- }}
- />
- );
+ return (
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={nodes} connectors={connector} />
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
(diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} created={() => {
- selArray.push(diagramInstance.nodes[2]);
- //Selects the nodes
- diagramInstance.select(selArray);
- //Brings to front
- diagramInstance.moveForward();
- }}/>);
+ return (
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} />
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render( (diagramInstance = diagram)}
- width={'650px'}
- height={'350px'}
- nodes={node}
- created={() => {
- selArray.push(diagramInstance.nodes[2]);
- //Selects the nodes
- diagramInstance.select(selArray);
- //Brings to front
- diagramInstance.moveForward();
- }}
- />
- );
+ return (
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} />
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
(diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} created={() => {
- selArray.push(diagramInstance.nodes[2]);
- //Selects the nodes
- diagramInstance.select(selArray);
- //Brings to front
- diagramInstance.sendToBack();
- }}/>);
+ return (
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} />
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render( (diagramInstance = diagram)}
- width={'650px'}
- height={'350px'}
- nodes={node}
- created={() => {
- selArray.push(diagramInstance.nodes[2]);
- //Selects the nodes
- diagramInstance.select(selArray);
- //Brings to front
- diagramInstance.sendToBack();
- }}
- />
- );
+ return (
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} />
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
(diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} created={() => {
- selArray.push(diagramInstance.nodes[2]);
- //Selects the nodes
- diagramInstance.select(selArray);
- //Brings to front
- diagramInstance.sendBackward();
- }}/>);
+ return (
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} />
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render( (diagramInstance = diagram)}
- width={'650px'}
- height={'350px'}
- nodes={node}
- created={() => {
- selArray.push(diagramInstance.nodes[2]);
- //Selects the nodes
- diagramInstance.select(selArray);
- //Brings to front
- diagramInstance.sendBackward();
- }}
- />
- );
+ return (
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} />
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)} width={'1250px'} height={'590px'}
+ layout={{
+ type: 'OrganizationalChart',
+ margin: { top: 20 },
+ getLayoutInfo: (node, tree) => {
+ if (!tree.hasSubTree) {
+ tree.orientation = 'Vertical';
+ tree.type = 'Alternate';
+ }
+ },
+ }}
+ dataSourceSettings={{
+ id: 'Id',
+ parentId: 'ReportingPerson',
+ dataSource: items,
+ }
+ }
+ getNodeDefaults={(obj) => {
+ obj.height = 50;
+ obj.backgroundColor = 'lightgrey';
+ obj.style = { fill: 'transparent', strokeWidth: 2 };
+ return obj;
+ }
+ }
+ getConnectorDefaults={(connector) => {
+ connector.targetDecorator.shape = 'None';
+ connector.type = 'Orthogonal';
+ return connector;
+ }
+ }
+ >
+
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+ (diagramInstance = diagram)} width={'1250px'} height={'590px'}
+ layout={{
+ type: 'OrganizationalChart',
+ margin: { top: 20 },
+ getLayoutInfo: (node:Node, tree:TreeInfo) => {
+ if (!tree.hasSubTree) {
+ tree.orientation = 'Vertical';
+ tree.type = 'Alternate';
+ }
+ },
+ }}
+ dataSourceSettings={{
+ id: 'Id',
+ parentId: 'ReportingPerson',
+ dataSource: items,
+ }
+ }
+ getNodeDefaults={(obj: NodeModel) => {
+ obj.height = 50;
+ obj.backgroundColor = 'lightgrey';
+ obj.style = { fill: 'transparent', strokeWidth: 2 };
+ return obj;
+ }
+ }
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.targetDecorator.shape = 'None';
+ connector.type = 'Orthogonal';
+ return connector;
+ }
+ }
+ >
+
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)}
+ width={'650px'}
+ height={'350px'}
+ nodes={node}
+ commandManager={{
+ commands: [
+ {
+ //Preventing default cut command
+ name: 'cut',
+ canExecute: function () {
+ return false;
+ },
+ execute: null,
+ gesture: {
+ key: Keys.X,
+ keyModifiers: KeyModifiers.Control,
+ },
+ },
+ {
+ //Preventing default delete command
+ name: 'delete',
+ canExecute: function () {
+ return false;
+ },
+ execute: null,
+ gesture: {
+ key: Keys.Delete,
+ },
+ },
+ {
+ //Modifying copy command to clone node
+ name: 'clone',
+ canExecute: function () {
+ let execute = diagramInstance.selectedItems.nodes.length > 0;
+ return execute;
+ },
+ execute: function () {
+ diagramInstance.copy();
+ diagramInstance.paste();
+ },
+ gesture: {
+ //Press CTRL+C to clone node
+ key: Keys.C,
+ keyModifiers: KeyModifiers.Control,
+ },
+ },
+ ],
+ }}
+ />
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)}
+ width={'650px'}
+ height={'350px'}
+ nodes={node}
+ commandManager={{
+ commands: [
+ {
+ //Preventing default cut command
+ name: 'cut',
+ canExecute: function () {
+ return false;
+ },
+ execute: null,
+ gesture: {
+ key: Keys.X,
+ keyModifiers: KeyModifiers.Control,
+ },
+ },
+ {
+ //Preventing default delete command
+ name: 'delete',
+ canExecute: function () {
+ return false;
+ },
+ execute: null,
+ gesture: {
+ key: Keys.Delete,
+ },
+ },
+ {
+ //Modifying copy command to clone node
+ name: 'clone',
+ canExecute: function () {
+ let execute = diagramInstance.selectedItems.nodes.length > 0;
+ return execute;
+ },
+ execute: function () {
+ diagramInstance.copy();
+ diagramInstance.paste();
+ },
+ gesture: {
+ //Press CTRL+C to clone node
+ key: Keys.C,
+ keyModifiers: KeyModifiers.Control,
+ },
+ },
+ ],
+ }}
+ />
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+
+
+
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node}created={() => {
+ //Selects the diagram
+ diagramInstance.selectAll();
+ }} />
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+
+
+
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node}created={() => {
+ //Selects the diagram
+ diagramInstance.selectAll();
+ }} />
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node}
+ />
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+ (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node}
+ />
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+ Size option
+ (sizeInstance = size)}>
+ Width
+ Height
+ Size
+
+ (diagramInstance = diagram)}
+ width={'650px'}
+ height={'350px'}
+ nodes={node}
+ />
+ );
+
+}
+
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+ Size option
+ (sizeInstance = size)}>
+ Width
+ Height
+ Size
+
+ (diagramInstance = diagram)}
+ width={'650px'}
+ height={'350px'}
+ nodes={node}
+ />
+ );
+
+}
+
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ {
+ node.height = 100;
+ node.width = 100;
+ node.shape = { type: 'Basic', shape: 'Rectangle' };
+ node.style.fill = '#6BA5D7';
+ node.style.strokeColor = 'white';
+ return node;
+ }}
+ getConnectorDefaults={(connector) => {
+ connector.constraints =
+ ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
+ }} />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( {
+ node.height = 100;
+ node.width = 100;
+ node.shape = { type: 'Basic', shape: 'Rectangle' };
+ node.style.fill = '#6BA5D7';
+ node.style.strokeColor = 'white';
+ return node;
+ }}
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.constraints =
+ ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
+ }} />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ {
+ let element = 'Diagram';
+ if (args.actualObject instanceof Node) {
+ element = 'Node';
+ } else if (args.actualObject instanceof Connector) {
+ element = 'Connector';
+ }
+ alert(element + ' Clicked');
+ }}
+ />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( {
+ let element = 'Diagram';
+ if (args.actualObject instanceof Node) {
+ element = 'Node';
+ } else if (args.actualObject instanceof Connector) {
+ element = 'Connector';
+ }
+ alert(element + ' Clicked');
+ }}
+ />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+ Add
+ Remove
+ (diagramInstance = diagram)}
+ height={'600px'} connectors={connectors}
+ collectionChange={(args) => {
+ console.log('collectionChange');
+ }
+ }
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+ Add
+ Remove
+ (diagramInstance = diagram)}
+ height={'600px'} connectors={connectors}
+ collectionChange={(args: ICollectionChangeEventArgs) => {
+ console.log('collectionChange');
+ }
+ }
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ {
+ return ( {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
- }}/>);
+ }} />);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render( {
- node.height = 100;
- node.width = 100;
- node.style.fill = '#6BA5D7';
- node.style.strokeColor = 'white';
- return node;
+ width={
+ '100%'
+ }
+ height={
+ '600px'
+ }
+ nodes={
+ nodes
+ }
+ connectors={
+ connectors
+ }
+ // Defines the default properties for the node
+ getNodeDefaults={
+ (node: NodeModel) => {
+ node.height = 100;
+ node.width = 100;
+ node.style.fill = '#6BA5D7';
+ node.style.strokeColor = 'white';
+ return node;
+ }
}
- }
/>
)
}
diff --git a/ej2-react/code-snippet/diagram/connectors/es5ConnectNode-cs1/index.html b/ej2-react/code-snippet/diagram/connectors/es5ConnectNode-cs1/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/connectors/es5ConnectNode-cs1/index.html
+++ b/ej2-react/code-snippet/diagram/connectors/es5ConnectNode-cs1/index.html
@@ -2,7 +2,7 @@
- Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
{
- node.height = 100;
- node.width = 100;
- node.shape = { type: 'Basic', shape: 'Rectangle' };
- node.style.fill = '#6BA5D7';
- node.style.strokeColor = 'white';
- return node;
- }} getConnectorDefaults={(connector) => {
- connector.constraints =
- ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
- }}/>);
+ node.height = 100;
+ node.width = 100;
+ node.shape = { type: 'Basic', shape: 'Rectangle' };
+ node.style.fill = '#6BA5D7';
+ node.style.strokeColor = 'white';
+ return node;
+ }} getConnectorDefaults={(connector) => {
+ connector.constraints =
+ ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
+ }} />);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
}
diff --git a/ej2-react/code-snippet/diagram/connectors/es5ConnectNode-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/connectors/es5ConnectNode-cs3/app/index.tsx
index e258f8ff4..59f7fcaeb 100644
--- a/ej2-react/code-snippet/diagram/connectors/es5ConnectNode-cs3/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/connectors/es5ConnectNode-cs3/app/index.tsx
@@ -3,34 +3,32 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
- Diagram,
DiagramComponent,
ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
- // Name of the connector
- id: "connector1",
- style: {
- strokeColor: '#6BA5D7',
- fill: '#6BA5D7',
- strokeWidth: 2
- },
- targetDecorator: {
- style: {
- fill: '#6BA5D7',
- strokeColor: '#6BA5D7'
- }
- },
- sourcePoint: {
- x: 100,
- y: 100
- },
- targetPoint: {
- x: 200,
- y: 200
- },
- // Flip the connector in horizontal direction
- flip:"Horizontal"
+ id: 'connector1',
+ //Flip
+ flip: 'Horizontal',
+ annotations: [{ content: 'Horizontal Flip' }],
+ sourcePoint: { x: 100, y: 100 },
+ targetPoint: { x: 200, y: 200 },
+},
+{
+ id: 'connector2',
+ //Flip
+ flip: 'Vertical',
+ annotations: [{ content: 'Vertical Flip' }],
+ sourcePoint: { x: 300, y: 100 },
+ targetPoint: { x: 400, y: 200 },
+},
+{
+ id: 'connector3',
+ //Flip
+ flip: 'Both',
+ annotations: [{ content: 'Both Flip' }],
+ sourcePoint: { x: 500, y: 100 },
+ targetPoint: { x: 600, y: 200 },
}];
function App() {
return (
diff --git a/ej2-react/code-snippet/diagram/connectors/es5ConnectNode-cs3/index.html b/ej2-react/code-snippet/diagram/connectors/es5ConnectNode-cs3/index.html
index d2f7f168b..eb0eab232 100644
--- a/ej2-react/code-snippet/diagram/connectors/es5ConnectNode-cs3/index.html
+++ b/ej2-react/code-snippet/diagram/connectors/es5ConnectNode-cs3/index.html
@@ -2,7 +2,7 @@
- Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
{
+ if (args.state === 'Changed') {
+ console.log('connectionChange');
+ //Customize
+ }
+ }
+ }
+ />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( {
+ if (args.state === 'Changed') {
+ console.log('connectionChange');
+ //Customize
+ }
+ }
+ }
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ {
@@ -60,5 +44,4 @@ function App() {
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
+ handleCloneClick
+ (diagramInstance = diagram)}
+ width={'100%'}
+ height={'600px'}
+ connectors={connectors}
+ />
+
+ );
+};
+// Render the App component
+const root = ReactDOM.createRoot(document.getElementById('diagram') );
+root.render(
+ handleCloneClick
+ (diagramInstance = diagram)}
+ width={'100%'}
+ height={'600px'}
+ connectors={connectors}
+ />
+
+ );
+};
+// Render the App component
+const root = ReactDOM.createRoot(document.getElementById('diagram') );
+root.render(Syncfusion® React Chart-DataLabel
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)}
+ created={() => {
+ diagramInstance.zoomTo({
+ type:'ZoomIn',
+ ZoomFactor:2,
+ focusPoint:{x:0,y:0.5}
+ });
+ diagramInstance.fitToPage();
+ }}
+
+ />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)}
+ created={() => {
+ diagramInstance.zoomTo({
+ type:'ZoomIn',
+ ZoomFactor:2,
+ focusPoint:{x:0,y:0.5}
+ });
+ diagramInstance.fitToPage();
+ }}
+
+ />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion® React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
+ Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion® React Chart-DataLabel
+ Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
{
- obj.style.strokeColor = '#6BA5D7';
- obj.style.fill = '#6BA5D7';
- obj.style.strokeWidth = 2;
- obj.targetDecorator.style.fill = '#6BA5D7';
- obj.targetDecorator.style.strokeColor = '#6BA5D7';
- return obj;
- }} getNodeDefaults={(node) => {
+ return ( {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
@@ -87,10 +80,9 @@ function App() {
return node;
}} nodes={node1} connectors={connectors} height={'600px'}
// Enables the bridging constraints for the connector
- constraints={DiagramConstraints.Default | DiagramConstraints.Bridging} connectors={connectors}>
+ constraints={DiagramConstraints.Default | DiagramConstraints.Bridging}>
{' '}
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render( {
- obj.style.strokeColor = '#6BA5D7';
- obj.style.fill = '#6BA5D7';
- obj.style.strokeWidth = 2;
- obj.targetDecorator.style.fill = '#6BA5D7';
- obj.targetDecorator.style.strokeColor = '#6BA5D7';
- return obj;
- }}
getNodeDefaults={(node: NodeModel) => {
node.height = 100;
node.width = 100;
@@ -106,7 +95,6 @@ function App() {
height={'600px'}
// Enables the bridging constraints for the connector
constraints={DiagramConstraints.Default | DiagramConstraints.Bridging}
- connectors={connectors}
>
@@ -114,7 +102,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
}
diff --git a/ej2-react/code-snippet/diagram/connectors/es5ConnectorsConstraints-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/connectors/es5ConnectorsConstraints-cs1/app/index.tsx
index 49b87b3ea..7982d11f8 100644
--- a/ej2-react/code-snippet/diagram/connectors/es5ConnectorsConstraints-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/connectors/es5ConnectorsConstraints-cs1/app/index.tsx
@@ -3,37 +3,68 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
- Diagram,
DiagramComponent,
- DiagramConstraints,
ConnectorConstraints,
ConnectorModel
} from "@syncfusion/ej2-react-diagrams";
let connectors: ConnectorModel[] = [{
- id: "connector1",
- // Disables selection constraints
+ id: 'connector1',
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Select,
+ annotations: [{ content: 'Connector Selection disabled' }],
type: 'Straight',
- style: {
- strokeColor: '#6BA5D7',
- fill: '#6BA5D7',
- strokeWidth: 2
+ sourcePoint: {
+ x: 100,
+ y: 100,
+ },
+ targetPoint: {
+ x: 200,
+ y: 200,
+ },
+ },
+ {
+ id: 'connector2',
+ constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Drag,
+ annotations: [{ content: 'Connector Drag disabled' }],
+ type: 'Straight',
+ sourcePoint: {
+ x: 300,
+ y: 100,
+ },
+ targetPoint: {
+ x: 400,
+ y: 200,
},
- targetDecorator: {
- style: {
- fill: '#6BA5D7',
- strokeColor: '#6BA5D7'
- }
+ },
+ {
+ id: 'connector3',
+ constraints:
+ ConnectorConstraints.Default & ~ConnectorConstraints.DragSourceEnd,
+ annotations: [{ content: 'Connector Source end disabled' }],
+ type: 'Straight',
+ sourcePoint: {
+ x: 500,
+ y: 100,
},
+ targetPoint: {
+ x: 600,
+ y: 200,
+ },
+ },
+ {
+ id: 'connector4',
+ constraints:
+ ConnectorConstraints.Default & ~ConnectorConstraints.DragTargetEnd,
+ annotations: [{ content: 'Connector Target end disabled' }],
+ type: 'Straight',
sourcePoint: {
- x: 100,
- y: 100
+ x: 700,
+ y: 100,
},
targetPoint: {
- x: 200,
- y: 200
- }
-}];
+ x: 800,
+ y: 200,
+ },
+ }];
function App() {
return (
- Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
+ return ( {
+ node.height = 100;
+ node.width = 100;
+ node.style.fill = '#6BA5D7';
+ node.style.strokeColor = 'white';
+ return node;
+ }} nodes={nodes} connectors={connectors} height={'600px'}
+ >
+ );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render( {
+ node.height = 100;
+ node.width = 100;
+ node.style.fill = '#6BA5D7';
+ node.style.strokeColor = 'white';
+ return node;
+ }} nodes={nodes} connectors={connectors} height={'600px'}
+ >
+ );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
}
diff --git a/ej2-react/code-snippet/diagram/connectors/es5ConnectorsOrtho-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/connectors/es5ConnectorsOrtho-cs1/app/index.tsx
index 2d550557d..9256fbc96 100644
--- a/ej2-react/code-snippet/diagram/connectors/es5ConnectorsOrtho-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/connectors/es5ConnectorsOrtho-cs1/app/index.tsx
@@ -1,42 +1,51 @@
-{% raw %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
DiagramComponent,
ConnectorModel,
- OrthogonalSegmentModel,
ConnectorConstraints,
ConnectorEditing
} from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
-let connectors: ConnectorModel[] = [{
- id: "connector1",
- style: {
- strokeColor: '#6BA5D7',
- fill: '#6BA5D7',
- strokeWidth: 2
- },
- targetDecorator: {
- style: {
- fill: '#6BA5D7',
- strokeColor: '#6BA5D7'
- }
- },
- sourcePoint: {
- x: 100,
- y: 100
- },
- targetPoint: {
- x: 200,
- y: 200
- },
- type: 'Orthogonal',
- maxSegmentThumb: 3,
- constraints: ConnectorConstraints.Default & ~ConnectorConstraints.DragSegmentThumb,
- segments: [{ type: 'Orthogonal', direction: 'Bottom', length: 50 }],
-
-}];
+let connectors: ConnectorModel[] = [
+ {
+ id: "connector2",
+ type: 'Orthogonal',
+ // Defines multile segemnts for the connectors
+ segments: [
+ {
+ type: 'Orthogonal',
+ direction: 'Bottom',
+ length: 150,
+ },
+ {
+ type: 'Orthogonal',
+ direction: 'Right',
+ length: 150,
+ },
+ {
+ type: 'Orthogonal',
+ direction: 'Top',
+ length: 100,
+ },
+ {
+ type: 'Orthogonal',
+ direction: 'Left',
+ length: 100,
+ },
+ ],
+ sourcePoint: {
+ x: 300,
+ y: 100
+ },
+ targetPoint: {
+ x: 400,
+ y: 200
+ },
+ constraints: ConnectorConstraints.Default |ConnectorConstraints.DragSegmentThumb,
+ }
+];
function App() {
return (
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion® React Chart-DataLabel
+ Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
{
+ return ( {
connector.constraints =
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
(diagramInstance = diagram)} width={'100%'} height={'600px'} created={() => {
- // Adds to the Diagram
- diagramInstance.add(connectors[0]);
- // Remove from the diagram
- diagramInstance.remove(connectors[0]);
- }}/>);
+ function App() {
+ const add = () => {
+ diagramInstance.add(connectors[0])
+ }
+ const remove = () => {
+ diagramInstance.remove(connectors[0])
+ }
+
+ return (
+
+ Add
+ Remove
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} created={() => {
+ // Adds to the Diagram
+ diagramInstance.add(connectors[0]);
+ // Remove from the diagram
+ diagramInstance.remove(connectors[0]);
+ }}/>
+
+ );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render( (diagramInstance = diagram)}
- width={'100%'}
- height={'600px'}
- created={() => {
- // Adds to the Diagram
- diagramInstance.add(connectors[0]);
- // Remove from the diagram
- diagramInstance.remove(connectors[0]);
- }}
- />
- );
+
+ Add
+ Remove
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} created={() => {
+ // Adds to the Diagram
+ diagramInstance.add(connectors[0]);
+ // Remove from the diagram
+ diagramInstance.remove(connectors[0]);
+ }}/>
+
+ );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
(diagramInstance = diagram)} width={900} height={900} nodes={nodes} connectors={connectors} getNodeDefaults={(node) => {
- node.height = 100;
- node.width = 100;
- node.style.fill = '#6BA5D7';
- node.style.strokeColor = 'white';
- return node;
- }}/>);
+ // Update the target portID at the run time
+ const handleCloneClick = () => {
+ diagramInstance.connectors[0].sourcePortID = 'port4';
+ diagramInstance.connectors[0].targetPortID = 'port2';
+ }
+ return (
+
+ update
+ (diagramInstance = diagram)} width={900} height={900} nodes={nodes} connectors={connectors} getNodeDefaults={(node) => {
+ node.height = 100;
+ node.width = 100;
+ node.style.fill = '#6BA5D7';
+ node.style.strokeColor = 'white';
+ return node;
+ }}/>
+
+ );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render( (diagramInstance = diagram)}
- width={900}
- height={900}
- nodes={nodes}
- connectors={connectors}
+
+ update
+ (diagramInstance = diagram)} width={900} height={900} nodes={nodes} connectors={connectors}
getNodeDefaults={(node: NodeModel) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
- }}
- />
+ }}/>
+
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
(diagramInstance = diagram)} width={'100%'} height={'600px'} connectors={connectors} created={() => {
- // Update the connector properties at the run time
- diagramInstance.connectors[0].style.strokeColor = '#6BA5D7';
- diagramInstance.connectors[0].style.fill = '#6BA5D7';
- diagramInstance.connectors[0].style.strokeWidth = 2;
- diagramInstance.connectors[0].targetDecorator.style.fill = '#6BA5D7';
- diagramInstance.connectors[0].targetDecorator.style.strokeColor =
- '#6BA5D7';
- diagramInstance.connectors[0].sourcePoint.x = 150;
- diagramInstance.connectors[0].targetPoint.x = 150;
- diagramInstance.dataBind();
- }}/>);
+ const update = () =>{
+ // Update the connector properties at the run time
+ diagramInstance.connectors[0].style.strokeColor = '#6BA5D7';
+ diagramInstance.connectors[0].style.fill = '#6BA5D7';
+ diagramInstance.connectors[0].style.strokeWidth = 2;
+ diagramInstance.connectors[0].targetDecorator.style.fill = '#6BA5D7';
+ diagramInstance.connectors[0].targetDecorator.style.strokeColor =
+ '#6BA5D7';
+ diagramInstance.connectors[0].sourcePoint.x = 150;
+ diagramInstance.connectors[0].targetPoint.x = 150;
+ diagramInstance.dataBind();
+ }
+ return (
+
+ update
+ (diagramInstance = diagram)} width={'100%'} height={'600px'} connectors={connectors}
+ />
+
+ );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render( (diagramInstance = diagram)}
- width={'100%'}
- height={'600px'}
- connectors={connectors}
- created={() => {
- // Update the connector properties at the run time
- diagramInstance.connectors[0].style.strokeColor = '#6BA5D7';
- diagramInstance.connectors[0].style.fill = '#6BA5D7';
- diagramInstance.connectors[0].style.strokeWidth = 2;
- diagramInstance.connectors[0].targetDecorator.style.fill = '#6BA5D7';
- diagramInstance.connectors[0].targetDecorator.style.strokeColor =
- '#6BA5D7';
- diagramInstance.connectors[0].sourcePoint.x = 150;
- diagramInstance.connectors[0].targetPoint.x = 150;
- diagramInstance.dataBind();
- }}
- />
+
+ update
+ (diagramInstance = diagram)}
+ width={'100%'}
+ height={'600px'}
+ connectors={connectors}
+ />
+
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
+ drag
+ (diagramInstance = diagram)}
+ connectors={connectors}/>
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+ drag
+ (diagramInstance = diagram)}
+ connectors={connectors}/>
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ {
+ node.height = 100;
+ node.width = 100;
+ node.shape = { type: 'Basic', shape: 'Rectangle' };
+ node.style.fill = '#6BA5D7';
+ node.style.strokeColor = 'white';
+ return node;
+ }}
+ getConnectorDefaults={(connector) => {
+ connector.constraints =
+ ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
+ }} />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( {
+ node.height = 100;
+ node.width = 100;
+ node.shape = { type: 'Basic', shape: 'Rectangle' };
+ node.style.fill = '#6BA5D7';
+ node.style.strokeColor = 'white';
+ return node;
+ }}
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.constraints =
+ ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
+ }} />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ {
+ if (args.state === 'Completed') {
+ console.log('positionChange');
+ //Customize
+ }
+ }
+ }
+ />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render({
+ if (args.state === 'Completed') {
+ console.log('positionChange');
+ //Customize
+ }
+ }
+ }
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)}
+ enableConnectorSplit={true} nodes={nodes} connectors={connectors}
+ getConnectorDefaults={(obj) => {
+ obj.constraints =
+ ConnectorConstraints.Default | ConnectorConstraints.AllowDrop;
+ }}
+ getNodeDefaults={(obj) => {
+ obj.width = 100;
+ obj.height = 100;
+ obj.constraints = NodeConstraints.Default | NodeConstraints.AllowDrop;
+ }}
+ enableConnectorSplit = {true}
+ collectionChange={(args)=>{
+ if (args.state === 'Changed' && args.element instanceof Connector) {
+ let sourceNode = diagramInstance.getObject(args.element.sourceID);
+ if (sourceNode) {
+ sourceNode.inEdges.forEach((edgeId) => {
+ let initialConnector = diagramInstance.getObject(edgeId);
+ args.element.style = initialConnector.style;
+ });
+ }
+ }
+ diagramInstance.dataBind();
+ }}
+ />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( (diagramInstance = diagram)}
+ enableConnectorSplit={true} nodes={nodes} connectors={connectors}
+ getConnectorDefaults={(obj:ConnectorModel) => {
+ obj.constraints =
+ ConnectorConstraints.Default | ConnectorConstraints.AllowDrop;
+ }}
+ getNodeDefaults={(obj:NodeModel) => {
+ obj.width = 100;
+ obj.height = 100;
+ obj.constraints = NodeConstraints.Default | NodeConstraints.AllowDrop;
+ }}
+ enableConnectorSplit:boolean = {true}
+ collectionChange={(args: ICollectionChangeEventArgs)=>{
+ if (args.state === 'Changed' && args.element instanceof Connector) {
+ let sourceNode = diagramInstance.getObject(args.element.sourceID);
+ if (sourceNode) {
+ sourceNode.inEdges.forEach((edgeId) => {
+ let initialConnector = diagramInstance.getObject(edgeId);
+ args.element.style = initialConnector.style;
+ });
+ }
+ }
+ diagramInstance.dataBind();
+ }}
+ />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+ resetSegment
+ (diagramInstance = diagram)}
+ >
+
+
+ );
+
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+ resetSegment
+ (diagramInstance = diagram)}
+ >
+
+
+ );
+
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ {
+ console.log('segmentChange');
+ }
+ }
+ />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render({
+ console.log('segmentChange');
+ }
+ }
+ />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ {
+ if (args.type === 'Addition') {
+ console.log('segmentCollectionChange');
+ //Customize
+ }
+ }
+ }
+ />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render({
+ if (args.type === 'Addition') {
+ console.log('segmentCollectionChange');
+ //Customize
+ }
+ }
+ }
+ />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ {
+ node.height = 100;
+ node.width = 100;
+ node.shape = { type: 'Basic', shape: 'Rectangle' };
+ node.style.fill = '#6BA5D7';
+ node.style.strokeColor = 'white';
+ return node;
+ }} getConnectorDefaults={(connector) => {
+ connector.constraints =
+ ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
+ }}/>);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( {
+ node.height = 100;
+ node.width = 100;
+ node.shape = { type: 'Basic', shape: 'Rectangle' };
+ node.style.fill = '#6BA5D7';
+ node.style.strokeColor = 'white';
+ return node;
+ }}
+ getConnectorDefaults={(connector: ConnectorModel) => {
+ connector.constraints =
+ ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+ select
+ unSelect
+ (diagramInstance = diagram)}
+ connectors={connectors}/>
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+ select
+ unSelect
+ (diagramInstance = diagram)}
+ connectors={connectors}/>
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ {
+ if (args.state === 'Changed') {
+ console.log('selectionChange');
+ //Customize
+ }
+ }
+ }
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render({
+ if (args.state === 'Changed') {
+ console.log('selectionChange');
+ //Customize
+ }
+ }
+ }
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ {
+ if (args.state === 'Completed') {
+ console.log('sourcePointChange');
+ //Customize
+ }
+ }
+ }
+ />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render({
+ if (args.state === 'Completed') {
+ console.log('sourcePointChange');
+ //Customize
+ }
+ }
+ }
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+ segmentEdit
+ (diagramInstance = diagram)}
+ width={'100%'}
+ height={'600px'}
+ connectors={connectors}
+ created={() => {
+ diagramInstance.select([diagramInstance.connectors[0]]);
+ }}
+ />
+
+ );
+};
+// Render the App component
+const root = ReactDOM.createRoot(document.getElementById('diagram') );
+root.render(
+ segmentEdit
+ (diagramInstance = diagram)}
+ width={'100%'}
+ height={'600px'}
+ connectors={connectors}
+ created={() => {
+ diagramInstance.select([diagramInstance.connectors[0]]);
+ }}
+ />
+
+ );
+};
+// Render the App component
+const root = ReactDOM.createRoot(document.getElementById('diagram') );
+root.render(Syncfusion® React Chart-DataLabel
+ {
+ if (args.state === 'Completed') {
+ console.log('targetPointChange');
+ //Customize
+ }
+ }
+ }
+ />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render({
+ if (args.state === 'Completed') {
+ console.log('targetPointChange');
+ //Customize
+ }
+ }
+ }
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+ sourcePoint
+ targetPoint
+ dragSourceEnd
+ dragTargetEnd
+ (diagramInstance = diagram)}
+ connectors={connectors}/>
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+ sourcePoint
+ targetPoint
+ dragSourceEnd
+ dragTargetEnd
+ (diagramInstance = diagram)}
+ connectors={connectors}/>
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ {
+ connector.style.strokeColor = 'red';
+ connector.sourceDecorator.shape = 'Circle';
+ connector.targetDecorator.style.fill = '#6BA5D7'
+ connector.targetDecorator.style.strokeColor = '#6BA5D7'
+ connector.style.strokeWidth = 2;
+ }}
+ />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( {
+ connector.style.strokeColor = 'red';
+ connector.sourceDecorator.shape = 'Circle';
+ connector.targetDecorator.style.fill = '#6BA5D7'
+ connector.targetDecorator.style.strokeColor = '#6BA5D7'
+ connector.style.strokeWidth = 2;
+ }}
+ />);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
+ Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
{
+ node.height = 100;
+ node.width = 100;
+ node.shape = { shape: 'Ellipse' };
+ node.style.fill = '#6BA5D7';
+ node.style.strokeColor = 'white';
+ return node;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( {
+ node.height = 100;
+ node.width = 100;
+ node.shape = { shape: 'Ellipse' };
+ node.style.fill = '#6BA5D7';
+ node.style.strokeColor = 'white';
+ return node;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
+ {
+ node.height = 200;
+ node.width = 300;
+ node.style.strokeColor = 'black';
+ return node;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( {
+ node.height = 200;
+ node.width = 300;
+ node.style.strokeColor = 'black';
+ return node;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ {
+ node.height = 200;
+ node.width = 300;
+ node.style.strokeColor = 'black';
+ return node;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( {
+ node.height = 200;
+ node.width = 300;
+ node.style.strokeColor = 'black';
+ return node;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ {
+ node.height = 100;
+ node.width = 100;
+ node.style.strokeColor = 'black';
+ return node;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( {
+ node.height = 100;
+ node.width = 100;
+ node.style.strokeColor = 'black';
+ return node;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ {
+ node.height = 100;
+ node.width = 100;
+ node.style.strokeColor = 'black';
+ return node;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( {
+ node.height = 100;
+ node.width = 100;
+ node.style.strokeColor = 'black';
+ return node;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ {
+ node.height = 100;
+ node.width = 100;
+ node.style.strokeColor = 'black';
+ return node;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render( {
+ node.height = 100;
+ node.width = 100;
+ node.style.strokeColor = 'black';
+ return node;
+ }}
+ />
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
+ Syncfusion React Chart-DataLabel
- Syncfusion React Chart-DataLabel
- Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
+ Export Diagram
+ (diagramInstance = diagram)}
+ width={'100%'}
+ height={'600px'}
+ nodes={nodes}
+ snapSettings={{ constraints: SnapConstraints.None }}
+ >
+
+
+ );
+};
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
+ Export Diagram
+ (diagramInstance = diagram)}
+ width={'100%'}
+ height={'600px'}
+ nodes={nodes}
+ snapSettings={{ constraints: SnapConstraints.None }}
+ >
+
+
+ );
+};
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(Syncfusion® React Chart-DataLabel
+
+ Region
+ (regionInstance = region)}>
+ Content
+ PageSettings
+ CustomBounds
+
+ Export Diagram
+ (diagramInstance = diagram)}
+ width={'100%'}
+ height={'600px'}
+ nodes={nodes}
+ snapSettings={{ constraints: SnapConstraints.None }}
+ >
+
+
+ );
+};
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
+ Region
+ (regionInstance = region)}>
+ Content
+ PageSettings
+ CustomBounds
+
+ Export Diagram
+ (diagramInstance = diagram)}
+ width={'100%'}
+ height={'600px'}
+ nodes={nodes}
+ snapSettings={{ constraints: SnapConstraints.None }}
+ >
+
+
+ );
+};
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(Syncfusion® React Chart-DataLabel
+
+ Export Diagram
+ (diagramInstance = diagram)}
+ width={'100%'}
+ height={'600px'}
+ nodes={nodes}
+ snapSettings={{ constraints: SnapConstraints.None }}
+ pageSettings={{
+ width: 400,
+ height: 300,
+ showPageBreaks: true,
+ multiplePage: true,
+ }}
+ >
+
+
+ );
+};
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
+ Export Diagram
+ (diagramInstance = diagram)}
+ width={'100%'}
+ height={'600px'}
+ nodes={nodes}
+ snapSettings={{ constraints: SnapConstraints.None }}
+ pageSettings={{
+ width: 400,
+ height: 300,
+ showPageBreaks: true,
+ multiplePage: true,
+ }}
+ >
+
+
+ );
+};
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(Syncfusion® React Chart-DataLabel
+
+ Export Diagram
+ (diagramInstance = diagram)}
+ width={'100%'}
+ height={'600px'}
+ nodes={nodes}
+ >
+
+
+ );
+};
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
+ Export Diagram
+ (diagramInstance = diagram)}
+ width={'100%'}
+ height={'600px'}
+ nodes={nodes}
+ >
+
+
+ );
+};
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(Syncfusion® React Chart-DataLabel
+
+ Export Diagram
+ (diagramInstance = diagram)}
+ width={'100%'}
+ height={'600px'}
+ nodes={nodes}
+ >
+
+
+ );
+};
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram"));
+root.render(
+ Export Diagram
+ (diagramInstance = diagram)}
+ width={'100%'}
+ height={'600px'}
+ nodes={nodes}
+ >
+
+
+ );
+};
+
+// Render the App component into the 'diagram' element in the DOM
+const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
+root.render(Syncfusion® React Chart-DataLabel
+ Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
Syncfusion React Chart-DataLabel
+ Syncfusion® React Chart-DataLabel
);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render();
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+ SnapAngle :
+ (diagramInstance = diagram)}
+ // Add node
+ nodes={node} snapSettings={snapSettings}/>
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+ SnapAngle :
+ (diagramInstance = diagram)}
+ // Add node
+ nodes={node} snapSettings={snapSettings}/>
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+
+ SnapColor :
+ (diagramInstance = diagram)}
+ // Add node
+ nodes={node} snapSettings={snapSettings}/>
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(
+ SnapColor :
+ (diagramInstance = diagram)}
+ // Add node
+ nodes={node} snapSettings={snapSettings}/>
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(Syncfusion® React Chart-DataLabel
+ (diagramInstance = diagram)} mode={'SVG'} width={'1000px'} height={'600px'}
+ const diagramInstance = useRef(null);
+ return ();
}
-const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render( (diagramInstance = diagram)}
+ id="diagram"
+ ref={diagramInstance}
mode={'SVG'}
width={'1000px'}
height={'600px'}
@@ -43,8 +46,7 @@ function App() {
/>
);
}
-const root = ReactDOM.createRoot(document.getElementById('diagram'));
+const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(Syncfusion React Chart-DataLabel
+ Syncfusion® React Diagram-Group
(diagramInstance = diagram)} width={'1500px'} height={'600px'} nodes={nodes} created={() => {
- diagramInstance.selectAll();
- // Adding the third node into the existing group
- diagramInstance.group();
- }} getNodeDefaults={(node) => {
- node.height = 100;
- node.width = 100;
- node.style.fill = '#6BA5D7';
- node.style.strokeColor = 'white';
- return node;
- }}/>);
-}
-const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render( (diagramInstance = diagram)}
- width={'1500px'}
- height={'600px'}
- nodes={nodes}
- created={() => {
- diagramInstance.selectAll();
- // Adding the third node into the existing group
- diagramInstance.group();
- }}
- getNodeDefaults={(node: NodeModel) => {
- node.height = 100;
- node.width = 100;
- node.style.fill = '#6BA5D7';
- node.style.strokeColor = 'white';
- return node;
- }}
- />
- );
-}
-const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(Syncfusion React Chart-DataLabel
- (diagramInstance = diagram)} width={'1500px'} height={'600px'} getNodeDefaults={(node) => {
- node.height = 100;
- node.width = 100;
- node.style.fill = '#6BA5D7';
- node.style.strokeColor = 'white';
- return node;
- }} nodes={nodes} created={() => {
- // Adds the group into the diagram
- diagramInstance.add(group);
- }}/>);
-}
-const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render( (diagramInstance = diagram)}
- width={'1500px'}
- height={'600px'}
- getNodeDefaults={(node: NodeModel) => {
- node.height = 100;
- node.width = 100;
- node.style.fill = '#6BA5D7';
- node.style.strokeColor = 'white';
- return node;
- }}
- nodes={nodes}
- created={() => {
- // Adds the group into the diagram
- diagramInstance.add(group);
- }}
- />
- );
-}
-const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(Syncfusion React Chart-DataLabel
- (diagramInstance = diagram)} width={'1500px'} height={'600px'} getNodeDefaults={(node) => {
- node.height = 100;
- node.width = 100;
- node.style.fill = '#6BA5D7';
- node.style.strokeColor = 'white';
- return node;
- }} created={() => {
- //Add collection of group nodes
- diagramInstance.addElements(node);
- }}/>);
-}
-const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render( (diagramInstance = diagram)}
- width={'1500px'}
- height={'600px'}
- getNodeDefaults={(node: NodeModel) => {
- node.height = 100;
- node.width = 100;
- node.style.fill = '#6BA5D7';
- node.style.strokeColor = 'white';
- return node;
- }}
- created={() => {
- //Add collection of group nodes
- diagramInstance.addElements(node);
- }}
- />
- );
- }
- const root = ReactDOM.createRoot(document.getElementById('diagram'));
- root.render(Syncfusion React Chart-DataLabel
- (diagramInstance = diagram)} width={'1500px'} height={'600px'}
- nodes={[node, node2, node3, group]}
- />);
-}
-const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render( (diagramInstance = diagram)}
- width={'1500px'}
- height={'600px'}
- nodes={[node,node2,node3,group]}
- />
- );
-}
-const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(Syncfusion React Chart-DataLabel
-
-
|
+| [Section 508 Support](../common/accessibility#accessibility-standards) | 
- Some features of the component do not meet the requirement.+ +## WAI-ARIA attributes + +The following ARIA attributes are used in the AI AssistView component: + +| Attributes | Purpose | +| ------------ | ----------------------- | +| `role=button` | Indicates that the element is clickable and triggers an action when activated by the user. | +| `role=toolbar` | Specifies that the element is a toolbar. | +| `aria-label` | Defines a string value that labels an interactive element for accessibility. | +| `aria-orientation` | Specifies the orientation of the toolbar. | +| `aria-disabled` | Indicates whether the toolbar or element is currently disabled and not interactive. | +| `aria-multiline` | Indicates that a textbox accepts multiple lines of input or only a single line. | + +## Keyboard interaction + +The following keyboard shortcuts are supported by the AI AssistView component. + +| **Press** | **To do this** | +| --- | --- | +| Enter | Select the focused item. | +| Tab | Moves focus forward through the interactive elements. | +| Shift + Tab | Moves focus backward through the interactive elements. | +AI AssistView Toolbars|| +| Left Arrow | Focuses the previous toolbar element. | +| Right Arrow | Focuses the next toolbar element. | +| Enter / Space | Select the focused item or activate the selected option. | +| Home | Moves focus to the first toolbar element. | +| End | Moves focus to the last toolbar element. | + +## Ensuring accessibility + +The AI AssistView component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. + +## See also + +* [Accessibility in Syncfusion React components](../common/accessibility) diff --git a/ej2-react/ai-assistview/appearance.md b/ej2-react/ai-assistview/appearance.md index 87b04d14b..80bb69662 100644 --- a/ej2-react/ai-assistview/appearance.md +++ b/ej2-react/ai-assistview/appearance.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## ## Setting width -You can use the `width` property to set the width of the AI AssistView. +You can use the [width](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#width) property to set the width of the AI AssistView. The default value is `100%`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -27,9 +27,7 @@ You can use the `width` property to set the width of the AI AssistView. ## Setting height -You can use the `height` property to set the height of the AI AssistView. - -> By default, the component `width` & `height` will be inherited based on the parent dimensions. +You can use the [height](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#height) property to set the height of the AI AssistView. The default value is `100%`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -42,9 +40,9 @@ You can use the `height` property to set the height of the AI AssistView. {% previewsample "page.domainurl/code-snippet/ai-assistview/appearance/height" %} -## CssClass +## Cssclass -You can customize the appearance of the AI AssistView component by using the `cssClass` property. +You can customize the appearance of the AI AssistView component by using the [cssClass](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#cssclass) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/ai-assistview/assist-view.md b/ej2-react/ai-assistview/assist-view.md index ae60620ce..e7d99c96d 100644 --- a/ej2-react/ai-assistview/assist-view.md +++ b/ej2-react/ai-assistview/assist-view.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## ## Setting prompt text -You can use the `prompt` property to define the prompt text for the AI AssistView component. +You can use the [prompt](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#prompt) property to define the prompt text for the AI AssistView component. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -27,7 +27,7 @@ You can use the `prompt` property to define the prompt text for the AI AssistVie ## Setting prompt placeholder -You can use the `promptPlaceholder` property to set the placeholder text for the prompt textarea. The default value is `Type prompt for assistance...`. +You can use the [promptPlaceholder](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#promptplaceholder) property to set the placeholder text for the prompt textarea. The default value is `Type prompt for assistance...`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -42,7 +42,7 @@ You can use the `promptPlaceholder` property to set the placeholder text for the ## Prompt-response collection -By using the `prompts` property, you can specify the collection of prompts and responses, allowing you to load pre-defined pairs or individual entries ensuring the AI AssistView component is initialized with the configured data. +You can use the [prompts](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#prompts) property to initialize the component with the configured data as a collection of prompts and responses or individual entries. > The `prompts` collection stores all the prompts and responses generated. @@ -59,7 +59,7 @@ By using the `prompts` property, you can specify the collection of prompts and r ## Adding prompt suggestions -By using the `promptSuggestions` property, you can configure the list of suggested prompts in the AI AssistView. Users can choose from these suggestions to use as their prompts. +You can use the [promptSuggestions](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#promptsuggestions) property, to add the suggestions in both initial and on-demand which help users to refine their prompts. Additionally, custom header can be set for suggestions further enhancing the user experience. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -74,7 +74,7 @@ By using the `promptSuggestions` property, you can configure the list of suggest ### Adding suggestion headers -You can use the `promptSuggestionsHeader` property to set the header text for the prompt suggestions in the AI AssistView. +You can use the [promptSuggestionsHeader](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#promptsuggestionsheader) property to set the header text for the prompt suggestions in the AI AssistView. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -87,9 +87,9 @@ You can use the `promptSuggestionsHeader` property to set the header text for th {% previewsample "page.domainurl/code-snippet/ai-assistview/assist-view/suggestion-header" %} -## Adding prompt iconCSS +## Adding prompt iconCss -You can customize the appearance of the prompter avatar by using the `promptIconCss` property. +You can customize the appearance of the prompter avatar by using the [promptIconCss](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#prompticoncss) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -102,9 +102,9 @@ You can customize the appearance of the prompter avatar by using the `promptIcon {% previewsample "page.domainurl/code-snippet/ai-assistview/assist-view/prompt-icon" %} -## Adding response iconCSS +## Adding response iconCss -You can use the `responseIconCss` property to customize the appearance of the responder avatar. By default, the `e-assistview-icon` class is added as the built-in AI AssistView response icon. +You can use the [responseIconCss](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#responseiconcss) property to customize the appearance of the responder avatar. By default, the `e-assistview-icon` class is added as the built-in AI AssistView response icon. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -119,7 +119,7 @@ You can use the `responseIconCss` property to customize the appearance of the re ## Show or hide clear button -You can use the `showClearButton` property to show or hide the clear button. By default, its value is `false`, when the clear button is clicked, the prompt text entered will be cleared. +You can use the [showClearButton](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/#showclearbutton) property to show or hide the clear button. By default, its value is `false`, when the clear button is clicked, the prompt text entered will be cleared. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/ej2-react/ai-assistview/custom-view.md b/ej2-react/ai-assistview/custom-view.md index c17163d7f..14317384c 100644 --- a/ej2-react/ai-assistview/custom-view.md +++ b/ej2-react/ai-assistview/custom-view.md @@ -16,29 +16,20 @@ By using the `ViewsDirective` tag you can define the collection of different ass #### Setting view type -You can set the type of view by using the `type` property within the `ViewDirective` tag. It accepts two values such as `Assist` and `Custom`. +You can set the type of view by using the [type](https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/assistViewType/) property within the `ViewDirective` tag. It accepts two values such as `Assist` and `Custom`. {% raw %} ```ts -import { AIAssistViewComponent, PromptRequestEventArgs, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-interactive-chat'; +import { AIAssistViewComponent, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-interactive-chat'; import * as React from 'react'; import * as ReactDOM from "react-dom"; function App() { - const assistInstance = React.useRef
- The component does not meet the requirement.