From 97e2a2d82a29e9859fa4e9d9407d278e60157fcc Mon Sep 17 00:00:00 2001
From: Build Automaion <buildautomation@syncfusion.com>
Date: Thu, 20 Jun 2024 19:42:57 +0530
Subject: [PATCH] Integrated latest changes at 06-20-2024 4:30:51 PM

---
 .../accumulation-chart/getting-started.md     |  10 ++--
 ej2-react/chart/getting-started.md            |  44 +++++++++---------
 .../datalabel-cs1/app/index.jsx               |   1 -
 .../datalabel-cs1/app/index.tsx               |   1 -
 .../datasource-cs3/app/index.jsx              |   1 -
 .../datasource-cs3/app/index.tsx              |   1 -
 .../datasource-cs4/app/index.jsx              |   1 -
 .../datasource-cs4/app/index.tsx              |   1 -
 .../initialize-cs1/app/index.jsx              |   2 +-
 .../initialize-cs1/app/index.tsx              |   2 +-
 .../getting-started/legend-cs1/app/index.jsx  |   1 -
 .../getting-started/legend-cs1/app/index.tsx  |   1 -
 .../getting-started/tooltip-cs1/app/index.jsx |   1 -
 .../getting-started/tooltip-cs1/app/index.tsx |   1 -
 .../getting-started/tooltip-cs2/app/index.jsx |   1 -
 .../getting-started/tooltip-cs2/app/index.tsx |   1 -
 .../chart/series/pie-cs4/app/index.jsx        |   1 -
 .../chart/series/pie-cs4/app/index.tsx        |   1 -
 .../gantt/tooltip-cs8/app/index.tsx           |   2 +-
 ej2-react/gantt/time-line/time-line.md        |   2 +-
 ...t-disabled.png => multiselect-disable.png} | Bin
 21 files changed, 30 insertions(+), 46 deletions(-)
 rename ej2-react/images/{multiselect-disabled.png => multiselect-disable.png} (100%)

diff --git a/ej2-react/accumulation-chart/getting-started.md b/ej2-react/accumulation-chart/getting-started.md
index c6311c30b..5d09904a1 100644
--- a/ej2-react/accumulation-chart/getting-started.md
+++ b/ej2-react/accumulation-chart/getting-started.md
@@ -9,7 +9,7 @@ domainurl: ##DomainURL##
 ---
 <!-- markdownlint-disable MD036 -->
 
-# Getting Started
+# Getting Started with React Accumulation charts of Syncfusion
 
 In EJ2, accumulation chart is implemented as a separate control to avoid the axis related logics.
 The dependencies for accumulation chart is same as chart control.
@@ -72,7 +72,7 @@ For getting started, add the Accumulation Chart component in `src/App.tsx` file
 
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="App.jsx" %}
 
 import {AccumulationChartComponent} from '@syncfusion/ej2-react-charts';
 import * as React from 'react';
@@ -85,7 +85,7 @@ function App() {
 export default App;
 
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="App.tsx" %}
 
 import { AccumulationChartComponent } from '@syncfusion/ej2-react-charts';
 import * as React from 'react';
@@ -103,10 +103,10 @@ export default App;
 By default, the pie series will be rendered when assigning the JSON data to the series using the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel/#datasource) property. Map the field names in the JSON data to the [`xName`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel/#xname) and [`yName`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel/#yname) properties of the series.
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="App.jsx" %}
 {% include code-snippet/chart/series/pie-cs4/app/index.jsx %}
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="App.tsx" %}
 {% include code-snippet/chart/series/pie-cs4/app/index.tsx %}
 {% endhighlight %}
 {% endtabs %}
diff --git a/ej2-react/chart/getting-started.md b/ej2-react/chart/getting-started.md
index e303350fb..da23ada3a 100644
--- a/ej2-react/chart/getting-started.md
+++ b/ej2-react/chart/getting-started.md
@@ -9,7 +9,7 @@ domainurl: ##DomainURL##
 ---
 <!-- markdownlint-disable MD036 -->
 
-# Getting Started
+# Getting Started with React charts of Syncfusion
 
 This section explains you the steps required to create a simple chart and demonstrate the basic usage of the chart control.
 
@@ -69,7 +69,7 @@ Now, you can start adding Chart component in the application.
 For getting started, add the Chart component in `src/App.tsx` file using following code.
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="App.jsx" %}
 
 import { ChartComponent } from '@syncfusion/ej2-react-charts';
 import * as React from 'react';
@@ -80,7 +80,7 @@ function App() {
 export default App;
 
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="App.tsx" %}
 
 import { ChartComponent } from '@syncfusion/ej2-react-charts';
 import * as React from 'react';
