Three-dimensional (3D) charts transcend the constraints of conventional two-dimensional graphs, offering a dynamic canvas for illustrating advanced datasets.
In Syncfusion’s Important Studio 2023 Quantity 4 launch, we’re thrilled to introduce our newest addition—the Angular 3D Chart element. This cutting-edge software is designed to enhance knowledge presentation by injecting depth and readability into your visualizations. Let’s discover the options of this new Angular 3D Chart and the steps to get began with it!
Angular 3D Chart: An summary
The Angular 3D Chart element offers a graphical illustration of information in three dimensions, showcasing relationships and tendencies amongst variables. In contrast to conventional 2D charts, 3D charts add depth to the visualization, permitting for a greater understanding of information patterns.
With software, you’ll be able to effortlessly create varied 3D chart sorts: bar, stacked bar, 100% stacked bar, column, stacked column, 100% stacked column, pie, and doughnut.
Key options
The Angular 3D Chart element helps the next key options:
Let’s take a look at all of those extra intently.
Chart sorts
The Angular 3D Chart element presents six versatile chart sorts, simply configurable, with built-in help for visually gorgeous results:
- Column: Represents knowledge with vertical bars for simple worth comparability.
- Bar: Makes use of horizontal bars to show knowledge and facilitate worth comparability.
- Stacked column: Plots knowledge factors on prime of one another utilizing vertical bars for complete visualization.
- Stacked bar: Achieves the identical impact because the stacked column however with horizontal bars.
- 100% stacked column: Illustrates the share distribution of a number of datasets inside a complete, with every column including as much as 100%.
- 100% stacked bar: Just like the stacked column however utilizing horizontal bars, showcasing the share distribution of datasets inside a complete.
Knowledge binding
Effortlessly bind the 3D Chart element with an array of JSON objects or a knowledge supervisor, with help for each native and distant knowledge binding strategies. Along with the chart collection, knowledge labels and tooltips may also be sure to your knowledge.
Knowledge labels
Annotate factors with labels to enhance the readability of information. Improve these labels with HTML parts equivalent to photographs, DIVs, and spans, creating informative and visually interesting knowledge representations.
Axis sorts
Plot quantity, date-time, logarithmic, and string knowledge sorts within the chart axis. The axis options embody:
- Inversed axis: Flip the axis path from its default orientation.
- Opposed place: Show the axis within the reverse place.
- A number of axes: Embrace a couple of axis on the identical or reverse facet.
- Good labels: Add dynamic labels that routinely place themselves to reinforce readability and forestall overlapping.
Legends
Present extra details about the information collection utilizing a customizable legend. Labels and symbols assist viewers in figuring out and differentiating between varied collection throughout the chart.
Consumer interplay
You may also add interactive options to the 3D charts:
- Tooltip: A small, informative pop-up field providing extra context, particulars, or data when customers hover over or click on on knowledge factors.
- Spotlight and choice: Simply spotlight and choose knowledge factors for improved comprehension. Including patterns and colours to chose knowledge enhances chart interactivity.
Rotation and tilt
Along with the earlier options, the Angular 3D Chart helps:
- Rotation: Dynamically rotate the 3D Chart from 0 to 360 levels round a set level or axis in a three-dimensional house. Rotation can happen in a clockwise or counterclockwise path.
- Tilt: Alter the inclination angle of the chart alongside one axis, offering a special perspective.
Getting began with the Angular 3D Chart element
We’ve explored the gorgeous options of the brand new Angular 3D Chart. Let’s see tips on how to use it to visualise knowledge!
Step 1: Create an Angular utility
First, create an Angular utility by utilizing the next command.
ng new-my app cd my-app
Step 2: Set up the Syncfusion Angular Charts NuGet bundle
Add the Syncfusion Angular Charts NuGet bundle to the appliance.
npm set up @syncfusion/ej2-angular-charts –save
Step 3: Register the 3D Chart module
Import the 3D Chart module into the Angular app within the app.module.ts file.
Confer with the next code instance.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the ChartModule for the Chart element
import { Chart3DModule } from '@syncfusion/ej2-angular-charts';
import { AppComponent } from './app.element';
@NgModule({
//declaration of ChartModule into NgModule
imports: [ BrowserModule, Chart3DModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Then, modify the template within the app.element.ts file to render the 3D Chart.
import { Part, ViewEncapsulation } from '@angular/core';
@Part({
selector: 'app-container',
// specifies the template string for the 3D Charts element
template: `<ejs-chart3d id='chart-container'></ejs-chart3d>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent { }
Use the app-container within the index.html file as an alternative of the default one.
<app-container></app-container>
Step 4: Populate the chart with knowledge
Bind the JSON knowledge to the Angular 3D Chart within the App.element.ts file.
import { Part, OnInit } from '@angular/core';
@Part({
selector: 'app-container',
template: `<ejs-chart3d fashion="show:block;" align='middle' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
rotation=7 tilt=10 depth=100 [enableRotation]='enableRotation'>
<e-chart3d-series-collection>
<e-chart3d-series [dataSource]='dataSource' sort="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: 'Class',
labelRotation: -45,
labelPlacement: 'BetweenTicks'
};
this.primaryYAxis = {
most: 150000,
interval: 50000
};
this.enableRotation = true;
}
}
Step 5: Run the app
Lastly, run the app within the browser utilizing the next command.
npm begin
After executing the earlier code examples, we’ll get output like within the following picture.
References
For extra particulars, check with the Angular 3D Chart documentation and demos.
Conclusion
Thanks for taking the time to discover our new Angular 3D Chart element, a exceptional addition to our 2023 Quantity 4 launch. This highly effective software is designed to enhance your app growth course of, and we’re keen to listen to your ideas on it. Don’t hesitate to share your opinion within the feedback part.
For an in depth overview of all of the thrilling updates on this launch, we invite you to go to our Launch Notes and What’s New pages. For our current clients, the brand new model of Important Studio is on the market on the License and Downloads web page. In the event you’re new to Syncfusion, we provide a 30-day free trial so you’ll be able to expertise the big range of options we offer. It’s a terrific alternative to discover how our instruments can improve your growth course of.
When you have any questions, you’ll be able to attain us via our help discussion board, help portal, or suggestions portal. Your satisfaction is our prime precedence, and we’re at all times joyful to help you in any approach we will.
