Angular pyramid chart is the form of a triangle with lines dividing it into sections, each section with a different width. Depending on the Y coordinates, this width indicates a level of hierarchy among other categories.
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.
Data points can be exploded on rendering and on mouse click.
Group the points in a pyramid chart based on certain conditions. The grouped slices can be split into individual points by clicking the slice.
Customize the look and feel of the pyramid chart using built-in APIs.
<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 { }
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
