Documentation(1027344): Move React Recent Development Changes into Hotfix Branch.

Document-Processing-toc.html

@@ -5570,8 +5570,15 @@
 							<li><a href="/document-processing/excel/spreadsheet/react/context-menu">Context Menu</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/formulas">Formulas</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/data-validation">Data Validation</a></li>
-							<li><a href="/document-processing/excel/spreadsheet/react/formatting">Formatting</a></li>
-							<li><a href="/document-processing/excel/spreadsheet/react/illustrations">Illustrations</a></li>
+							<li><a href="/document-processing/excel/spreadsheet/react/formatting">Formatting</a>
+								<ul>
+									<li><a href="/document-processing/excel/spreadsheet/react/number-formatting">Number Formatting</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/conditional-formatting">Conditional Formatting</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/text-cell-formatting">Text & Cell Formatting</a></li>
+								</ul>
+							</li>
+							<li><a href="/document-processing/excel/spreadsheet/react/images-and-illustrations">Images and Illustrations</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/rows-and-columns">Rows and Columns</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/sort">Sorting</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/filter">Filtering</a></li>
@@ -5584,14 +5591,13 @@
 							<li><a href="/document-processing/excel/spreadsheet/react/protect-sheet">Protection</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/searching">Find and Replace</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/undo-redo">Undo and Redo</a></li>
-							<li><a href="/document-processing/excel/spreadsheet/react/ribbon">Ribbon</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/print">Print</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/performance-best-practices">Performance Best Practices</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/global-local">Globalization</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/accessibility">Accessibility</a></li>
 							<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/template">Templates</a></li>                           
 							<li><a href="/document-processing/excel/spreadsheet/react/ui-customization">User Interface Customization</a>
 								<ul>
 									<li><a href="/document-processing/excel/spreadsheet/react/user-interface-customization/custom-cell-templates">Create Custom Cell Templates</a></li>
@@ -5612,6 +5618,7 @@
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/get-filtered-data">Get the filtered row data</a></li>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/customize-spreadsheet-like-grid">Customize spreadsheet like a grid</a></li>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/paste-only-values-without-formatting">Paste only values without formatting and styles</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/how-to/existing-react-layout">Integrate spreadsheet into existing react layouts</a></li>                                    
 								</ul>
 							</li>
 							<li><a href="/document-processing/excel/spreadsheet/react/mobile-responsiveness">Mobile Responsiveness</a></li>

Document-Processing/Excel/Spreadsheet/React/accessibility.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Accessibility in React Spreadsheet component
 
-The Spreadsheet component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Spreadsheet component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria#roles) that are commonly used to evaluate accessibility.
 
 The accessibility compliance for the Spreadsheet component is outlined below.
 
@@ -61,7 +61,7 @@ The Spreadsheet component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/ap
 
 ## Keyboard interaction
 
-The Spreadsheet component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Spreadsheet component.
+The Spreadsheet component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Spreadsheet component.
 
 | Press | To do this |
 |----------|-------------|

Document-Processing/Excel/Spreadsheet/React/cell-range.md

@@ -9,9 +9,9 @@ documentation: ug
 
 # Cell range in React Spreadsheet component
 
-A group of cells in a sheet is known as cell range.
+A **cell range** is a group of cells in a sheet. It allows you to work with multiple cells together for operations such as formatting, formulas, and data manipulation.  
 
-To get started quickly with Cell Range, you can check on this video:
+To get started quickly with `Cell Range`, you can check out this video:
 
 {% youtube "https://www.youtube.com/watch?v=izgXkfzUMBQ" %}
 
@@ -104,9 +104,9 @@ Auto Fill is used to fill the cells with data based on adjacent cells. It also f
 You can do this by one of the following ways,
 
 * Using “AutoFillOptions” menu which is open, while drag and drop the cell using fill handle element.
-* Use the autoFill() method programmatically.
+* Use the autoFill method programmatically.
 
-The available parameters in `autoFill()` method are,
+The available parameters in `autoFill` method are,
 
 | Parameter | Type | Description |
 |-----|------|----|
@@ -184,14 +184,14 @@ In the following sample, you can enable/disable the fill option on the button cl
 
 ## Clear
 
-Clear feature helps you to clear the cell contents (formulas and data), formats (including number formats, conditional formats, and borders) in a spreadsheet. When you apply clear all, both the contents and the formats will be cleared simultaneously.
+The **Clear** feature allows you to remove cell contents (formulas and data) and formats (including number formats, conditional formats, and borders) in a spreadsheet. When you apply **Clear All**, both the contents and the formats are removed simultaneously.
 
 ### Apply Clear Feature
 
 You can apply clear feature by using one of the following ways,
 
