Chart Element

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

   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.

   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 {
     constructor(props) {
       super(props);
       this.hostStyle = {
         width: "1100px",
         height: "800px",
       };
     }
   
     // Handling workbook initialized event
     workbookInit = (spread) => {
       this.setState({
         spread: spread,
       });
       let chart_columnClustered, chart_columnStacked, chart_columnStacked100;
   
       // Fetching sheet
       let sheetCharts = spread.getSheet(0);
   
       // Setting Sheetname
       sheetCharts.name("Charts");
       sheetCharts.suspendPaint();
   
       //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" });
   
       sheetCharts.resumePaint();
     };
   
     render() {
       return (
         <div>
           <SpreadSheets
             backColor={this.spreadBackColor}
             hostStyle={this.hostStyle}
             workbookInitialized={this.workbookInit}
           >
             <Worksheet></Worksheet>
           </SpreadSheets>
         </div>
       );
     }
   }
   
   export default App;