1054065: Update the documentation for Chart Feature

Document-Processing-toc.html

@@ -5762,6 +5762,13 @@
 							<li><a href="/document-processing/excel/spreadsheet/blazor/contextmenu">Context Menu</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/blazor/data-validation">Data Validation</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/blazor/illustrations">Illustrations</a></li>
+							<li><a href="/document-processing/excel/spreadsheet/blazor/charts-and-visualization/overview.md">Charts and Visualizations</a>
+								<ul>
+									<li><a href="/document-processing/excel/spreadsheet/blazor/charts-and-visualization/insert-charts.md">Insert Charts</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/blazor/charts-and-visualization/customize-chart-appearance.md">Chart Appearance Customization</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/blazor/charts-and-visualization/remove-charts.md">Remove Charts</a></li>
+								</ul>
+							</li>
 							<li><a href="/document-processing/excel/spreadsheet/blazor/rows-and-columns">Rows and Columns</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/blazor/filtering">Filtering</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/blazor/sorting">Sorting</a></li>

Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/customize-chart-appearance.md

@@ -0,0 +1,117 @@
+---
+layout: post
+title: How to Customize a Chart in Blazor Spreadsheet | Syncfusion
+description: Learn how to customize charts in the Syncfusion Blazor Spreadsheet component by modifying chart appearance and settings.
+platform: document-processing
+control: Spreadsheet
+documentation: ug
+---
+
+# How to Customize a Chart in Blazor Spreadsheet
+
+Once a chart is inserted into the worksheet, you can customize its appearance and structure from the **Chart Design** tab in the ribbon.
+
+## 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.
+
+When inserting a chart programmatically, the equivalent option is the [IsSeriesInRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.ChartModel.html#Syncfusion_Blazor_Spreadsheet_ChartModel_IsSeriesInRows) property of the `ChartModel` (passed to the [InsertChartAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertChartAsync_Syncfusion_Blazor_Spreadsheet_ChartModel_) method).
+
+## 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
+
+You can listen to the [ActionBeginning](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ActionBeginning) event to detect when a chart operation starts and react to it in code. Within the handler you receive an [ActionBeginningEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.ActionBeginningEventArgs.html) that exposes the action name and lets you cancel the operation.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@page "/"
+@using Syncfusion.Blazor.Spreadsheet
+
+<SfSpreadsheet ActionBeginning="OnActionBeginning">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    private void OnActionBeginning(ActionBeginningEventArgs args)
+    {
+        // React to chart-related actions (e.g. switch row/column, change chart type)
+        if (args.Action == "Chart")
+        {
+            // Hook point for additional chart logic. Marker customization for line
+            // charts is not yet exposed on the Blazor ChartModel.
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> The Blazor `ChartModel` exposes `Id`, `ChartType`, `Range`, `Theme`, and `IsSeriesInRows`. Marker shape, size, fill color, and border customization that exists in the React `actionBegin` marker override is **not currently exposed on the Blazor `ChartModel`**. Use the Chart Design ribbon options to modify chart elements until an API equivalent is available.

Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/overview.md

@@ -0,0 +1,54 @@
+---
+layout: post
+title: Charts and Visualizations in Blazor Spreadsheet | Syncfusion
+description: Learn about charts and visualizations in the Syncfusion Blazor Spreadsheet component, including chart creation, customization, and management.
+platform: document-processing
+control: Spreadsheet
+documentation: ug
+---
+
+# Charts and Visualizations in Blazor Spreadsheet
+
+## Understanding Charts
+
+The [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) 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://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowChart) property). Once created, charts behave as objects within the worksheet—they can be moved, resized, and customized without affecting the underlying data.
+
+## Overview of Chart and Visualization Operations
+
+The Blazor Spreadsheet component provides a variety of features for working with charts and visualizations. Below is a quick overview of each feature, with links to their respective documentation sections:
+
+* **[Insert Charts](./insert-charts)**: Add charts to your spreadsheet to visually represent your data.
+* **[Customize Chart Appearance](./customize-chart-appearance)**: Change the look and feel of your charts, including styles, colors, and chart types.
+* **[Remove Charts](./remove-charts)**: Delete charts that are no longer needed from your worksheet.
+
+## 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](../illustrations)
+* [Formatting](../formatting)
+* [Rows and columns](../rows-and-columns)