Insert Charts in React Spreadsheet

10 Jul 202612 minutes to read

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 method to insert the chart programmatically.

The available parameter in the 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:

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
    }]);
    spreadsheet.insertChart([{
      type: 'Pie',
      range: 'A1:B6',
      top: 120, left: 500, height: 300, width: 500
    }]);
    spreadsheet.insertChart([{
      type: 'Area',
      range: 'A1:B6',
      top: 120, left: 1000, height: 300, width: 500
    }]);
  };

  return (
  <div>
      <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 />);
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
    }]);
    spreadsheet.insertChart([{
      type: 'Pie',
      range: 'A1:B6',
      top: 120, left: 500, height: 300, width: 500
    }]);
    spreadsheet.insertChart([{
      type: 'Area',
      range: 'A1:B6',
      top: 120, left: 1000, height: 300, width: 500
    }]);
  };

  return (
  <div>
      <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 />);
/**
 * 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 }
];
/**
 * 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 }
];