Pyramid in Angular Accumulation chart component
27 Apr 202412 minutes to read
To render a pyramid series, use the series type
as Pyramid
and inject PyramidSeries
module into the @NgModule.providers
.
To known about pyramid, you can check on this video:
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PyramidSeriesService,CategoryService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { pyramidData } from './datasource';
@Component({
imports: [
AccumulationChartModule
],
providers: [PyramidSeriesService,CategoryService, AccumulationDataLabelService],
standalone: true,
selector: 'app-container',
template: `<ejs-accumulationchart id="chart-container">
<e-accumulation-series-collection>
<e-accumulation-series type='Pyramid' [dataSource]='pyramidData' xName='x' yName='y'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public pyramidData?: Object[];
public enableSmartLabels?: boolean;
ngOnInit(): void {
this.pyramidData = pyramidData;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Mode
The Pyramid chart supports linear and surface modes of rendering. The default type of the pyramidMode
is linear
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PyramidSeriesService,CategoryService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { pyramidData } from './datasource';
import {
IAccPointRenderEventArgs,
} from '@syncfusion/ej2-charts';
@Component({
imports: [
AccumulationChartModule
],
providers: [PyramidSeriesService,CategoryService, AccumulationDataLabelService],
standalone: true,
selector: 'app-container',
template: `<ejs-accumulationchart id="chart-container" (pointRender)="onPointRender($event)">
<e-accumulation-series-collection>
<e-accumulation-series type='Pyramid' [dataSource]='pyramidData' xName='x' yName='y' [gapRatio]="gapRatio"
></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`,
})
export class AppComponent implements OnInit {
public gapRatio: number = 0.2;
public onPointRender = (args: IAccPointRenderEventArgs) => {
if ((args.point.x as string).indexOf('Downloaded') > -1) {
args.fill = '#D3D3D3';
} else {
args.fill = '#597cf9';
}
};
public pyramidData = pyramidData;
ngOnInit(): void { }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Size
The size of the pyramid chart can be customized by using the width
and height
properties.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PyramidSeriesService,CategoryService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { pyramidData } from './datasource';
@Component({
imports: [
AccumulationChartModule
],
providers: [PyramidSeriesService,CategoryService, AccumulationDataLabelService],
standalone: true,
selector: 'app-container',
template: `<ejs-accumulationchart id="chart-container">
<e-accumulation-series-collection>
<e-accumulation-series width='60%' height='80%' type='Pyramid' [dataSource]='pyramidData' xName='x' yName='y'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public pyramidData?: Object[];
ngOnInit(): void {
this.pyramidData = pyramidData;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Gap Between the Segments
Pyramid chart provides options to customize the space between the segments by using the gapRatio
property of the series. It ranges from 0 to 1.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PyramidSeriesService,CategoryService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { pyramidData } from './datasource';
@Component({
imports: [
AccumulationChartModule
],
providers: [PyramidSeriesService,CategoryService, AccumulationDataLabelService],
standalone: true,
selector: 'app-container',
template: `<ejs-accumulationchart id="chart-container">
<e-accumulation-series-collection>
<e-accumulation-series type='Pyramid' [dataSource]='pyramidData' xName='x' yName='y' [gapRatio]="gapRatio"></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public pyramidData?: Object[];
public gapRatio: number = 0.2;
ngOnInit(): void {
this.pyramidData = pyramidData;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Explode
Points can be exploded on mouse click by setting the explode
property to true. You can also explode the point on load using explodeIndex
. Explode distance can be set by using explodeOffset
property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PyramidSeriesService,CategoryService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { pyramidData } from './datasource';
@Component({
imports: [
AccumulationChartModule
],
providers: [PyramidSeriesService,CategoryService, AccumulationDataLabelService],
standalone: true,
selector: 'app-container',
template: `<ejs-accumulationchart id="chart-container">
<e-accumulation-series-collection>
<e-accumulation-series type='Pyramid' [dataSource]='pyramidData' xName='x' yName='y' [explode]='explode' [explodeAll]='explodeAll'
[explodeIndex]='explodeIndex'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public pyramidData?: Object[];
public explode?: boolean;
public explodeIndex?: number;
public explodeAll?: boolean;
explodeOffset?: string;
ngOnInit(): void {
this.explode = true;
this.explodeIndex = 3;
this.explodeOffset = '30px';
this.explodeAll = false;
this.pyramidData = pyramidData;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Customization
Individual points can be customized using the pointRender
event.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PyramidSeriesService,CategoryService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { pyramidData } from './datasource';
import { IAccTextRenderEventArgs, IAccPointRenderEventArgs } from '@syncfusion/ej2-charts';
@Component({
imports: [
AccumulationChartModule
],
providers: [PyramidSeriesService,CategoryService, AccumulationDataLabelService],
standalone: true,
selector: 'app-container',
template: `<ejs-accumulationchart id="chart-container" (pointRender)="onPointRender($event)">
<e-accumulation-series-collection>
<e-accumulation-series type='Pyramid' [dataSource]='pyramidData' xName='x' yName='y' [dataLabel]='datalabel' [gapRatio]="gapRatio"
></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public pyramidData?: Object[];
public gapRatio: number = 0.2;
public onPointRender?: Function;
ngOnInit(): void {
this.onPointRender = (args: IAccPointRenderEventArgs) => {
if ((args.point.x as string).indexOf('Downloaded') > -1) {
args.fill = '#D3D3D3';
}
else {
args.fill = '#597cf9';
}
}
this.pyramidData = pyramidData;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));