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 create vite@latest quick-start -- --template react
cd quick-start
npm install
npm run dev
```
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 with Vite, refer to https://vite.dev/guide/
Install SpreadJS React module in project
Next, you need to install @mescius/spread-sheets-react in your project using the following command:
```
npm install @mescius/spread-sheets-react
```
Install Charts React Module in the Project
Next, you need to install the charts module in your project using the following command:
```
npm install @mescius/spread-sheets-shapes
npm install @mescius/spread-sheets-charts
```

Use Charts in React Application

Now, you can modify the App.jsx 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 { useCallback } from "react";
import "./App.css";
import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import * as GC from "@mescius/spread-sheets";
import { SpreadSheets, Worksheet } from "@mescius/spread-sheets-react";

// Import the Charts module
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-charts";

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

const hostStyle = {
  width: "1100px",
  height: "800px",
};

function App() {
  // Handling workbook initialized event
  const workbookInit = useCallback((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();
  }, []);

  return (
    <div>
      <SpreadSheets
        hostStyle={hostStyle}
        workbookInitialized={workbookInit}
      >
        <Worksheet></Worksheet>
      </SpreadSheets>
    </div>
  );
}

export default App;