@@ -101,10 +101,10 @@ npm start
 The below example shows a basic Chart.
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="App.jsx" %}
 {% include code-snippet/chart/getting-started/initialize-cs1/app/index.jsx %}
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="App.tsx" %}
 {% include code-snippet/chart/getting-started/initialize-cs1/app/index.tsx %}
 {% endhighlight %}
 {% endtabs %}
@@ -124,7 +124,7 @@ Chart component are segregated into individual feature-wise modules. In order to
 These modules should be injected to the `services` section as follows,
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="App.jsx" %}
 
 import { Category, ChartComponent, DataLabel, LineSeries, Legend, Tooltip, Inject } from '@syncfusion/ej2-react-charts';
 import * as React from "react";
@@ -136,10 +136,9 @@ function App() {
   </ChartComponent>;
 }
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
 
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="App.tsx" %}
 
 import { Category, ChartComponent, DataLabel, LineSeries, Legend, Tooltip, Inject } from '@syncfusion/ej2-react-charts';
 import * as React from "react";
@@ -150,7 +149,6 @@ function App() {
   </ChartComponent>;
 }
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
 
 {% endhighlight %}
 {% endtabs %}
@@ -160,7 +158,7 @@ ReactDOM.render(<App />, document.getElementById("charts"));
 This section explains how to plot below JSON data to the chart.
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="App.jsx" %}
 
 export let data = [
     { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
@@ -172,7 +170,7 @@ export let data = [
 ];
 
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="App.tsx" %}
 
 export let data: any[] = [
             { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
@@ -191,10 +189,10 @@ export let data: any[] = [
 Since the JSON contains category data, set the [`valueType`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel/#valuetype)for horizontal axis to `Category`. By default, the axis valueType is `Numeric`.
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="App.jsx" %}
 {% include code-snippet/chart/getting-started/datasource-cs3/app/index.jsx %}
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="App.tsx" %}
 {% include code-snippet/chart/getting-started/datasource-cs3/app/index.tsx %}
 {% endhighlight %}
 {% endtabs %}
@@ -204,10 +202,10 @@ Since the JSON contains category data, set the [`valueType`](https://ej2.syncfus
 The sales data are in thousands, so format the vertical axis label by adding `$` as a prefix and `K` as a suffix to each label. This can be achieved by setting the `${value}K` to the [`labelFormat`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel/#labelformat) property of axis. Here, `{value}` act as a placeholder for each axis label.
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="App.jsx" %}
 {% include code-snippet/chart/getting-started/datasource-cs4/app/index.jsx %}
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="App.tsx" %}
 {% include code-snippet/chart/getting-started/datasource-cs4/app/index.tsx %}
 {% endhighlight %}
 {% endtabs %}
@@ -219,10 +217,10 @@ The sales data are in thousands, so format the vertical axis label by adding `$`
 You can add a title using [`title`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#title) property to the chart to provide quick information to the user about the data plotted in the chart.
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="App.jsx" %}
 {% include code-snippet/chart/getting-started/tooltip-cs1/app/index.jsx %}
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="App.tsx" %}
 {% include code-snippet/chart/getting-started/tooltip-cs1/app/index.tsx %}
 {% endhighlight %}
 {% endtabs %}
@@ -234,10 +232,10 @@ You can add a title using [`title`](https://ej2.syncfusion.com/react/documentati
 You can use legend for the chart by setting the `visible` property to true in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel/#visible) object and by injecting the `Legend` module into the `services`.
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="App.jsx" %}
 {% include code-snippet/chart/getting-started/legend-cs1/app/index.jsx %}
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="App.tsx" %}
 {% include code-snippet/chart/getting-started/legend-cs1/app/index.tsx %}
 {% endhighlight %}
 {% endtabs %}
@@ -249,10 +247,10 @@ You can use legend for the chart by setting the `visible` property to true in [`
 You can add data labels to improve the readability of the chart. This can be achieved by setting the visible property to true in the `dataLabel` object  and by injecting `DataLabel` module into the `services`.
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="App.jsx" %}
 {% include code-snippet/chart/getting-started/datalabel-cs1/app/index.jsx %}
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="App.tsx" %}
 {% include code-snippet/chart/getting-started/datalabel-cs1/app/index.tsx %}
 {% endhighlight %}
 {% endtabs %}
@@ -264,10 +262,10 @@ You can add data labels to improve the readability of the chart. This can be ach
 The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the enable property as true in [`tooltip`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel/#enable) object and by injecting `Tooltip` module into the `services`.
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="App.jsx" %}
 {% include code-snippet/chart/getting-started/tooltip-cs2/app/index.jsx %}
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="App.tsx" %}
 {% include code-snippet/chart/getting-started/tooltip-cs2/app/index.tsx %}
 {% endhighlight %}
 {% endtabs %}
diff --git a/ej2-react/code-snippet/chart/getting-started/datalabel-cs1/app/index.jsx b/ej2-react/code-snippet/chart/getting-started/datalabel-cs1/app/index.jsx
index 6ccfcc1dc..364fe0617 100644
--- a/ej2-react/code-snippet/chart/getting-started/datalabel-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/chart/getting-started/datalabel-cs1/app/index.jsx
@@ -23,4 +23,3 @@ function App() {
 }
 ;
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
diff --git a/ej2-react/code-snippet/chart/getting-started/datalabel-cs1/app/index.tsx b/ej2-react/code-snippet/chart/getting-started/datalabel-cs1/app/index.tsx
index f456b402e..8a8493850 100644
--- a/ej2-react/code-snippet/chart/getting-started/datalabel-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/chart/getting-started/datalabel-cs1/app/index.tsx
@@ -31,7 +31,6 @@ function App() {
   </ChartComponent>
 };
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
 
 
 
diff --git a/ej2-react/code-snippet/chart/getting-started/datasource-cs3/app/index.jsx b/ej2-react/code-snippet/chart/getting-started/datasource-cs3/app/index.jsx
index 139ccc781..64507a21e 100644
--- a/ej2-react/code-snippet/chart/getting-started/datasource-cs3/app/index.jsx
+++ b/ej2-react/code-snippet/chart/getting-started/datasource-cs3/app/index.jsx
@@ -20,4 +20,3 @@ function App() {
 }
 ;
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
diff --git a/ej2-react/code-snippet/chart/getting-started/datasource-cs3/app/index.tsx b/ej2-react/code-snippet/chart/getting-started/datasource-cs3/app/index.tsx
index 291cef0f9..9b13849f8 100644
--- a/ej2-react/code-snippet/chart/getting-started/datasource-cs3/app/index.tsx
+++ b/ej2-react/code-snippet/chart/getting-started/datasource-cs3/app/index.tsx
@@ -26,7 +26,6 @@ function App() {
 
 };
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
 
 
 
diff --git a/ej2-react/code-snippet/chart/getting-started/datasource-cs4/app/index.jsx b/ej2-react/code-snippet/chart/getting-started/datasource-cs4/app/index.jsx
index de8511269..34570a1e0 100644
--- a/ej2-react/code-snippet/chart/getting-started/datasource-cs4/app/index.jsx
+++ b/ej2-react/code-snippet/chart/getting-started/datasource-cs4/app/index.jsx
@@ -21,4 +21,3 @@ function App() {
 }
 ;
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
diff --git a/ej2-react/code-snippet/chart/getting-started/datasource-cs4/app/index.tsx b/ej2-react/code-snippet/chart/getting-started/datasource-cs4/app/index.tsx
index 6112c70b8..72066c026 100644
--- a/ej2-react/code-snippet/chart/getting-started/datasource-cs4/app/index.tsx
+++ b/ej2-react/code-snippet/chart/getting-started/datasource-cs4/app/index.tsx
@@ -27,7 +27,6 @@ function App() {
   </ChartComponent>
 };
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
 
 
 
diff --git a/ej2-react/code-snippet/chart/getting-started/initialize-cs1/app/index.jsx b/ej2-react/code-snippet/chart/getting-started/initialize-cs1/app/index.jsx
index bd98357ad..b40dd2cf5 100644
--- a/ej2-react/code-snippet/chart/getting-started/initialize-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/chart/getting-started/initialize-cs1/app/index.jsx
@@ -6,4 +6,4 @@ function App() {
 }
 ;
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
+
diff --git a/ej2-react/code-snippet/chart/getting-started/initialize-cs1/app/index.tsx b/ej2-react/code-snippet/chart/getting-started/initialize-cs1/app/index.tsx
index b192143c2..c0b2294cc 100644
--- a/ej2-react/code-snippet/chart/getting-started/initialize-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/chart/getting-started/initialize-cs1/app/index.tsx
@@ -8,7 +8,7 @@ function App() {
   return <ChartComponent id='charts' />
 };
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
+
 
 
 
diff --git a/ej2-react/code-snippet/chart/getting-started/legend-cs1/app/index.jsx b/ej2-react/code-snippet/chart/getting-started/legend-cs1/app/index.jsx
index e388ebcb9..b8d53e7a7 100644
--- a/ej2-react/code-snippet/chart/getting-started/legend-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/chart/getting-started/legend-cs1/app/index.jsx
@@ -21,4 +21,3 @@ function App() {
 }
 ;
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
diff --git a/ej2-react/code-snippet/chart/getting-started/legend-cs1/app/index.tsx b/ej2-react/code-snippet/chart/getting-started/legend-cs1/app/index.tsx
index 704caba62..ef9a1beaf 100644
--- a/ej2-react/code-snippet/chart/getting-started/legend-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/chart/getting-started/legend-cs1/app/index.tsx
@@ -27,7 +27,6 @@ function App() {
   </ChartComponent>
 };
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
 
 
 
diff --git a/ej2-react/code-snippet/chart/getting-started/tooltip-cs1/app/index.jsx b/ej2-react/code-snippet/chart/getting-started/tooltip-cs1/app/index.jsx
index ed74ae32a..652232652 100644
--- a/ej2-react/code-snippet/chart/getting-started/tooltip-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/chart/getting-started/tooltip-cs1/app/index.jsx
@@ -20,4 +20,3 @@ function App() {
 }
 ;
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
diff --git a/ej2-react/code-snippet/chart/getting-started/tooltip-cs1/app/index.tsx b/ej2-react/code-snippet/chart/getting-started/tooltip-cs1/app/index.tsx
index 0367540df..cfa0b6c78 100644
--- a/ej2-react/code-snippet/chart/getting-started/tooltip-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/chart/getting-started/tooltip-cs1/app/index.tsx
@@ -26,7 +26,6 @@ function App() {
   </ChartComponent>
 };
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
 
 
 
diff --git a/ej2-react/code-snippet/chart/getting-started/tooltip-cs2/app/index.jsx b/ej2-react/code-snippet/chart/getting-started/tooltip-cs2/app/index.jsx
index 02ac1e854..9ae20af28 100644
--- a/ej2-react/code-snippet/chart/getting-started/tooltip-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/chart/getting-started/tooltip-cs2/app/index.jsx
@@ -24,4 +24,3 @@ function App() {
 }
 ;
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
diff --git a/ej2-react/code-snippet/chart/getting-started/tooltip-cs2/app/index.tsx b/ej2-react/code-snippet/chart/getting-started/tooltip-cs2/app/index.tsx
index d06c80db2..3b077eaac 100644
--- a/ej2-react/code-snippet/chart/getting-started/tooltip-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/chart/getting-started/tooltip-cs2/app/index.tsx
@@ -32,7 +32,6 @@ function App() {
   </ChartComponent>
 };
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
 
 
 
diff --git a/ej2-react/code-snippet/chart/series/pie-cs4/app/index.jsx b/ej2-react/code-snippet/chart/series/pie-cs4/app/index.jsx
index d82a9c05f..391e0d7e0 100644
--- a/ej2-react/code-snippet/chart/series/pie-cs4/app/index.jsx
+++ b/ej2-react/code-snippet/chart/series/pie-cs4/app/index.jsx
@@ -17,4 +17,3 @@ function App() {
 }
 ;
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
diff --git a/ej2-react/code-snippet/chart/series/pie-cs4/app/index.tsx b/ej2-react/code-snippet/chart/series/pie-cs4/app/index.tsx
index a760beefc..c5ce96bec 100644
--- a/ej2-react/code-snippet/chart/series/pie-cs4/app/index.tsx
+++ b/ej2-react/code-snippet/chart/series/pie-cs4/app/index.tsx
@@ -21,6 +21,5 @@ function App() {
 
 };
 export default App;
-ReactDOM.render(<App />, document.getElementById("charts"));
 
 
diff --git a/ej2-react/code-snippet/gantt/tooltip-cs8/app/index.tsx b/ej2-react/code-snippet/gantt/tooltip-cs8/app/index.tsx
index 8b0975921..f063c855d 100644
--- a/ej2-react/code-snippet/gantt/tooltip-cs8/app/index.tsx
+++ b/ej2-react/code-snippet/gantt/tooltip-cs8/app/index.tsx
@@ -32,7 +32,7 @@ function App() {
   };
   const imagedate = () => {
     const getImage = Math.floor(Math.random() * 5) + 1;
-    return "./image/" + getImage + ".svg";
+    return getImage + ".svg";
 
   }
   const holidayValue = (value: string, date: string): string => {
diff --git a/ej2-react/gantt/time-line/time-line.md b/ej2-react/gantt/time-line/time-line.md
index 4242fa067..e1aced925 100644
--- a/ej2-react/gantt/time-line/time-line.md
+++ b/ej2-react/gantt/time-line/time-line.md
@@ -373,7 +373,7 @@ function App() {
   };
   const imagedate = () => {
     const getImage = Math.floor(Math.random() * 5) + 1;
-    return "./image/" + getImage + ".svg";
+    return getImage + ".svg";
 
   }
   const holidayValue = (value: string, date: string): string => {
diff --git a/ej2-react/images/multiselect-disabled.png b/ej2-react/images/multiselect-disable.png
similarity index 100%
rename from ej2-react/images/multiselect-disabled.png
rename to ej2-react/images/multiselect-disable.png