Remove Charts in React Spreadsheet

10 Jul 202611 minutes to read

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 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:

app.jsx

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=>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 />);

app.tsx

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=>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 />);

datasource.jsx

/**
 * 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 }
];

datasource.tsx

/**
 * 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 }
];