Getting Started with React Accumulation Chart Component

22 Jul 20267 minutes to read

This section describes the steps to create a simple Accumulation Chart component.

A quick video overview of the React Accumulation Charts setup is available:

Prerequisites

Before getting started, ensure that your development environment meets the system requirements for Syncfusion® React UI components. That page documents the supported React, Node.js, and npm versions, and includes the React-version compatibility table for Syncfusion React components.

Before You Begin

This guide uses the React application structure generated by Vite with the TypeScript template. The following files are part of that scaffold and work together as follows:

  • src/App.tsx — Defines the root React component that hosts the Accumulation Chart component. This is the only file edited in this guide.
  • src/main.tsx — Application entry point that renders App into the #root element defined in index.html.
  • index.html — Root HTML file that contains the #root container element used to mount the React application.

Note: In a Vite React TypeScript application, the root component is commonly generated as src/App.tsx. If your application uses JavaScript, the equivalent file is typically src/App.jsx.

Note: This guide uses the TypeScript template for better type checking with Accumulation Chart models.

Installation and configuration

Note: As an alternative, you can create a React application using create-react-app. For detailed instructions, refer to this documentation.

Step 1: Create a React application with Vite

Use Vite to create and manage React applications. Vite provides a fast development environment and optimized builds for modern React applications. Syncfusion® React documentation also recommends Vite for setting up React applications.

Start by opening a terminal on your system (Command Prompt, PowerShell, or Terminal). You may work from the default C: drive location or create a new folder and open the terminal in it.

Create a new React application using the following command.

npm create vite@latest my-chart-app -- --template react-ts

If Vite prompts you to install dependencies and start the project immediately, choose No. The Syncfusion package is installed in a later step.

Navigate to the project folder:

cd my-chart-app

Install the application dependencies:

npm install

Note: If you prefer JavaScript instead of TypeScript, create the application using npm create vite@latest my-chart-app -- --template react.

Step 2: Install the Syncfusion® React Chart package

All Syncfusion Essential® JS 2 packages are published to the npm registry.

Install the React Chart package using the following command:

npm install @syncfusion/ej2-react-charts

Installing @syncfusion/ej2-react-charts automatically pulls in the required peer dependencies (for example, @syncfusion/ej2-base and @syncfusion/ej2-charts). Run npm install once more if the package is not yet listed in package.json. Then open the project in your IDE to continue with the next step.

Step 3: Add the Accumulation Chart component

Add the Accumulation Chart component to src/App.tsx using the following code.

import { AccumulationChartComponent } from '@syncfusion/ej2-react-charts';
function App() {
  return (<AccumulationChartComponent />);
}
export default App;

Note: Running npm run dev (Step 6) at this point renders an empty Accumulation Chart area. Continue with the next steps to inject modules, add data, and configure a series so the chart can render the data.

Step 4: Inject required modules

Accumulation Chart features are delivered as separate modules and must be explicitly injected. The Inject component takes a services array that registers the modules the Accumulation Chart component is allowed to use; injecting only the modules you need keeps the bundle small. Here, the PieSeries module is used to render a basic pie chart:

  • PieSeries — Inject this module into services to render a pie series.

Import the module from the Chart package and register it through the Inject component as follows.

import { AccumulationChartComponent, PieSeries, Inject } from '@syncfusion/ej2-react-charts';
function App() {
  return (
    <AccumulationChartComponent id="charts">
      <Inject services={[PieSeries]} />
    </AccumulationChartComponent>
  );
}
export default App;

Note: At this stage, no pie series is rendered because the Accumulation Chart component has not yet been configured with a data source.

Step 5: Populate the Accumulation Chart with data

Pie chart data should be provided as a JSON array of objects, one object per slice. Each object uses the following fields:

  • x — the slice’s category label (used for tooltips and the legend).
  • y — the slice’s numeric value. The slice’s angular size is proportional to this value.
  • text — an optional label used by data labels (see Add data label). Omit this field if you do not plan to show data labels.

Define the data in src/App.tsx and bind it to the chart. The series props used below are:

  • dataSource — the array of data objects.
  • xName and yName — the field names in each data object used for the slice label and value.
  • radius — the radius of the pie, as a number (for example, 90 for pixels) or a percentage string (for example, "90%").
  • type — the series type. Use "Pie" for a pie chart.
import {
  AccumulationChartComponent, AccumulationSeriesCollectionDirective,
  AccumulationSeriesDirective, Inject, PieSeries
} from '@syncfusion/ej2-react-charts';

function App() {
  const data = [
    { x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
    { x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
    { x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
    { x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
    { x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }
  ];

  return (
    <AccumulationChartComponent id="charts">
      <Inject services={[PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective
          dataSource={data}
          xName="x"
          yName="y"
          radius="90%"
          type="Pie"
        />
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  );
}
export default App;

Step 6: Run the application

Run the application using the following command:

npm run dev

Open the generated local URL (for example, http://localhost:5173/) in the browser. The application displays the basic pie chart as shown below:

Pie chart of monthly data for January through October

To stop the dev server, press Ctrl + C in the terminal. To create a production build and preview it, run:

npm run build
npm run preview

See also