From 38ff5ea49c695a6c9c587617d7869acc401aea9d Mon Sep 17 00:00:00 2001
From: NithishkumarRavikumar <kumarnithish357@gmail.com>
Date: Mon, 16 Mar 2026 18:28:08 +0530
Subject: [PATCH 1/2] 1016084: added charts and visualization details in react
 spreadsheet ug documentation.

---
 Document-Processing-toc.html                  |  1 +
 .../React/charts-and-visualizations.md        | 97 +++++++++++++++++++
 .../react/delete-chart-cs1/app/app.jsx        | 59 +++++++++++
 .../react/delete-chart-cs1/app/app.tsx        | 59 +++++++++++
 .../react/delete-chart-cs1/app/datasource.jsx | 11 +++
 .../react/delete-chart-cs1/app/datasource.tsx | 11 +++
 .../react/delete-chart-cs1/index.html         | 36 +++++++
 .../react/delete-chart-cs1/systemjs.config.js | 58 +++++++++++
 .../react/insert-chart-cs1/app/app.jsx        | 56 +++++++++++
 .../react/insert-chart-cs1/app/app.tsx        | 56 +++++++++++
 .../react/insert-chart-cs1/app/datasource.jsx | 11 +++
 .../react/insert-chart-cs1/app/datasource.tsx | 11 +++
 .../react/insert-chart-cs1/index.html         | 36 +++++++
 .../react/insert-chart-cs1/systemjs.config.js | 58 +++++++++++
 14 files changed, 560 insertions(+)
 create mode 100644 Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations.md
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/app.jsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/app.tsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.jsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.tsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/index.html
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/systemjs.config.js
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/app.jsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/app.tsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.jsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.tsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/index.html
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/systemjs.config.js

diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index a8de98a348..dbff8b1063 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -5473,6 +5473,7 @@
 							<li><a href="/document-processing/excel/spreadsheet/react/keyboard-shortcuts">Keyboard Shortcuts</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/freeze-pane">Freeze Panes</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/template">Templates</a></li>
+							<li><a href="/document-processing/excel/spreadsheet/react/charts-and-visualizations">Charts and Visualizations</a></li>
 							<li>How To
 								<ul>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/create-a-object-structure">Create a object structure </a></li>
