Getting Started with Angular 3D Chart Component

This section explains the steps required to create a simple Angular 3D Chart and demonstrates the basic usage of the Angular 3D Chart component.

Note: This guide supports Angular 21 and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the Angular version support matrix. Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.

Ready to streamline your Syncfusion^® Angular development? Discover the full potential of Syncfusion^® Angular components with Syncfusion^® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion^® CodeStudio and more. Explore Syncfusion^® AI Coding Assistant

Prerequisites

Before getting started, ensure that your environment meets the system requirements for Syncfusion® Angular UI components, which covers supported Node.js, Angular, and @syncfusion/ej2-angular-charts versions.

Setup Angular environment

A straightforward approach to begin with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Verify the installation:

ng version

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Installing a specific version

To install a particular version of Angular CLI, use:

npm install -g @angular/[email protected]

Create an Angular application

With Angular CLI installed, execute this command to generate a new application:

ng new syncfusion-angular-app

This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.

? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]

By default, a CSS-based application is created. Use SCSS if required:

ng new syncfusion-angular-app --style=scss

During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Initial setup

Select the required AI tool or ‘none’ if you do not need any AI tool.

Initial setup

Navigate to your newly created application directory:

cd syncfusion-angular-app

Note: In Angular 19 and below, the CLI generates files like app.component.ts, app.component.html, app.component.css, etc. In Angular 20+, the CLI generates a simpler structure with src/app/app.ts, app.html, and app.css (no .component. suffixes).

Installing Syncfusion^® 3D Chart package

Syncfusion^®’s Angular component packages are available on npmjs.com. To use Syncfusion^® Angular components, install the necessary package.

This guide uses the Angular 3D Chart component for demonstration. Add the Angular Chart package with:

ng add @syncfusion/ej2-angular-charts

The above command will perform the following configurations:

Add the @syncfusion/ej2-angular-charts package and peer dependencies to your package.json.
Import the 3D Chart component in your application.

For more details on version compatibility, refer to the Version Compatibility section.

Syncfusion^® offers two package structures for Angular components:

Ivy library distribution package format
Angular compatibility compiler (ngcc), which is Angular’s legacy compilation pipeline.

Ivy library distribution package

Syncfusion^®’s latest Angular packages are provided as Ivy-compatible and suited for Angular 12 and above. To install the package, execute:

ng add @syncfusion/ej2-angular-charts

Angular compatibility compiled package(ngcc)

For applications not compiled with Ivy, use the ngcc tagged packages:

The ngcc packages are still compatible with Angular CLI versions 15 and below. However, they may generate warnings suggesting the use of Ivy compiled packages. Starting from Angular 16, support for the ngcc package has been completely removed. If you have further questions regarding ngcc compatibility, please refer to the following FAQ.

npm add @syncfusion/[email protected]

Add 3D Chart component

Modify the template in src/app/app.component.ts (or src/app/app.ts in Angular 20+) to render the 3D Chart component:

import { Component } from '@angular/core';
import { Chart3DModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [Chart3DModule],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the 3D Chart component
    template: `<ejs-chart3d id='chart-container'></ejs-chart3d>`,
})
export class AppComponent { }

Use the ng serve command to run the application in the browser:

ng serve

Verify that an empty 3D Chart renders before proceeding to the next step.

The following example shows a basic 3D Chart.

app.component.ts
main.ts
import { Chart3DModule } from '@syncfusion/ej2-angular-charts';
import { Component } from '@angular/core';

