Series types in Angular Accumulation chart component
27 Sep 202320 minutes to read
Pyramid Chart
To render a pyramid series, use series type
as Pyramid
.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-accumulationchart id="chart-container">
<e-accumulation-series-collection>
<e-accumulation-series width='400px' type='Pyramid' [dataSource]='pyramidData' xName='x' yName='y' [dataLabel]='datalabel'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public pyramidData?: Object[];
public datalabel?: Object;
public enableSmartLabels?: boolean;
ngOnInit(): void {
this.datalabel = { visible: true, name: 'text', position: 'Inside' };
this.enableSmartLabels = true;
this.pyramidData = [
{ x: 'Australia', y: 20, text: 'Australia 20%' },
{ x: 'France', y: 22, text: 'France 22%' },
{ x: 'China', y: 23, text: 'China 23%' },
{ x: 'India', y: 24, text: 'India 24%' },
{ x: 'Japan', y: 25, text: 'Japan 25%' },
{ x: 'Germany', y: 27, text: 'Germany 27%' }];
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PyramidSeriesService,CategoryService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PyramidSeriesService,CategoryService, AccumulationDataLabelService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Funnel Chart
To render a funnel series, use series type
as Funnel
.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-accumulationchart id="chart-container">
<e-accumulation-series-collection>
<e-accumulation-series width='330px' type='Funnel' [dataSource]='funneldata' xName='x' yName='y' [dataLabel]='datalabel'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public funneldata?: Object[];
public datalabel?: Object;
public enableSmartLabels?: boolean;
ngOnInit(): void {
this.datalabel = { visible: true, name: 'text', position: 'Inside' };
this.enableSmartLabels = true;
this.funneldata = [
{ x: 'Renewed', y: 18.20, text: 'Renewed 18.20%' },
{ x: 'Subscribe', y: 27.3, text: 'Subscribe 27.3%' },
{ x: 'Support', y: 55.9, text: 'Support 55.9%' },
{ x: 'Downloaded', y: 76.8, text: 'Downloaded 76.8%' },
{ x: 'Visited', y: 100, text: 'Visited 100%' }];
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { FunnelSeriesService, AccumulationTooltipService, CategoryService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [FunnelSeriesService, AccumulationTooltipService, CategoryService, AccumulationDataLabelService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Customization of Accumulation Chart
Size
Accumulation chart provides options to customize the size of the funnel or pyramid chart by using the width
and height
property.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-accumulationchart id="chart-container">
<e-accumulation-series-collection>
<e-accumulation-series width='330px' type='Funnel' [dataSource]='funneldata' xName='x' yName='y' [dataLabel]='datalabel'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public funneldata?: Object[];
public datalabel?: Object;
public enableSmartLabels?: boolean;
ngOnInit(): void {
this.datalabel = { visible: true, name: 'text', position: 'Inside' };
this.enableSmartLabels = true;
this.funneldata = [
{ x: 'Renewed', y: 18.20, text: 'Renewed 18.20%' },
{ x: 'Subscribe', y: 27.3, text: 'Subscribe 27.3%' },
{ x: 'Support', y: 55.9, text: 'Support 55.9%' },
{ x: 'Downloaded', y: 76.8, text: 'Downloaded 76.8%' },
{ x: 'Visited', y: 100, text: 'Visited 100%' }];
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { FunnelSeriesService, AccumulationTooltipService, CategoryService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [FunnelSeriesService, AccumulationTooltipService, CategoryService, AccumulationDataLabelService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Neck Size
The funnel neck size can be customized by using the neckWidth
and neckHeight
property.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-accumulationchart id="chart-container">
<e-accumulation-series-collection>
<e-accumulation-series width='330px' type='Funnel' [dataSource]='funneldata' xName='x' yName='y' [dataLabel]='datalabel' [neckWidth]='neckWidth'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public funneldata?: Object[];
public datalabel?: Object;
public enableSmartLabels?: boolean;
public neckWidth: string = '5%';
ngOnInit(): void {
this.datalabel = { visible: true, name: 'text', position: 'Inside' };
this.enableSmartLabels = true;
this.funneldata = [
{ x: 'Renewed', y: 18.20, text: 'Renewed 18.20%' },
{ x: 'Subscribe', y: 27.3, text: 'Subscribe 27.3%' },
{ x: 'Support', y: 55.9, text: 'Support 55.9%' },
{ x: 'Downloaded', y: 76.8, text: 'Downloaded 76.8%' },
{ x: 'Visited', y: 100, text: 'Visited 100%' }];
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { FunnelSeriesService, AccumulationTooltipService, CategoryService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [FunnelSeriesService, AccumulationTooltipService, CategoryService, AccumulationDataLabelService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Gap between the segments
The space between the segments can be customized by using the gapRatio
option of the series and
it is applicable for pyramid and funnel chart. It ranges from 0 to 1.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-accumulationchart id="chart-container">
<e-accumulation-series-collection>
<e-accumulation-series width='330px' type='Funnel' [dataSource]='funneldata' xName='x' yName='y' [dataLabel]='datalabel' [gapRatio]="gapRatio"></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public funneldata?: Object[];
public datalabel?: Object;
public enableSmartLabels?: boolean;
public gapRatio: number = 0.03;
ngOnInit(): void {
this.datalabel = { visible: true, name: 'text', position: 'Inside' };
this.enableSmartLabels = true;
this.funneldata = [
{ x: 'Renewed', y: 18.20, text: 'Renewed 18.20%' },
{ x: 'Subscribe', y: 27.3, text: 'Subscribe 27.3%' },
{ x: 'Support', y: 55.9, text: 'Support 55.9%' },
{ x: 'Downloaded', y: 76.8, text: 'Downloaded 76.8%' },
{ x: 'Visited', y: 100, text: 'Visited 100%' }];
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { FunnelSeriesService, AccumulationTooltipService, CategoryService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [FunnelSeriesService, AccumulationTooltipService, CategoryService, AccumulationDataLabelService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Pyramid mode
Pyramid chart supports linear and surface modes of rendering. The default pyramidMode
type is linear
.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-accumulationchart id="chart-container">
<e-accumulation-series-collection>
<e-accumulation-series width='400px' type='Pyramid' pyramidMode='Linear' [dataSource]='pyramidData' xName='x' yName='y' [dataLabel]='datalabel'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public pyramidData?: Object[];
public datalabel?: Object;
public enableSmartLabels?: boolean;
ngOnInit(): void {
this.datalabel = { visible: true, name: 'text', position: 'Inside' };
this.enableSmartLabels = true;
this.pyramidData = [
{ x: 'Australia', y: 20, text: 'Australia 20%' },
{ x: 'France', y: 22, text: 'France 22%' },
{ x: 'China', y: 23, text: 'China 23%' },
{ x: 'India', y: 24, text: 'India 24%' },
{ x: 'Japan', y: 25, text: 'Japan 25%' },
{ x: 'Germany', y: 27, text: 'Germany 27%' }];
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PyramidSeriesService,CategoryService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PyramidSeriesService,CategoryService, AccumulationDataLabelService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);