-* Select the clear icon in the Ribbon toolbar under the Home Tab.
-* Using the [`clear()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#clear) method to clear the values.
+* Select the clear icon in the Ribbon toolbar under the `Home` Tab.
+* Using the [`clear`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#clear) method to clear the values.
 
 Clear has the following types in the spreadsheet,
 
@@ -204,7 +204,11 @@ Clear has the following types in the spreadsheet,
 
 ### Methods
 
-Clear the cell contents and formats in the Spreadsheet document by using the [clear](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#clear) method. The [clear](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#clear) method has `type` and `range` as parameters. The following code example shows how to clear the cell contents and formats in the button click event.
+You can clear cell contents and formats in the Spreadsheet by using the [`clear`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#clear) method. The `clear` method accepts two parameters:  
+* `type` – specifies the type of clear operation (`Clear All`, `Clear Formats`, `Clear Contents`, or `Clear Hyperlinks`).  
+* `range` – specifies the cell or range of cells to clear.  
+
+The following code example demonstrates how to clear cell contents and formats in a button click event.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}

Document-Processing/Excel/Spreadsheet/React/charts-and-visualizations.md

@@ -0,0 +1,276 @@
+---
+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
+
+## Understanding Charts
+
+The Syncfusion React Spreadsheet component supports built-in charts, allowing you to turn cell ranges into clear visual representations directly inside your worksheet. Charts help you identify trends, compare values, and communicate data insights at a glance.
+
+## Supported Chart Types
+
+The following types of charts are available in the Spreadsheet.
+
+>* Column Chart
+>* Bar Chart
+>* Area Chart
+>* Line Chart
+>* Pie Chart
+>* Scatter Chart
+
+## How Charts Stay Synchronized
+
+When you create a chart from a cell range, the chart becomes linked to that data source. If values in the source range change, the chart automatically updates to reflect the new data. This makes it easy to build dynamic spreadsheets where visuals and data stay in sync.
+
+## Chart Behavior
+
+By default, charts are enabled in the Spreadsheet (via the [allowChart](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowchart) property). Once created, charts behave as objects within the worksheet—they can be moved, resized, and customized without affecting the underlying data.
+
+---
+
+## How To: Insert Charts
+
+### Insert a Chart Using the UI
+
+You can insert a chart by selecting the chart icon in the Ribbon toolbar under the Insert Tab. The chart will be inserted based on the selected range of cells in the Spreadsheet.
+
+### Insert a Chart Programmatically
+
+Use the [insertChart](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#insertchart) method to insert the chart programmatically.
+
+The available parameter in the [`insertChart()`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#insertchart) method is,
+
+| Parameter | Type | Description |
+|-----|------|----|
+| chart | `ChartModel` | Specifies the options to insert a chart in the spreadsheet. |
+
+The available arguments in the `ChartModel` are:
+
+* type: Specifies the type of chart.
+* theme: Specifies the theme of a chart.
+* isSeriesInRows: Specifies to switch the row or a column.
+* range: Specifies the selected range or specified range.
+* id: Specifies the chart element id.
+* markerSettings: Specifies the marker settings. The marker is used to provide information about the data points in the series and is currently only applicable to the line chart.
+
+The following code example shows how to insert a chart in the 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" %}
+
+---
+
+## How To: Customize Chart Appearance
+
+Once a chart is inserted into the worksheet, you can customize its appearance and structure to make it clearer and more informative.
+
+### Move a Chart
+
+To reposition a chart within the worksheet:
+
+1. **Click the chart** to select it (selection handles appear around it).
+2. **Click and drag** the chart to your desired location.
+3. **Release** to place the chart in the new position.
+
+### Resize a Chart
+
+To adjust the chart size:
+
+1. **Click the chart** to select it.
+2. **Drag a middle edge handle** to resize along a single axis — horizontally or vertically.
+3. **Release** to apply the new size.
+
+### Access Chart Design Options
+
+When a chart is selected, a **Chart Design** tab becomes available in the ribbon. This tab provides tools to modify chart elements and structure.
+
+### Add or Modify Chart Elements
+
+Using the **Add Chart Element** option, you can enhance your chart with the following elements:
+
+#### Axes and Axis Titles
+- **Purpose** — Clearly describe what your data values represent
+- **When to use** — Add when axis measurements are not immediately obvious
+- **How to add** — Chart Design tab → Add Chart Element → Axes → Select the desired axis type
+
+#### Chart Title
+- **Purpose** — Explain what the chart represents at a glance
+- **When to use** — Always recommended for clarity
+- **How to add** — Chart Design tab → Add Chart Element → Chart Title → Choose a title style
+
+#### Data Labels
+- **Purpose** — Display exact values directly on the chart
+- **When to use** — Helpful when precise values are important to viewers
+- **How to add** — Chart Design tab → Add Chart Element → Data Labels → Select label position
+
+#### Gridlines
+- **Purpose** — Improve readability by providing a reference grid
+- **When to use** — Useful for charts with many data points
+- **How to add** — Chart Design tab → Add Chart Element → Gridlines → Select gridline type
+
+#### Legends
+- **Purpose** — Identify and distinguish data series in multi-series charts
+- **When to use** — Essential when multiple data series are plotted
+- **How to add** — Chart Design tab → Add Chart Element → Legend → Choose legend position
+
+### Switch Data Orientation
+
+If your chart is not displaying data as intended, you can reverse how rows and columns are interpreted:
+
+1. **Select the chart** by clicking on it
+2. **Go to Chart Design tab** in the ribbon
+3. **Click Switch Row/Column** to flip the data orientation
+4. **Review the result** — The chart now groups data differently
+
+This is useful when:
+- You want to compare categories differently
+- Your data is organized differently than expected
+- You need to highlight different trends or patterns
+
+### Change Chart Type
+
+To switch between chart types after creation:
+
+1. **Select the chart** by clicking on it
+2. **Go to Chart Design tab** in the ribbon
+3. **Click Chart Type** option
+4. **Select a new type** (Column, Bar, Line, Area, Pie, etc.)
+
+### Customization of line chart markers
+
+Using the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#actionbegin) event, you can change the shape, size, fill color, and border of the line chart marker. In the following example, you can see the modified marker appearance, such as shape and size, while creating the line chart with UI interaction.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/chart-cs3/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/chart-cs3/app/app.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/spreadsheet/react/chart-cs3/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/spreadsheet/react/chart-cs3/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+ {% previewsample "/document-processing/code-snippet/spreadsheet/react/chart-cs3" %}
+
+## How To: Remove Charts
+
+You can remove a chart from your worksheet either through the user interface or programmatically.
+
+### Remove a Chart Using the UI
+
+To delete a chart:
+
+1. **Select the chart** by clicking on it
+2. **Press Delete** or **Backspace** to remove it immediately
+
+**Alternative method:**
+- **Select the chart** and choose **Clear All** from the ribbon (this clears the selected chart)
+
+### Remove a Chart Programmatically
+
+Use the [deleteChart](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#deletechart) method to remove charts through code:
+
+- **With a chart ID** — Pass the chart ID to remove that specific chart
+- **Without an ID** — Call the method without arguments to remove the currently active (selected) chart
+
+The following code example shows how to remove a chart in the 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" %}
+
+---
+
+## API Reference
+
+### Methods
+
+#### insertChart()
+Inserts a new chart into the worksheet at a specified location with the given chart type and data range.
+
+**Parameters:**
+- `ChartModel[]` — Specifies the options to insert a chart in the spreadsheet.
+
+**See:** [insertChart API Documentation](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#insertchart)
+
+#### deleteChart()
+Removes a chart from the worksheet.
+
+**Parameters:**
+- `chartId` (optional) — The ID of the specific chart to remove. If omitted, the active chart is deleted.
+
+**See:** [deleteChart API Documentation](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#deletechart)
+
+#### selectChart()
+Selects a chart in the active worksheet.
+
+**Parameters:**
+- `chartId` (optional) — The ID of the chart to select. If omitted, the chart in the active cell is selected. If the active cell contains no chart, the first rendered chart in the active sheet is selected.
+
+**See:** [selectChart API Documentation](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#selectchart)
+
+#### deselectChart()
+Removes selection from the currently selected chart.
+
+**See:** [deselectChart API Documentation](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#deselectchart)
+
+### Properties
+
+#### allowChart
+Enables or disables chart functionality in the Spreadsheet.
+
+**Type:** `boolean`  
+**Default:** `true`
+
+**See:** [allowChart API Documentation](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowchart)
+
+## Limitations of Chart
+
+The following features have some limitations in the Chart:
+
+* Insert row/delete row between the chart data source will not reflect the chart.
+* Copy/paste into the chart data source will not reflect the chart.
+* Corner resizing option in chart element.
+
+## See Also
+* [Images](./images-and-illustrations)
+* [Formatting](./formatting)
+* [Rows and columns](./rows-and-columns)