Getting Started with React 3D Chart

10 Aug 202611 minutes to read

This section describes the steps to create a simple 3D Chart component and demonstrates its basic usage.

A quick video overview of the React 3D 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.

Dependencies

When you install @syncfusion/ej2-react-charts, the following dependent packages are installed automatically:

|-- @syncfusion/ej2-react-charts
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-svg-base

Set up a development environment

To set up a React application quickly, use create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up the environment using JavaScript and optimizes applications for production.

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

To create a new React application, run one of the following commands based on your preferred language:

React with JavaScript

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

React with TypeScript

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

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

  • Which linter to use? → ESLint
  • Install with npm and start now? → Yes

Selecting Yes automatically installs the project dependencies and starts the development server.

After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.

Then, navigate to the project directory:

cd my-app

Install the Syncfusion® React 3D Chart package

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

Install the React 3D Chart package using the following command:

npm install @syncfusion/ej2-react-charts

Add the 3D Chart component to the project

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

import { Chart3DComponent } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return <Chart3DComponent id='charts' />;
}
export default App;

const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
import { Chart3DComponent } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
  return <Chart3DComponent id='charts' />
}
export default App;

const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);

Running npm run dev at this point renders an empty 3D Chart area. Continue with the next steps to inject modules, add data, and configure a series so the 3D Chart can render the data.

Inject Required Modules

3D Chart features are delivered as separate modules and must be explicitly injected. The Inject component accepts a services array that registers the modules required by the 3D Chart component. Injecting only the modules you need helps keep the application bundle size smaller.

In this example, the Tooltip3D module is injected to enable tooltip functionality for the 3D Chart.

  • Tooltip3D - Inject this module into the services array to enable tooltips for the 3D Chart.

Import the required module from the Chart package and register it through the Inject component as shown below.

import { Chart3DComponent, Tooltip3D, Inject } from '@syncfusion/ej2-react-charts';
import * as React from 'react';

function App() {
  return (
    <Chart3DComponent id="charts">
      <Inject services={[Tooltip3D]} />
    </Chart3DComponent>
  );
}

export default App;

At this stage, no series are rendered because the 3D Chart component has not yet been configured with a data source.

Populate 3D Chart with data

This section explains how to plot the following JSON data to the 3D Chart.

export let data: Object[] = [
    { x: 'Tesla', y: 137429 },
    { x: 'Aion', y: 80308 },
    { x: 'Wuling', y: 76418 },
    { x: 'Changan', y: 52849 },
    { x: 'Geely', y: 47234 },
    { x: 'Nio', y: 31041 },
    { x: 'Neta', y: 22449 },
    { x: 'BMW', y: 18733 }
];

Add series to the 3D Chart using the <Chart3DSeriesCollectionDirective> and <Chart3DSeriesDirective> components. Map the JSON fields x and y to the series xName and yName properties, and set the JSON array as the dataSource property.

Since the JSON contains category data, set the valueType for the horizontal axis (primaryXAxis) to Category. By default, the axis valueType is Numeric.

import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Inject, Category3D, ColumnSeries3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

export let data = [
    { x: 'Tesla', y: 137429 },
    { x: 'Aion', y: 80308 },
    { x: 'Wuling', y: 76418 },
    { x: 'Changan', y: 52849 },
    { x: 'Geely', y: 47234 },
    { x: 'Nio', y: 31041 },
    { x: 'Neta', y: 22449 },
    { x: 'BMW', y: 18733 }
];

function App() {
    return (<Chart3DComponent id='charts' style= primaryXAxis=
        wallColor='transparent'
        primaryYAxis= enableRotation={true} rotation={7} tilt={10} depth={100}>
        <Inject services={[ColumnSeries3D, Category3D]} />
        <Chart3DSeriesCollectionDirective >
            <Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='Column'>
            </Chart3DSeriesDirective>
        </Chart3DSeriesCollectionDirective>
    </Chart3DComponent>)
}
;
export default App;

const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
import { Category3D, Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, ColumnSeries3D, Inject } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

export let data: Object[] = [
  { x: 'Tesla', y: 137429 },
  { x: 'Aion', y: 80308 },
  { x: 'Wuling', y: 76418 },
  { x: 'Changan', y: 52849 },
  { x: 'Geely', y: 47234 },
  { x: 'Nio', y: 31041 },
  { x: 'Neta', y: 22449 },
  { x: 'BMW', y: 18733 }
];


function App() {
  return (<Chart3DComponent id='charts' style= primaryXAxis=
    wallColor='transparent'
    primaryYAxis= enableRotation={true} rotation={7} tilt={10} depth={100}>
    <Inject services={[ColumnSeries3D, Category3D]} />
    <Chart3DSeriesCollectionDirective >
      <Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='Column'>
      </Chart3DSeriesDirective>
    </Chart3DSeriesCollectionDirective>
  </Chart3DComponent>)
};
export default App;

const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);

Run the application

Run the application using the following command:

npm run dev

Troubleshooting

Use the following guidance to resolve common issues when getting started with the 3D Chart component.

  • Chart does not render (blank page)
    • Verify that index.html contains a container with id="root", and that main.tsx/main.jsx calls ReactDOM.createRoot(document.getElementById("root")) followed by root.render(<App />).
    • Run npm install again to ensure all peer dependencies listed in the Dependencies section are installed.
  • Tooltip, legend, or data labels are not visible after enabling them
    • The corresponding modules must be injected into the services array of the Inject component as shown in the Module injection section. For example, tooltip will not appear without Tooltip3D, and data labels will not render without DataLabel3D.
  • Series data is not plotted or appears empty
    • Confirm that the dataSource array contains objects with the property names set in xName and yName (case sensitive).
    • If the x field contains string categories, set the valueType of primaryXAxis to Category; otherwise points will not be mapped correctly.
  • Build or dev server fails to start
    • Confirm that you are using a supported Node.js version (Node 18 or later for the latest Vite templates).
    • Delete node_modules and package-lock.json, then run npm install again.

See also

Explore the following related topics: