Thursday, February 29, 2024
HomeC#A Step Ahead in Knowledge Visualization

A Step Ahead in Knowledge Visualization

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

Angular 3D Charts
Angular 3D Charts

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.
Different chart types supported in Angular 3D Chart
Completely different chart sorts supported in Angular 3D Chart

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.

Data labels in Angular 3D Chart
Knowledge labels in Angular 3D Chart

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.
Axis types in Angular 3D Chart
Axis sorts in Angular 3D Chart


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.

Legends in Angular 3D Chart
Legends in Angular 3D 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.
User interactivity features in Angular 3D Chart
Consumer interactivity options in Angular 3D Chart

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.
Rotation and tilt features in Angular 3D Chart
Rotation and tilt options in Angular 3D Chart

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';

  //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';

  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.


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';

    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 [dataSource]='dataSource' sort="Column" xName="x" yName="y">
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.

Integrating 3D Chart in Angular apps
Integrating 3D Chart in Angular apps


For extra particulars, check with the Angular 3D Chart documentation and demos.


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 boardhelp 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.

Associated blogs



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments