> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/spreadsheet-editor/charts.md).
# Spreadsheet Editor - Charts
Apryse Spreadsheet Editor delivers Excel-like XLSX editing in the browser, including existing charts. Programmatically edit using Spreadsheet Editor code samples.
{% hint style="info" %}
**Requirements**
*These packages are required to use these features in production. Trial keys have unlimited access to all features*
Web SDKPackage: Spreadsheet EditorLive demo
{% endhint %}
Charts are visual representations of data that turn numbers into graphs, such as bar charts, line charts, or pie charts. They help customers understand patterns, compare values, and communicate insights clearly, especially in use cases like financial reporting, tracking trends, and monitoring performance.
Spreadsheet Editor enables you to view and edit existing standard charts directly within their XLSX files. When working in edit mode, updates to the underlying data are reflected in real time, allowing you to quickly validate insights without leaving the document. All chart updates are preserved when the file is exported, ensuring no loss of formatting or configuration upon saving or sharing. With in‑app chart support, you can:
* View spreadsheet data and charts together in the same workspace.
* Modify chart data without switching applications.
* Click a chart to select it, then move it to a different position in the spreadsheet and resize it by dragging its handles.
* Programmatically edit and interact with charts.
* Maintain chart fidelity when exporting, sharing, or reusing spreadsheets in other systems.
The editor also supports rendering of other floating objects, such as text boxes and shapes. These are graphical elements that sit above the spreadsheet grid, independent of individual cells.
## Supported charts
The following charts are supported:
* Column
* Bar
* Pie
* Donut
* Line
* Area
* Scatter
* Stock
* Radar
* Histogram
* Sunburst
{% hint style="info" %}
3D chart types will render as 2D.
{% endhint %}
## Unsupported charts
The following charts are unsupported at this time:
* Treemap
* Pareto
* Box & Whisker
* Waterfall
* Map
* Funnel
* 2D Map
* Dynamic Charts with Dynamic Arrays
* Interactive Drill-Down Charts
## APIs
This section details the APIs available for all things related to charts. For examples of how to programmatically change cell values used in chart data, see the Edit Mode guide's [Cells section](/web/spreadsheet-editor/edit-mode.md#cells).
### Get the chart manager
The `ChartManager` class is a singleton that stores a reference to all charts within a workbook. Use this class when you want to interact with charts, such as selecting, moving, or resizing them.
Use the [SpreadsheetEditorManager.getChartManager](https://sdk.apryse.com/api/web/Core.SpreadsheetEditor.SpreadsheetEditorManager.html#getChartManager__anchor) API to get the chart manager. If the workbook contains no charts, the chart manager is undefined, and the API returns null.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { documentViewer, SpreadsheetEditor } = instance.Core;
const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
const chartManager = spreadsheetEditorManager.getChartManager();
if (chartManager) {
console.log('Charts were found in the workbook', chartManager);
}
});
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
### Get charts from a specific sheet
Use [ChartManager.getChartsFromSheet](https://sdk.apryse.com/api/web/Core.SpreadsheetEditor.ChartManager.html#getChartsFromSheet__anchor) API to get a list of charts from the specified sheet index. The following code sample iterates through all sheets in a workbook and logs the charts from each sheet.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { documentViewer, SpreadsheetEditor } = instance.Core;
const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
const chartManager = spreadsheetEditorManager.getChartManager();
if (!chartManager) {
return;
}
const workbook = spreadsheetEditorManager.getWorkbook();
const sheetCount = workbook.sheetCount;
for (let sheetIndex = 0; sheetIndex < sheetCount; sheetIndex++) {
const charts = chartManager.getChartsFromSheet(sheetIndex);
console.log(charts);
}
});
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
### Select a chart
Use the [ChartManager.selectChart](https://sdk.apryse.com/api/web/Core.SpreadsheetEditor.ChartManager.html#selectChart__anchor) API to programmatically select a chart. The following code sample shows how to select the first chart in a sheet.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { documentViewer, SpreadsheetEditor } = instance.Core;
const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
const chartManager = spreadsheetEditorManager.getChartManager();
if (!chartManager) {
return;
}
const charts = chartManager.getChartsFromSheet(0);
if (charts?.length) {
chartManager.selectChart(charts[0].Id);
}
});
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
### Deselect a chart
If you ever need to deselect, you can use the [ChartManager.deselectChart](https://sdk.apryse.com/api/web/Core.SpreadsheetEditor.ChartManager.html#deselectChart__anchor) API to programmatically deselect a chart. The following code sample shows how to deselect a chart.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { documentViewer, SpreadsheetEditor } = instance.Core;
const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
const chartManager = spreadsheetEditorManager.getChartManager();
if (!chartManager) {
return;
}
// Assuming a chart is already selected ...
chartManager.deselectChart();
});
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
### Get the selected chart
Use the [ChartManager.getSelectedChart](https://sdk.apryse.com/api/web/Core.SpreadsheetEditor.ChartManager.html#getSelectedChart__anchor) API to get a reference to the currently selected chart. The following code sample selects the first chart in a sheet and gets its reference.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { documentViewer, SpreadsheetEditor } = instance.Core;
const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
const chartManager = spreadsheetEditorManager.getChartManager();
if (!chartManager) {
return;
}
const charts = chartManager.getChartsFromSheet(0);
if (charts?.length) {
chartManager.selectChart(charts[0].Id);
}
const selectedChart = chartManager.getSelectedChart();
console.log(selectedChart);
});
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
### Move a chart
{% hint style="info" %}
**Info**
Edit mode must be enabled.
{% endhint %}
Use the [ChartManager.moveChart](https://sdk.apryse.com/api/web/Core.SpreadsheetEditor.ChartManager.html#moveChart__anchor) API to move the chart's position on a sheet. Charts cannot be moved outside of the viewport. The following code sample shows how to move the first chart on the sheet to the top-left corner (0, 0).
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { documentViewer, SpreadsheetEditor } = instance.Core;
const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, async () => {
const chartManager = spreadsheetEditorManager.getChartManager();
if (!chartManager) {
return;
}
const charts = chartManager.getChartsFromSheet(0);
if (charts?.length) {
await chartManager.moveChart(charts[0].Id, { x: 0, y: 0 });
}
});
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
### Resize a chart
{% hint style="info" %}
**Info**
Edit mode must be enabled.
{% endhint %}
Use the [ChartManager.resizeChart](https://sdk.apryse.com/api/web/Core.SpreadsheetEditor.ChartManager.html#resizeChart__anchor) API to adjust the chart's size. Charts cannot be resized beyond the viewport and must have a minimum size of 50x50 pixels. The following code sample gets the first chart on a sheet and resizes it to a 300x300 square.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(instance => {
const { documentViewer, SpreadsheetEditor } = instance.Core;
const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, async () => {
const chartManager = spreadsheetEditorManager.getChartManager();
if (!chartManager) {
return;
}
const charts = chartManager.getChartsFromSheet(0);
if (charts?.length) {
await chartManager.resizeCharts(charts[0].Id, { width: 300, height: 300 });
}
});
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.apryse.com/web/spreadsheet-editor/charts.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.