From 9ced91b003d6bd4e4fa6f35b1595834c20e971fd Mon Sep 17 00:00:00 2001 From: Lingesh Sriman Jaisankar Date: Fri, 11 Sep 2026 17:33:28 +0530 Subject: [PATCH 1/3] 1054065: Update the documentation for Chart Feature --- .../customize-chart-appearance.md | 117 ++++++++++++++++++ .../charts-and-visualization/insert-charts.md | 0 .../charts-and-visualization/overview.md | 54 ++++++++ .../charts-and-visualization/remove-charts.md | 0 4 files changed, 171 insertions(+) create mode 100644 Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/customize-chart-appearance.md create mode 100644 Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/insert-charts.md create mode 100644 Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/overview.md create mode 100644 Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/remove-charts.md diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/customize-chart-appearance.md b/Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/customize-chart-appearance.md new file mode 100644 index 0000000000..987a289840 --- /dev/null +++ b/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 + + + + + +@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. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/insert-charts.md b/Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/insert-charts.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/overview.md b/Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/overview.md new file mode 100644 index 0000000000..932a68988d --- /dev/null +++ b/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) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/remove-charts.md b/Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/remove-charts.md new file mode 100644 index 0000000000..e69de29bb2 From d8c70bf876a06e4e118398b9b876f0099818d981 Mon Sep 17 00:00:00 2001 From: Lingesh Sriman Jaisankar Date: Fri, 11 Sep 2026 18:18:16 +0530 Subject: [PATCH 2/3] 1054065: Update the documentation for Chart Feature --- Document-Processing-toc.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 009f1efdf4..096bcdece9 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5762,6 +5762,13 @@
  • Context Menu
  • Data Validation
  • Illustrations
    • +
  • Charts and Visualizations + +
  • Rows and Columns
  • Filtering
  • Sorting
    • From 6b97f8b287896ea22e810396b03733c0d628eaec Mon Sep 17 00:00:00 2001 From: Lingesh Sriman Jaisankar Date: Wed, 16 Sep 2026 16:46:43 +0530 Subject: [PATCH 3/3] 1054065: Updated insert-charts.md and remove-charts.md --- Document-Processing-toc.html | 8 +- .../charts-and-visualization/insert-charts.md | 78 ++++++++++++++++++ .../charts-and-visualization/remove-charts.md | 82 +++++++++++++++++++ 3 files changed, 164 insertions(+), 4 deletions(-) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 096bcdece9..9161c002db 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5762,11 +5762,11 @@
  • Context Menu
  • Data Validation
  • Illustrations
    • -
  • Charts and Visualizations +
  • Charts and Visualizations
  • Rows and Columns
    • diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/insert-charts.md b/Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/insert-charts.md index e69de29bb2..cfda2f863f 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/insert-charts.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/insert-charts.md @@ -0,0 +1,78 @@ +--- +layout: post +title: Insert Charts in Blazor Spreadsheet | Syncfusion +description: Learn about inserting charts in the Syncfusion Blazor Spreadsheet component to visualize worksheet data effectively. +platform: document-processing +control: Spreadsheet +documentation: ug +--- + +# Insert Charts in Blazor Spreadsheet +You can insert a chart from your worksheet either through the user interface or programmatically. + +## 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 [InsertChartAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertChartAsync_Syncfusion_Blazor_Spreadsheet_ChartModel_) method to insert the chart programmatically. + +The available parameter in the [InsertChartAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertChartAsync_Syncfusion_Blazor_Spreadsheet_ChartModel_) method is: + +| Parameter | Type | Description | +|-----|------|----| +| chart | [ChartModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.ChartModel.html) | Specifies the options to insert a chart in the spreadsheet. | + +The available arguments in the [ChartModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.ChartModel.html) are: + +* **ChartType**: Specifies the type of chart. +* **Theme**: Specifies the theme of a chart. +* **IsSeriesInRows**: Specifies whether data should be interpreted by rows (true) or columns (false). +* **Range**: Specifies the selected range or a specified range. +* **Id**: Specifies the chart element id. + +The following code example shows how to insert a chart in the spreadsheet: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Charts + + + + + + + +@code { + public byte[] DataSourceBytes { get; set; } + public SfSpreadsheet SpreadsheetInstance; + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } + + private async Task InsertChart() + { + // Insert a column chart using sales data from A1:B10 + var chart = new ChartModel + { + Id = "SalesChart", + ChartType = "Column", + Range = "A1:B10", + Theme = "Material", + IsSeriesInRows = false + }; + await SpreadsheetInstance.InsertChartAsync(chart); + } +} + +{% endhighlight %} +{% endtabs %} + +N> Although the [InsertChartAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertChartAsync_Syncfusion_Blazor_Spreadsheet_ChartModel_) method accepts only the [ChartModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.ChartModel.html) parameter, you can later move, resize, and customize the inserted chart using the [Chart Design ribbon tab](./customize-chart-appearance). To remove an inserted chart, use the [DeleteChartAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DeleteChartAsync_System_String_) method as described in the [Remove Charts](./remove-charts) documentation. diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/remove-charts.md b/Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/remove-charts.md index e69de29bb2..1aa5a20fdc 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/remove-charts.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/charts-and-visualization/remove-charts.md @@ -0,0 +1,82 @@ +--- +layout: post +title: Remove Charts in Blazor Spreadsheet | Syncfusion +description: Learn about removing charts in the Syncfusion Blazor Spreadsheet component and managing charts in worksheets. +platform: document-processing +control: Spreadsheet +documentation: ug +--- + +# Remove Charts in Blazor Spreadsheet + +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. Selection handles appear around the chart's border. +2. **Press `Delete` or `Backspace`** to remove the chart immediately. + +**Alternative method:** +- **Select the chart** and choose **Clear All** from the ribbon (this clears the selected chart). + +## Remove a Chart Programmatically + +Use the [DeleteChartAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DeleteChartAsync_System_String_) method to remove a chart through code. + +The `chartId` parameter is required and must be a non-empty, non-whitespace value. It is the [ChartModel.Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.ChartModel.html) that was supplied (or auto-generated) when the chart was inserted via [InsertChartAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertChartAsync_Syncfusion_Blazor_Spreadsheet_ChartModel_). + +N> Programmatic removal of the **currently selected** chart is not supported by the public API — [DeleteChartAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DeleteChartAsync_System_String_) always requires a `chartId`. To delete the active chart without supplying an id, use the **Remove a Chart Using the UI** steps above. + +The following code example shows how to remove a chart in the spreadsheet: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Charts + + + + + + + + +@code { + public byte[] DataSourceBytes { get; set; } + public SfSpreadsheet SpreadsheetInstance; + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } + + private async Task InsertChart() + { + // Insert a column chart using sales data from A1:B10 + var chart = new ChartModel + { + Id = "SalesChart", + ChartType = "Column", + Range = "A1:B10", + Theme = "Material", + IsSeriesInRows = false + }; + await SpreadsheetInstance.InsertChartAsync(chart); + } + + private async Task RemoveChartById() + { + // Remove the chart with the specified identifier + await SpreadsheetInstance.DeleteChartAsync("SalesChart"); + } +} + +{% endhighlight %} +{% endtabs %} + +N> If `chartId` is null, empty, or whitespace, the operation returns silently without throwing. Deletion is also skipped if [AllowChart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowChart) is set to **false**, or if the worksheet is protected.