SpreadJS 14
JavaScript Frameworks / SpreadJS with React / Chart Element
In This Topic
    Chart Element
    In This Topic

    Using the chart functionality in SpreadJS with React, you can visualise data for your applications while keeping all the chart elements in synchronization with the native data binding support.

    1. Create a React Project

      Open the Command Prompt window and type the following commands:

      npm install -g create-react-app
      create-react-app quick-start
      cd quick-start
      npm start

      After you finish, the react project will be created at the specified location in the directory. For more information on how to create a React project, refer to https://reactjs.org/docs/create-a-new-react-app.html

    2. Install SpreadJS React module in project

      Next, you need to install @grapecity/spread-sheets-react in your project using the following command:

      npm install @grapecity/spread-sheets-react
    3. Import SpreadJS CSS into index.js file

      Next, you need to import the SpreadJS CSS in your index.js file using the following code:

      import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
    4. Install Charts React Module in the Project

      Next, you need to install the charts module in your project using the following command:

      npm install @grapecity/spread-sheets-charts

    5. Use Charts in React Application

      Now, you can modify the App.js file as per your requirements. Changes will be reflected when the browser window is refreshed. As an example, you can use the sample code given below:

      This example shows how to use charts in a React Application.

      Copy Code

      import React from 'react';
      import './App.css';
      import GC from '@grapecity/spread-sheets';
      import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react';

      // Import the Charts module
      import '@grapecity/spread-sheets-charts';

      var SpreadJSKey = "xxx";
      GC.Spread.Sheets.LicenseKey = SpreadJSKey;

      class App extends React.Component


              this.hostStyle =
                      width: '1100px',
                      height: '800px'

      // Handling workbook initialized event
      workbookInit = (spread) =>

                  spread: spread});
      let chart_columnClustered, chart_columnStacked, chart_columnStacked100;

      // Fetching sheet
      let sheetCharts = spread.getSheet(0);

      // Setting Sheetname

      //Prepare data for chart
      sheetCharts.setValue(0, 1, "Q1");
      sheetCharts.setValue(0, 2, "Q2");
      sheetCharts.setValue(0, 3, "Q3");
      sheetCharts.setValue(1, 0, "Mobile Phones");
      sheetCharts.setValue(2, 0, "Laptops");
      sheetCharts.setValue(3, 0, "Tablets");
      for (var r = 1; r <= 3; r++)

           for (var c = 1; c <= 3; c++) {
           sheetCharts.setValue(r, c, parseInt(Math.random() * 100));

       // Add columnClustered chart
      chart_columnClustered = sheetCharts.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 5, 150, 300, 300, "A1:D4");
      chart_columnClustered.title({ text: "Annual Sales" });

      // Add columnStacked chart
      chart_columnStacked = sheetCharts.charts.add('chart_columnStacked', GC.Spread.Sheets.Charts.ChartType.columnStacked, 320, 150, 300, 300, "A1:D4");
      chart_columnStacked.title({ text: "Annual Sales" });

      // Add columnStacked100 chart
      chart_columnStacked100 = sheetCharts.charts.add('chart_columnStacked100', GC.Spread.Sheets.Charts.ChartType.columnStacked100, 640, 150, 300, 300, "A1:D4");
      chart_columnStacked100.title({ text: "Annual Sales" });


      render() {
      return (
      <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}>

      export default App;