diff --git a/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations.md b/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations.md
new file mode 100644
index 0000000000..4ca3fbe5b1
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations.md
@@ -0,0 +1,97 @@
+---
+layout: post
+title: Charts and visualizations in React Spreadsheet component | Syncfusion
+description: Learn here how to insert, customize, update, and remove charts in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet
+platform: document-processing
+documentation: ug
+---
+
+# Charts and Visualizations
+
+Our Syncfusion React Spreadsheet component supports built‑in charts so you can turn a cell range into clear visuals directly inside a worksheet. You can insert charts (like Column, Bar, Line, Pie/Doughnut, Area, and Scatter), position and resize them, and keep them in sync with the data in their source range.
+
+Charts can be enabled with the Spreadsheet’s [allowChart](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowchart) property, which is true as default and created programmatically (for example, with [insertChart](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#insertchart)), then moved or resized using drag handles in the UI.
+
+Charts are added against a cell range, so when values in that range change, the chart reflects the new data. This makes it straightforward to build sheets where visuals update alongside table edits.
+
+## Insert Charts
+
+In the Syncfusion React Spreadsheet component, charts can be inserted into a worksheet to visually represent data stored in cells. A chart is created from a selected cell range, which means the values in that range are used as the data source for the chart. This allows data in the spreadsheet to be presented in a clear and visual way.
+
+The Spreadsheet supports common chart types such as Column, Bar, Line, Area, Pie, Doughnut, and Scatter. Each type helps display data differently—for example, column and bar charts are useful for comparing values, while line charts show trends and pie charts display proportions.
+
+Charts can be inserted programmatically using the [insertChart](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#insertchart) method. With this method, you can specify the chart type, the data range, and where the chart should appear in the worksheet. Once inserted, the chart can be moved or resized as needed. When the values in the source cells change, the chart updates automatically.
+
+The following code example shows how to insert a chart in spreadsheet.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/insert-chart-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/insert-chart-cs1/app/app.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/insert-chart-cs1" %}
+
+
+## Customize Chart Appearance
+
+Charts can be customized to make them clearer and easier to understand after they are inserted into the worksheet. Once a chart is added, it behaves like an object inside the sheet, so it can be adjusted visually and functionally to suit the data being displayed.
+
+You can move a chart to any location by selecting it and dragging it within the worksheet. You can also resize the chart using the resize handles shown around it, which helps fit the chart neatly alongside the data or other content.
+
+### Chart Design Options
+
+When a chart is selected, a Chart Design tab becomes available in the ribbon. This tab provides several options to customize the chart appearance.
+
+Using the Add Chart Element option, you can perform the following in the chart, such as:
+
+`Axes and Axis Titles` to clearly describe data values
+`Chart Title` to explain what the chart represents
+`Data Labels` to display values directly on the chart
+`Gridlines` to improve readability
+`Legends` to identify data series
+
+You can also use `Switch Row/Column` to change how the data is plotted. This is useful when the chart needs to compare categories differently or when the data orientation changes.
+
+The Chart Type option lets you change the chart style after it is created. For example, you can switch between column, bar, and line charts to better highlight comparisons or trends, depending on the data.
+
+By using these Chart Design options, you can adjust both the look and structure of a chart, making it more informative and visually appealing directly within the spreadsheet.
+
+## Remove Chart
+
+In our Syncfusion React Spreadsheet component, you can remove a chart directly from the sheet or by code.
+
+To remove it in the UI, you can also choose Clear All from the ribbon to clear the current selection and embedded objects—charts included—when the chart is selected. You can also select the chart and press `Delete/Backspace`; this deletes the selected chart immediately.
+
+The Spreadsheet provides the [deleteChart](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#deletechart) method to remove charts through code. When you pass a chart id, that specific chart is removed; when you call it without an id, the active (selected) chart is removed. This approach is useful when you track chart ids at insertion time and want to remove them later without relying on user selection.
+
+The Spreadsheet also provides methods to control chart selection. The [selectChart](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#selectchart) method is used to select a chart from the active sheet. If a chart id is provided, the specified chart is selected. If no argument is passed, the chart present in the active cell is selected. If the active cell does not contain a chart, the initially rendered chart in the active sheet is selected. The [deselectChart](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#deselectchart) method is used to remove the selection from the currently selected chart.
+
+The following code example shows how to remove a chart in spreadsheet.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/delete-chart-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/delete-chart-cs1/app/app.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/delete-chart-cs1" %}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/app.jsx
new file mode 100644
index 0000000000..dd5a71bec1
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/app.jsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
+
+import { chartData } from './datasource';
+
+function App() {
+  const spreadsheetRef = React.useRef(null);
+
+  const handleCreated = () => {
+    const spreadsheet = spreadsheetRef.current;
+
+    // Insert a Column chart based on A1:B6
+    spreadsheet.insertChart([{
+      type: 'Column',               // Column | Bar | Line | Pie | Doughnut | Area | Scatter ...
+      range: 'A1:B6',
+      top: 120, left: 20, height: 300, width: 500
+    }]);
+  };
+
+  const removeById = () => {
+    const spreadsheet = spreadsheetRef.current;
+    spreadsheet.deleteChart('e_spreadsheet_chart_5'); // removes the chart with id "salesChart"
+  };
+
+  const removeActive = () => {
+    const spreadsheet = spreadsheetRef.current;
+    spreadsheet.deleteChart(); // no id → removes the currently selected chart
+  };
+
+  return (
+  <div>
+    <button onClick={removeById} style={{ marginRight: 8 }}>Remove by Id</button>
+    <button onClick={removeActive}>Remove Active Chart</button>
+        <SpreadsheetComponent ref={spreadsheetRef} created={handleCreated}>
+            <SheetsDirective>
+                <SheetDirective>
+                    <RangesDirective>
+                        <RangeDirective dataSource={chartData}></RangeDirective>
+                    </RangesDirective>
+                    <ColumnsDirective>
+                        <ColumnDirective width={180}></ColumnDirective>
+                        <ColumnDirective width={130}></ColumnDirective>
+                        <ColumnDirective width={130}></ColumnDirective>
+                        <ColumnDirective width={180}></ColumnDirective>
+                        <ColumnDirective width={130}></ColumnDirective>
+                        <ColumnDirective width={120}></ColumnDirective>
+                    </ColumnsDirective>
+                </SheetDirective>
+            </SheetsDirective>
+        </SpreadsheetComponent>
+</div>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/app.tsx
new file mode 100644
index 0000000000..940a4ba0cc
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/app.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
+
+import { chartData } from './datasource';
+
+function App(): React.ReactElement {
+  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
+
+  const handleCreated = () => {
+    const spreadsheet = spreadsheetRef.current;
+
+    // Insert a Column chart based on A1:B6
+    spreadsheet.insertChart([{
+      type: 'Column',               // Column | Bar | Line | Pie | Doughnut | Area | Scatter ...
+      range: 'A1:B6',
+      top: 120, left: 20, height: 300, width: 500
+    }]);
+  };
+
+  const removeById = () => {
+    const spreadsheet = spreadsheetRef.current!;
+    spreadsheet.deleteChart('e_spreadsheet_chart_5'); // removes the chart with id "salesChart"
+  };
+
+  const removeActive = () => {
+    const spreadsheet = spreadsheetRef.current!;
+    spreadsheet.deleteChart(); // no id → removes the currently selected chart
+  };
+
+  return (
+  <div>
+    <button onClick={removeById} style={{ marginRight: 8 }}>Remove by Id</button>
+    <button onClick={removeActive}>Remove Active Chart</button>
+        <SpreadsheetComponent ref={spreadsheetRef} created={handleCreated}>
+            <SheetsDirective>
+                <SheetDirective>
+                    <RangesDirective>
+                        <RangeDirective dataSource={chartData}></RangeDirective>
+                    </RangesDirective>
+                    <ColumnsDirective>
+                        <ColumnDirective width={180}></ColumnDirective>
+                        <ColumnDirective width={130}></ColumnDirective>
+                        <ColumnDirective width={130}></ColumnDirective>
+                        <ColumnDirective width={180}></ColumnDirective>
+                        <ColumnDirective width={130}></ColumnDirective>
+                        <ColumnDirective width={120}></ColumnDirective>
+                    </ColumnsDirective>
+                </SheetDirective>
+            </SheetsDirective>
+        </SpreadsheetComponent>
+</div>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.jsx
new file mode 100644
index 0000000000..74cb625c1a
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.jsx
@@ -0,0 +1,11 @@
+/**
+ * Chart data source
+ */
+export let chartData = [
+    { 'Book': 'Classics', 'Year 2016': 19033, 'Year 2017': 78453, 'Year 2018': 24354, 'Year 2019': 18757, 'Year 2020': 34343 },
+    { 'Book': 'Mystery', 'Year 2016': 50400, 'Year 2017': 82311, 'Year 2018': 131003, 'Year 2019': 19899, 'Year 2020': 42200 },
+    { 'Book': 'Romance', 'Year 2016': 18002, 'Year 2017': 49529, 'Year 2018': 79567, 'Year 2019': 12302, 'Year 2020': 21277 },
+    { 'Book': 'Sci-Fi & Fantasy', 'Year 2016': 10033, 'Year 2017': 51200, 'Year 2018': 66211, 'Year 2019': 12899, 'Year 2020': 18779 },
+    { 'Book': 'Horror', 'Year 2016': 23454, 'Year 2017': 78665, 'Year 2018': 81232, 'Year 2019': 19888, 'Year 2020': 20986 }
+];
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.tsx b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.tsx
new file mode 100644
index 0000000000..49b42afcee
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/app/datasource.tsx
@@ -0,0 +1,11 @@
+/**
+ * Chart data source
+ */
+export let chartData: Object[] = [
+    { 'Book': 'Classics', 'Year 2016': 19033, 'Year 2017': 78453, 'Year 2018': 24354, 'Year 2019': 18757, 'Year 2020': 34343 },
+    { 'Book': 'Mystery', 'Year 2016': 50400, 'Year 2017': 82311, 'Year 2018': 131003, 'Year 2019': 19899, 'Year 2020': 42200 },
+    { 'Book': 'Romance', 'Year 2016': 18002, 'Year 2017': 49529, 'Year 2018': 79567, 'Year 2019': 12302, 'Year 2020': 21277 },
+    { 'Book': 'Sci-Fi & Fantasy', 'Year 2016': 10033, 'Year 2017': 51200, 'Year 2018': 66211, 'Year 2019': 12899, 'Year 2020': 18779 },
+    { 'Book': 'Horror', 'Year 2016': 23454, 'Year 2017': 78665, 'Year 2018': 81232, 'Year 2019': 19888, 'Year 2020': 20986 }
+];
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/index.html
new file mode 100644
index 0000000000..8b6e016434
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Spreadsheet</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+    <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+
+        body {
+            overflow: hidden;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='root'>
+        <div id='loader'>Loading....</div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/systemjs.config.js
new file mode 100644
index 0000000000..9290509c4a
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/delete-chart-cs1/systemjs.config.js
@@ -0,0 +1,58 @@
+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/32.1.19/"
+    },
+    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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.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-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js",
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+        "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js",
+        "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.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: 'app', defaultExtension: 'tsx' },
+    }
+
+});
+
+System.import('app');
+
+
+
diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/app.jsx
new file mode 100644
index 0000000000..3cdf655f86
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/app.jsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
+import { chartData } from './datasource';
+
+function App() {
+  const spreadsheetRef = React.useRef(null);
+
+  const handleCreated = () => {
+    const spreadsheet = spreadsheetRef.current;
+
+    // Insert a Column chart based on A1:B6
+    spreadsheet.insertChart([{
+      type: 'Column',               // Column | Bar | Line | Pie | Doughnut | Area | Scatter ...
+      range: 'A1:B6',
+      top: 120, left: 20, height: 300, width: 500
+    }]);
+    spreadsheet.insertChart([{
+      type: 'Pie',
+      range: 'A1:B6',
+      top: 120, left: 500, height: 300, width: 500
+    }]);
+    spreadsheet.insertChart([{
+      type: 'Area',
+      range: 'A1:B6',
+      top: 120, left: 1000, height: 300, width: 500
+    }]);
+  };
+
+  return (
+  <div>
+      <SpreadsheetComponent ref={spreadsheetRef} created={handleCreated}>
+            <SheetsDirective>
+                <SheetDirective>
+                    <RangesDirective>
+                        <RangeDirective dataSource={chartData}></RangeDirective>
+                    </RangesDirective>
+                    <ColumnsDirective>
+                        <ColumnDirective width={180}></ColumnDirective>
+                        <ColumnDirective width={130}></ColumnDirective>
+                        <ColumnDirective width={130}></ColumnDirective>
+                        <ColumnDirective width={180}></ColumnDirective>
+                        <ColumnDirective width={130}></ColumnDirective>
+                        <ColumnDirective width={120}></ColumnDirective>
+                    </ColumnsDirective>
+                </SheetDirective>
+            </SheetsDirective>
+        </SpreadsheetComponent>
+</div>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/app.tsx
new file mode 100644
index 0000000000..5130a7e9b0
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/app.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
+import { chartData } from './datasource';
+
+function App(): React.ReactElement {
+  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
+
+  const handleCreated = () => {
+    const spreadsheet = spreadsheetRef.current;
+
+    // Insert a Column chart based on A1:B6
+    spreadsheet.insertChart([{
+      type: 'Column',               // Column | Bar | Line | Pie | Doughnut | Area | Scatter ...
+      range: 'A1:B6',
+      top: 120, left: 20, height: 300, width: 500
+    }]);
+    spreadsheet.insertChart([{
+      type: 'Pie',
+      range: 'A1:B6',
+      top: 120, left: 500, height: 300, width: 500
+    }]);
+    spreadsheet.insertChart([{
+      type: 'Area',
+      range: 'A1:B6',
+      top: 120, left: 1000, height: 300, width: 500
+    }]);
+  };
+
+  return (
+  <div>
+      <SpreadsheetComponent ref={spreadsheetRef} created={handleCreated}>
+            <SheetsDirective>
+                <SheetDirective>
+                    <RangesDirective>
+                        <RangeDirective dataSource={chartData}></RangeDirective>
+                    </RangesDirective>
+                    <ColumnsDirective>
+                        <ColumnDirective width={180}></ColumnDirective>
+                        <ColumnDirective width={130}></ColumnDirective>
+                        <ColumnDirective width={130}></ColumnDirective>
+                        <ColumnDirective width={180}></ColumnDirective>
+                        <ColumnDirective width={130}></ColumnDirective>
+                        <ColumnDirective width={120}></ColumnDirective>
+                    </ColumnsDirective>
+                </SheetDirective>
+            </SheetsDirective>
+        </SpreadsheetComponent>
+</div>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.jsx
new file mode 100644
index 0000000000..74cb625c1a
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.jsx
@@ -0,0 +1,11 @@
+/**
+ * Chart data source
+ */
+export let chartData = [
+    { 'Book': 'Classics', 'Year 2016': 19033, 'Year 2017': 78453, 'Year 2018': 24354, 'Year 2019': 18757, 'Year 2020': 34343 },
+    { 'Book': 'Mystery', 'Year 2016': 50400, 'Year 2017': 82311, 'Year 2018': 131003, 'Year 2019': 19899, 'Year 2020': 42200 },
+    { 'Book': 'Romance', 'Year 2016': 18002, 'Year 2017': 49529, 'Year 2018': 79567, 'Year 2019': 12302, 'Year 2020': 21277 },
+    { 'Book': 'Sci-Fi & Fantasy', 'Year 2016': 10033, 'Year 2017': 51200, 'Year 2018': 66211, 'Year 2019': 12899, 'Year 2020': 18779 },
+    { 'Book': 'Horror', 'Year 2016': 23454, 'Year 2017': 78665, 'Year 2018': 81232, 'Year 2019': 19888, 'Year 2020': 20986 }
+];
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.tsx b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.tsx
new file mode 100644
index 0000000000..49b42afcee
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/app/datasource.tsx
@@ -0,0 +1,11 @@
+/**
+ * Chart data source
+ */
+export let chartData: Object[] = [
+    { 'Book': 'Classics', 'Year 2016': 19033, 'Year 2017': 78453, 'Year 2018': 24354, 'Year 2019': 18757, 'Year 2020': 34343 },
+    { 'Book': 'Mystery', 'Year 2016': 50400, 'Year 2017': 82311, 'Year 2018': 131003, 'Year 2019': 19899, 'Year 2020': 42200 },
+    { 'Book': 'Romance', 'Year 2016': 18002, 'Year 2017': 49529, 'Year 2018': 79567, 'Year 2019': 12302, 'Year 2020': 21277 },
+    { 'Book': 'Sci-Fi & Fantasy', 'Year 2016': 10033, 'Year 2017': 51200, 'Year 2018': 66211, 'Year 2019': 12899, 'Year 2020': 18779 },
+    { 'Book': 'Horror', 'Year 2016': 23454, 'Year 2017': 78665, 'Year 2018': 81232, 'Year 2019': 19888, 'Year 2020': 20986 }
+];
+  
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/index.html
new file mode 100644
index 0000000000..8b6e016434
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Spreadsheet</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+    <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+
+        body {
+            overflow: hidden;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='root'>
+        <div id='loader'>Loading....</div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/systemjs.config.js
new file mode 100644
index 0000000000..9290509c4a
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/insert-chart-cs1/systemjs.config.js
@@ -0,0 +1,58 @@
+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/32.1.19/"
+    },
+    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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.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-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js",
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+        "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js",
+        "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.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: 'app', defaultExtension: 'tsx' },
+    }
+
+});
+
+System.import('app');
+
+
+

From 9b67dda92f05f89577107ef5b1e5665dbc0c7a82 Mon Sep 17 00:00:00 2001
From: NithishkumarRavikumar <kumarnithish357@gmail.com>
Date: Tue, 17 Mar 2026 11:58:58 +0530
Subject: [PATCH 2/2] 1016084: added contents for image and illustrations in
 react spreadsheet ug documentation.

---
 Document-Processing-toc.html                  |  1 +
 .../React/images-and-illustrations.md         | 60 +++++++++++++++++++
 .../react/delete-image-cs1/app/app.jsx        | 40 +++++++++++++
 .../react/delete-image-cs1/app/app.tsx        | 40 +++++++++++++
 .../react/delete-image-cs1/index.html         | 36 +++++++++++
 .../react/delete-image-cs1/systemjs.config.js | 58 ++++++++++++++++++
 .../react/insert-image-cs1/app/app.jsx        | 33 ++++++++++
 .../react/insert-image-cs1/app/app.tsx        | 33 ++++++++++
 .../react/insert-image-cs1/index.html         | 36 +++++++++++
 .../react/insert-image-cs1/systemjs.config.js | 58 ++++++++++++++++++
 10 files changed, 395 insertions(+)
 create mode 100644 Document-Processing/Excel/Spreadsheet/React/images-and-illustrations.md
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/app/app.jsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/app/app.tsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/index.html
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/systemjs.config.js
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/app/app.jsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/app/app.tsx
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/index.html
 create mode 100644 Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/systemjs.config.js

diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index 0b362f0bf0..bd69deb196 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -5509,6 +5509,7 @@
 							<li><a href="/document-processing/excel/spreadsheet/react/freeze-pane">Freeze Panes</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/template">Templates</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/charts-and-visualizations">Charts and Visualizations</a></li>
+							<li><a href="/document-processing/excel/spreadsheet/react/images-and-illustrations">Images and Illustrations</a></li>
 							<li>How To
 								<ul>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/create-a-object-structure">Create a object structure </a></li>
diff --git a/Document-Processing/Excel/Spreadsheet/React/images-and-illustrations.md b/Document-Processing/Excel/Spreadsheet/React/images-and-illustrations.md
new file mode 100644
index 0000000000..22df662a10
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/React/images-and-illustrations.md
@@ -0,0 +1,60 @@
+---
+layout: post
+title: Images and illustrations in React Spreadsheet component | Syncfusion
+description: Learn here how to insert, position, resize, select, and delete images in the Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet
+platform: document-processing
+documentation: ug
+---
+
+# Images and Illustrations
+
+Our Syncfusion React Spreadsheet component allows you to insert images directly into worksheet cells to enhance visual presentation and provide additional context alongside data. Images such as logos, screenshots, diagrams, or illustrations can be placed within a sheet, positioned as needed, resized, selected, or removed.
+
+Image support in the Spreadsheet can be controlled using the [allowImage](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowimage) property. This property is enabled by default.
+
+## Insert and Position Images
+
+In the Syncfusion React Spreadsheet component, images can be inserted into a worksheet and placed in a specific cell. The target cell determines where the image initially appears, and the image is rendered as an overlay on top of the grid.
+
+Images are inserted programmatically using the [insertImage](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#insertimage) method. This method allows you to define the image source along with its initial width and height, and specify the cell address where the image should be placed.
+
+Once an image is inserted, it can be repositioned by selecting and dragging it to another location within the worksheet. The image remains independent of cell values and does not interfere with data editing, sorting, or filtering operations. You can also insert multiple images at once by passing multiple image configurations to the method.
+
+The following code example shows how to insert an image in spreadsheet.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/insert-image-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/insert-image-cs1/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/insert-image-cs1" %}
+
+## Resize Images
+
+After inserting an image into the spreadsheet, you can resize it to fit the layout or align it with surrounding content. Images can be resized interactively through the UI by selecting the image and using the resize handles displayed around it.
+
+## Delete Images
+
+Images added to a worksheet can be removed either through user interaction or programmatically. In the UI, an image can be deleted by selecting it and pressing the Delete, Backspace key or you can also choose Clear All from the ribbon to clear the current selection. This immediately removes the image from the worksheet.
+
+Our Spreadsheet component also provides the [deleteImage](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#deleteimage) method. This method removes an image based on its unique identifier and the cell address where it is placed.
+
+The Spreadsheet also provides methods to manage image selection. The [selectImage](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#selectimage) method allows you to programmatically select an image in the active sheet, while the [deselectImage](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#deselectimage) method removes the current image selection.
+
+The following code example shows how to delete an image by id in spreadsheet.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/delete-image-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/delete-image-cs1/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/delete-image-cs1" %}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/app/app.jsx
new file mode 100644
index 0000000000..6cc676e484
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/app/app.jsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App() {
+  const spreadsheetRef = React.useRef(null);
+
+  const onCreated = () => {
+    // Insert an image to demonstrate deletion
+    spreadsheetRef.current.insertImage(
+      [
+        {
+          src: 'https://www.syncfusion.com/products/essential-js2/control/images/spreadsheet/javascript-spreadsheet-cell-format.png',
+          width: 320,
+          height: 220
+        }
+      ],
+      'A1'
+    );
+  };
+
+  const onDeleteById = () => {
+    // Delete a known image by its overlay id and anchor cell.
+    spreadsheetRef.current.deleteImage('spreadsheet_1821633465_0_overlay_picture__5', 'A3');
+  };
+  
+
+  return (
+  <div>
+      <button onClick={onDeleteById}>Delete Image by id</button>
+      <SpreadsheetComponent ref={spreadsheetRef} created={onCreated} allowImage={true}>
+      </SpreadsheetComponent>
+  </div>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/app/app.tsx
new file mode 100644
index 0000000000..3adaa160db
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/app/app.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App(): React.ReactElement {
+  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
+
+  const onCreated = (): void => {
+    // Insert an image to demonstrate deletion
+    spreadsheetRef.current.insertImage(
+      [
+        {
+          src: 'https://www.syncfusion.com/products/essential-js2/control/images/spreadsheet/javascript-spreadsheet-cell-format.png',
+          width: 320,
+          height: 220
+        }
+      ],
+      'A1'
+    );
+  };
+
+  const onDeleteById = (): void => {
+    // Delete a known image by its overlay id and anchor cell.
+    spreadsheetRef.current.deleteImage('spreadsheet_1821633465_0_overlay_picture__5', 'A3');
+  };
+  
+
+  return (
+  <div>
+      <button onClick={onDeleteById}>Delete Image by id</button>
+      <SpreadsheetComponent ref={spreadsheetRef} created={onCreated} allowImage={true}>
+      </SpreadsheetComponent>
+  </div>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/index.html
new file mode 100644
index 0000000000..8b6e016434
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Spreadsheet</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+    <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+
+        body {
+            overflow: hidden;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='root'>
+        <div id='loader'>Loading....</div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/systemjs.config.js
new file mode 100644
index 0000000000..9290509c4a
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/delete-image-cs1/systemjs.config.js
@@ -0,0 +1,58 @@
+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/32.1.19/"
+    },
+    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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.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-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js",
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+        "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js",
+        "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.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: 'app', defaultExtension: 'tsx' },
+    }
+
+});
+
+System.import('app');
+
+
+
diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/app/app.jsx
new file mode 100644
index 0000000000..db39e28a18
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/app/app.jsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App() {
+  const spreadsheetRef = React.useRef(null);
+
+  const onCreated = () => {
+    // Insert a single image anchored at A1 with initial size
+    spreadsheetRef.current.insertImage(
+      [
+        {
+          src: 'https://www.syncfusion.com/products/essential-js2/control/images/spreadsheet/javascript-spreadsheet-cell-format.png',
+          width: 480,
+          height: 250
+        }
+      ],
+      'A1'
+    );
+  };
+
+  return (
+  <div>
+      <SpreadsheetComponent ref={spreadsheetRef} created={onCreated} allowImage={true}>
+      </SpreadsheetComponent>
+</div>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/app/app.tsx
new file mode 100644
index 0000000000..6971ed36e4
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/app/app.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App(): React.ReactElement {
+  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
+
+  const onCreated = (): void => {
+    // Insert a single image anchored at A1 with initial size
+    spreadsheetRef.current.insertImage(
+      [
+        {
+          src: 'https://www.syncfusion.com/products/essential-js2/control/images/spreadsheet/javascript-spreadsheet-cell-format.png',
+          width: 480,
+          height: 250
+        }
+      ],
+      'A1'
+    );
+  };
+
+  return (
+  <div>
+      <SpreadsheetComponent ref={spreadsheetRef} created={onCreated} allowImage={true}>
+      </SpreadsheetComponent>
+</div>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/index.html
new file mode 100644
index 0000000000..8b6e016434
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Spreadsheet</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+    <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+
+        body {
+            overflow: hidden;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='root'>
+        <div id='loader'>Loading....</div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/systemjs.config.js
new file mode 100644
index 0000000000..9290509c4a
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/insert-image-cs1/systemjs.config.js
@@ -0,0 +1,58 @@
+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/32.1.19/"
+    },
+    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-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.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-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js",
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+        "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js",
+        "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.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: 'app', defaultExtension: 'tsx' },
+    }
+
+});
+
+System.import('app');
+
+
+