Using the 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.

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/add-react-to-a-new-app.html

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
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';
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

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.

JavaScript	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 { 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;

JavaScript

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

{
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;