# Chart Element

## Content

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:

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

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

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

    ```Shell
    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.

    ```JSX
    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;
    ```