Discover the new Angular 3D Chart component from Syncfusion and learn how to create stunning 3D charts with ease. See the demo and code samples.
The 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.
Angular 3D Charts
Let’s look at all of these more closely.
The Angular 3D Chart component offers six versatile chart types, easily configurable, with built-in support for visually stunning effects:
Different chart types supported in Angular 3D Chart
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.
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.
Data labels in Angular 3D Chart
Plot number, date-time, logarithmic, and string data types in the chart axis. The axis features include:
Axis types in Angular 3D Chart
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.
Legends in Angular 3D Chart
You can also add interactive features to the 3D charts:
User interactivity features in Angular 3D Chart
In addition to the previous features, the Angular 3D Chart supports:
Rotation and tilt features in Angular 3D Chart
We’ve explored the stunning features of the new Angular 3D Chart. Let’s see how to use it to visualize data!
First, create an Angular application by using the following command.
ng new-my app
cd my-app
Add the Syncfusion Angular Charts NuGet package to the application.
npm install @syncfusion/ej2-angular-charts –save
Import the 3D Chart module into the Angular app in the app.module.ts file.
Refer to the following code example.
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.
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.
<app-container></app-container>
Bind the JSON data to the Angular 3D Chart in the App.component.ts file.
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;
}
}
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.
Integrating 3D Chart in Angular apps
For more details, refer to the Angular 3D Chart documentation and demos.