Getting Started with React Chart in Next.js

29 Jul 20265 minutes to read

This section provides a step-by-step guide for setting up a Next.js application and integrating the React Charts component.

Prerequisites

Before getting started with the Next.js application, ensure the following prerequisites are met:

  • Node.js 18.17 or later (required by Next.js 14/15).
  • Next.js 14 or 15.
  • React 18 or 19.
  • @syncfusion/ej2-react-charts 27.2.x or later (compatible with React 18/19).
  • The application is compatible with macOS, Windows, and Linux operating systems.

Step 1: Create a Next.js application

To create a new Next.js application, use one of the commands that are specific to either NPM or Yarn.

npx create-next-app@latest
yarn create next-app

Using one of the above commands will lead you to set up additional configurations for the project as below:

1.Define the project name: Users can specify the name of the project directly. Let’s specify the name of the project as ej2-nextjs-chart.

√ What is your project named? » ej2-nextjs-chart

2.Select the required packages.

√ Would you like to use the recommended Next.js defaults? » Yes, use recommended defaults

By selecting default packages, all essential packages for Next.js will be installed.

3.Once complete the above mentioned steps to create ej2-nextjs-chart, navigate to the directory using the below command:

cd ej2-nextjs-chart

The application is ready to run with default settings. Now, let’s add Syncfusion® components to the project.

Step 2: Install Syncfusion® React packages

Syncfusion® React component packages are available at npmjs.com. To use Syncfusion® React components in the project, install the corresponding npm package.

Here, the React Chart component is used in the project. To install the React Chart component, use the following command:

npm install @syncfusion/ej2-react-charts --save
yarn add @syncfusion/ej2-react-charts

Step 3: Add the Chart component

Replace the contents of src/app/page.tsx with the following code. The example below uses typed data, registers the Syncfusion license, imports a theme stylesheet, and renders the chart as columns.

'use client';
import {
  Category,
  ChartComponent,
  ColumnSeries,
  Inject,
  SeriesCollectionDirective,
  SeriesDirective,
} from '@syncfusion/ej2-react-charts';


export default function Home() {
  const data = [
    { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
    { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
    { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
    { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 },
  ];
  const primaryXAxis = { valueType: 'Category' } as const;

  return (
    <ChartComponent id="charts" primaryXAxis={primaryXAxis}>
      <Inject services={[ColumnSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective
          dataSource={data}
          xName="month"
          yName="sales"
          name="Sales"
          type="Column"
        />
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}

Step 4: Run the application

To run the application, use the following command:

npm run dev
yarn run dev

Open the URL printed in the terminal (for example, http://localhost:3000/) in a browser. The application displays the chart as shown below:

NextJS Chart in Next.js

To learn more about the functionality of the Chart component, refer to the documentation.

View the Next.js Chart sample in the GitHub repository.

Troubleshooting

  • Chart does not render (blank page)
    • Confirm src/app/page.tsx begins with 'use client';.
  • Module not found: Can't resolve '@syncfusion/ej2-react-charts'
    • Run npm install @syncfusion/ej2-react-charts (or yarn add @syncfusion/ej2-react-charts) in the project root.