@Component({
    imports: [Chart3DModule],
    standalone: true,
    selector: 'app-container',
    // specifies the template string for the 3D Chart component
    template: `<ejs-chart3d id='chart-container'></ejs-chart3d>`
})
export class AppComponent {

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Module injection

3D Chart components are segregated into individual feature-wise modules. To use a particular feature, you need to inject its corresponding feature service in app.component.ts.

There are two ways to register 3D Chart services:

Chart3DAllModule — Registers every available feature service at once. Use this for quick setup or when you need most features.
Chart3DModule — Registers only the services you explicitly add to the providers array. This granular form is recommended for production applications to keep bundle size small.

For this application, column series, tooltip, data label, category axis, and legend features of the 3D Chart are used. The relevant feature service names and descriptions are:

Service	Description
`ColumnSeries3DService`	Required to render the column series.
`Legend3DService`	Required to render the legend.
`Tooltip3DService`	Required to render the tooltip.
`DataLabel3DService`	Required to render data labels.
`Category3DService`	Required to render the category axis.

Update src/app/app.component.ts to import the services and add them to the providers array of the component:

import { Component } from '@angular/core';
import { Chart3DModule, ColumnSeries3DService, Legend3DService, Tooltip3DService, DataLabel3DService, Category3DService } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [Chart3DModule],
    standalone: true,
    selector: 'app-root',
    providers: [ColumnSeries3DService, Legend3DService, Tooltip3DService, DataLabel3DService, Category3DService],
})
export class AppComponent { }

Populate chart with data and add a series

This section explains how to plot JSON data in the 3D Chart. The following example uses Chart3DAllModule to register every feature service, defines the sales data, configures the axes, and binds the series to the chart.

Add series to the 3D Chart in the component template using the <e-chart3d-series-collection> and <e-chart3d-series> child directives. 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.

The 3D Chart renders a 3D column series with the brand names (Tesla, Aion, Wuling, etc.) on the horizontal axis and the sales values on the vertical axis. The columns appear as 3D bars in the rendered scene.

app.component.ts
main.ts
import { Chart3DAllModule } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';

@Component({
    imports: [Chart3DAllModule],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart3d style='display:block;' align='center' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
    rotation=7 tilt=10 depth=100 [enableRotation]='enableRotation'>
    <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]='dataSource' type='Column' xName='x' yName='y'>
        </e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>`
})
export class AppComponent implements OnInit {
    public dataSource?: Object[];
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public enableRotation?: boolean;
    ngOnInit(): void {
        this.dataSource = [
            { 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 }];
        this.primaryXAxis = {
            valueType: 'Category',
            labelRotation: -45,
            labelPlacement: 'BetweenTicks'
        };
        this.primaryYAxis = {
            maximum: 150000,
            interval: 50000
        };
        this.enableRotation = true;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Troubleshooting

If the 3D Chart does not render as expected, check for these common issues:

“No provider for ColumnSeries3DService” error: Confirm that the relevant *3DService is added to the component’s providers array. Each feature requires its corresponding service.
Chart not visible: Verify that the <ejs-chart3d> element has a unique id and that the component’s selector matches the root element used in src/index.html (commonly <app-root>).
3D scene looks flat (no depth or lighting): Check that <e-chart3d-series> is wrapped in <e-chart3d-series-collection> and that enableRotation / enablePerspective are set on the chart if rotation is desired.
Data not displayed: Verify that the xName and yName values match the field names in the data source exactly, and that the valueType is set to Category for category data.
Build errors: Run ng version to confirm that Node.js, Angular CLI, and @syncfusion/ej2-angular-charts are on supported versions.
Port already in use: If ng serve fails because port 4200 is in use, run ng serve --port 4201 (or another free port) instead.

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Getting Started with Angular 3D Chart Component

Prerequisites

Setup Angular environment

Installing a specific version

Create an Angular application

Installing Syncfusion^® 3D Chart package

Ivy library distribution package

Angular compatibility compiled package(ngcc)

Add 3D Chart component

Module injection

Populate chart with data and add a series

Troubleshooting

See also

Getting Started with Angular 3D Chart Component

Prerequisites

Setup Angular environment

Installing a specific version

Create an Angular application

Installing Syncfusion® 3D Chart package

Ivy library distribution package

Angular compatibility compiled package(ngcc)

Add 3D Chart component

Module injection

Populate chart with data and add a series

Troubleshooting

See also

Installing Syncfusion^® 3D Chart package