Unveiling the New Angular 3D Chart: A Step Forward in Data Visualization
Tags: angular, charts, datavisualization, web
Published: 2024-01-19 12:52:17

---
title: Unveiling the New Angular 3D Chart: A Step Forward in Data Visualization
published: true
date: 2024-01-10 12:50:42 UTC
tags: angular, charts, datavisualization, web
canonical_url: https://www.syncfusion.com/blogs/post/angular-3d-chart.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3dn0rvz8nbsqfh0ikag.png
---
Three-dimensional (3D) charts go beyond the limitations of traditional two-dimensional graphs, providing a dynamic canvas for illustrating complex datasets.

In Syncfusion’s [Essential Studio 2023 Volume 4](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4") release, we are thrilled to introduce our latest addition—the [Angular 3D Chart](https://www.syncfusion.com/angular-components/angular-3d-chart "Angular 3D Chart") component. This cutting-edge tool is designed to improve data presentation by injecting depth and clarity into your visualizations. Let’s explore the features of this new Angular 3D Chart and the steps to get started with it!

## Angular 3D Chart: An overview

The [Angular 3D Chart component](https://ej2.syncfusion.com/angular/documentation/3d-chart/getting-started "Getting started with Angular 3D Chart component") provides a graphical representation of data in three dimensions, showcasing relationships and trends among variables. Unlike traditional 2D charts, 3D charts add depth to the visualization, allowing for a better understanding of data patterns.

With tool, you can effortlessly create various 3D chart types: **bar**, **stacked bar**, **100%  stacked bar**, **column**, **stacked column**, **100% stacked column**, **pie**, and **doughnut**. 
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Angular-3D-Charts.gif" alt="Angular 3D Charts" style="width:100%">

  <figcaption>Angular 3D Charts</figcaption>

</figure>

## Key features

The Angular 3D Chart component supports the following key features:

- [Chart types](#Chart)
- [Data binding](#Data)
- [Data labels](#Labels)
- [Axis types](#Axis)
- [Legends](#Legends)
- [User interaction](#User)
- [Rotation and tilt](#Rotation)

Let’s look at all of these more closely.

### <a name="Chart">Chart types</a>

The Angular 3D Chart component offers six versatile chart types, easily configurable, with built-in support for visually stunning effects:

- **Column** : Represents data with vertical bars for easy value comparison.
- **Bar** : Utilizes horizontal bars to display data and facilitate value comparison.
- **Stacked column** : Plots data points on top of each other using vertical bars for comprehensive visualization.
- **Stacked bar** : Achieves the same effect as the stacked column but with horizontal bars.
- **100% stacked column** : Illustrates the percentage distribution of multiple datasets within a total, with each column adding up to 100%.
- **100% stacked bar** : Like the stacked column but using horizontal bars, showcasing the percentage distribution of datasets within a total.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Different-chart-types-supported-in-Angular-3D-Chart.gif" alt="Different chart types supported in Angular 3D Chart" style="width:100%">

  <figcaption>Different chart types supported in Angular 3D Chart</figcaption>

</figure>

### <a name="Data">Data binding</a>

Effortlessly bind the 3D Chart component with an array of JSON objects or a data manager, with support for both local and remote data binding methods. In addition to the chart series, data labels and tooltips can also be bound to your data.

### <a name="Labels">Data labels</a>

Annotate points with labels to improve the readability of data. Enhance these labels with HTML elements such as images, DIVs, and spans, creating informative and visually appealing data representations.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Data-labels-in-Angular-3D-Chart.png" alt="Data labels in Angular 3D Chart" style="width:100%">

  <figcaption>Data labels in Angular 3D Chart</figcaption>

</figure>

### <a name="Axis">Axis types</a>

Plot number, date-time, logarithmic, and string data types in the chart axis. The axis features include:

- **Inversed axis** : Flip the axis direction from its default orientation.
- **Opposed position** : Display the axis in the opposite position.
- **Multiple axes** : Include more than one axis on the same or opposite side.
- **Smart labels** : Add dynamic labels that automatically position themselves to enhance readability and prevent overlapping.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Axis-types-in-Angular-3D-Chart.png" alt="Axis types in Angular 3D Chart" style="width:100%">

  <figcaption>Axis types in Angular 3D Chart</figcaption>

</figure>

### <a name="Legends">Legends</a>

Provide additional information about the data series using a customizable legend. Labels and symbols aid viewers in identifying and differentiating between various series within the chart.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Legends-in-Angular-3D-Chart.png" alt="Legends in Angular 3D Chart" style="width:100%">

  <figcaption>Legends in Angular 3D Chart</figcaption>

</figure>

### <a name="User">User interaction</a>

You can also add interactive features to the 3D charts:

- **Tooltip** : A small, informative pop-up box offering additional context, details, or information when users hover over or click on data points.
- **Highlight and selection** : Easily highlight and select data points for improved comprehension. Adding patterns and colors to selected data enhances chart interactivity.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/User-interactivity-features-in-Angular-3D-Chart.gif" alt="User interactivity features in Angular 3D Chart" style="width:100%">

  <figcaption>User interactivity features in Angular 3D Chart</figcaption>

</figure>

### <a name="Rotation">Rotation and tilt</a>

In addition to the previous features, the Angular 3D Chart supports:

- **Rotation** : Dynamically rotate the 3D Chart from 0 to 360 degrees around a fixed point or axis in a three-dimensional space. Rotation can occur in a clockwise or counterclockwise direction.
- **Tilt** : Alter the inclination angle of the chart along one axis, providing a different perspective.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Rotation-and-tilt-features-in-Angular-3D-Chart.gif" alt="Rotation and tilt features in Angular 3D Chart" style="width:100%">

  <figcaption>Rotation and tilt features in Angular 3D Chart</figcaption>

</figure>

## Getting started with the Angular 3D Chart component

We’ve explored the stunning features of the new Angular 3D Chart. Let’s see how to use it to visualize data!

### Step 1: Create an Angular application

First, create an Angular application by using the following command.

```
ng new-my app
cd my-app
```

### Step 2: Install the Syncfusion Angular Charts NuGet package

Add the Syncfusion Angular Charts NuGet package to the application.

```
npm install @syncfusion/ej2-angular-charts –save
```

### Step 3: Register the 3D Chart module

Import the 3D Chart module into the Angular app in the **app.module.ts** file.

Refer to the following code example.

```js
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the ChartModule for the Chart component
import { Chart3DModule } from '@syncfusion/ej2-angular-charts';
import { AppComponent } from './app.component';

@NgModule({
  //declaration of ChartModule into NgModule
  imports: [BrowserModule, Chart3DModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Then, modify the template in the **app.component.ts** file to render the 3D Chart.

```js
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-container',
  // specifies the template string for the 3D Charts component
  template: `<ejs-chart3d id='chart-container'></ejs-chart3d>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent { }
```

Use the **app-container** in the **index.html** file instead of the default one.

```xml
<app-container></app-container>
```

### Step 4: Populate the chart with data

Bind the JSON data to the Angular 3D Chart in the **App.component.ts** file.

```js
import { Component, OnInit } from '@angular/core';

@Component({
    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;
    }
}
```

### Step 5: Run the app

Finally, run the app in the browser using the following command.

```
npm start
```

After executing the previous code examples, we’ll get output like in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Integrating-3D-Chart-in-Angular-apps.png" alt="Integrating 3D Chart in Angular apps" style="width:100%">

  <figcaption>Integrating 3D Chart in Angular apps</figcaption>

</figure>

## References

For more details, refer to the [Angular 3D Chart documentation](https://ej2.syncfusion.com/angular/documentation/3d-chart/getting-started "Getting started with Angular 3D Chart component") and [demos](https://ej2.syncfusion.com/angular/demos/#/material3/three-dimension-chart/column "Angular 3D Chart Live demo").

## Conclusion

Thank you for taking the time to explore our new [Angular 3D Chart](https://www.syncfusion.com/angular-components/angular-3d-chart "Angular 3D Chart") component, a remarkable addition to our [2023 Volume 4](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4") release. This powerful tool is designed to improve your app development process, and we’re eager to hear your thoughts on it. Don’t hesitate to share your opinion in the comments section.

For a detailed overview of all the exciting updates in this release, we invite you to visit our [Release Notes](https://ej2.syncfusion.com/angular/documentation/release-notes/24.1.41?type=all "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew/angular "Essential Studio What’s New") pages. For our existing customers, the new version of Essential Studio is available on the [License and Downloads](https://www.syncfusion.com/account/login "Essential Studio License and Downloads page") page. If you’re new to Syncfusion, we offer a [30-day free trial](https://www.syncfusion.com/downloads "Get free evaluation of Essential Studio products") so you can experience the wide array of features we provide. It’s a great opportunity to explore how our tools can enhance your development process.

If you have any questions, you can reach us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). Your satisfaction is our top priority, and we’re always happy to assist you in any way we can.

## Related blogs

- [What’s New in Essential JS 2: 2023 Volume 4](https://www.syncfusion.com/blogs/post/essential-js-2-2023-volume-4.aspx "Blog: What’s New in Essential JS 2: 2023 Volume 4")
- [Easily Create Interactive Digital Logic Circuits in Angular](https://www.syncfusion.com/blogs/post/digital-logic-circuits-angular.aspx "Blog: Easily Create Interactive Digital Logic Circuits in Angular")
- [Maximizing Angular Charts Performance with Lazy Loading](https://www.syncfusion.com/blogs/post/lazy-loading-angular-charts.aspx "Blog: Maximizing Angular Charts Performance with Lazy Loading")
- [Easily Build an Interactive BPMN Viewer and Editor in Angular](https://www.syncfusion.com/blogs/post/create-bpmn-viewer-using-angular.aspx "Blog: Easily Build an Interactive BPMN Viewer and Editor in Angular")