The Angular Pyramid Chart is a hierarchical structure that has data in the form of triangles divided into sections, and each section with a related dataset.
Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle.
Group the points in a pyramid chart based on specific conditions. The grouped slices can be split into individual points by clicking the slices.
Customize the look and feel of the pyramid chart using built-in APIs.
Easily get started with Angular Pyramid Chart by using a few lines of HTML and TS code, as demonstrated below. Also explore our Angular Pyramid Chart Example that shows how to render and configure the Pyramid chart in Angular.
<ejs-accumulationchart id="chart-container">
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]='data' xName='x' yName='y' type='Pyramid'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
//app.component.ts
import { Component } from '@angular/core';
export class AppComponent {
public data: Object[] = [
{ x: 'JPN', text: 'Japan', y: 5156 },
{ x: 'DEU', text: 'Germany', y: 3754 },
{ x: 'FRA', text: 'France', y: 2809 },
{ x: 'GBR', text: 'UK', y: 2721 },
{ x: 'BRA', text: 'Brazil', y: 2472 },
{ x: 'RUS', text: 'Russia', y: 2231 },
{ x: 'ITA', text: 'Italy', y: 2131 },
{ x: 'IND', text: 'India', y: 1857 },
];
}
//app.module.ts
import { AccumulationChartModule } from '@syncfusion/ej2-ng-charts';
import { PyramidSeriesService} from '@syncfusion/ej2-ng-charts';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, AccumulationChartModule
],
providers: [PyramidSeriesService],
bootstrap: [AppComponent]
})
export class AppModule { }
Learn the available options to customize Angular Pyramid Chart.
Explore the Angular Pyramid Chart APIs.