To render a pie series, use the series type
as Pie
and
inject the PieSeriesService
module into the @NgModule.providers
. If the PieSeries
module is not
injected, this module will be loaded by default.
To known about circular and triangular charts, you can check on this video:
import { Component, OnInit } from '@angular/core';
import { pieData } from 'datasource.ts';
@Component({
selector: 'app-container',
template:
`<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings'>
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]='piedata' xName='x' yName='y' type='Pie'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public piedata: Object[];
public legendSettings: Object;
ngOnInit(): void {
this.piedata = pieData;
this.legendSettings = {
visible: false
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
By default, radius of the pie series will be 80% of the size (minimum of chart width and height).
You can customize this using radius
property of the series.
import { Component, OnInit } from '@angular/core';
import { pieData } from 'datasource.ts';
@Component({
selector: 'app-container',
template:
`<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings'>
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]='piedata' xName='x' yName='y' radius="100%"></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public piedata: Object[];
public legendSettings: Object;
ngOnInit(): void {
this.piedata = pieData;
this.legendSettings = {
visible: false
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The center position of the pie can be changed by Center X and Center Y. By default, center value of the pie series x and y is 50%. You can customize this using center
property of the series.
import { Component, OnInit } from '@angular/core';
import { data } from 'datasource.ts';
@Component({
selector: 'app-container',
template:
`<ejs-accumulationchart id="container" width='92%' [legendSettings]="legendSettings" [title]="title" [enableAnimation]= 'enableAnimation' [center]='center'>
<e-accumulation-series-collection>
<e-accumulation-series name='Browser' [dataSource]='pieData' xName='x' yName='y' [startAngle]="startAngle" [endAngle]="endAngle" innerRadius="0%" radius="70%" [explode]='explode' explodeOffset='10%' [explodeIndex]='0'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public pieData: Object[];
public startAngle: number;
public endAngle: number;
public center: Object ;
public explode: boolean ;
public enableAnimation: boolean ;
public title: string ;
public legendSettings: Object;
ngOnInit(): void {
this.pieData = data;
this.legendSettings = {
visible: false
};
this.center = {x: '60%', y: '60%'};
this.startAngle = 0;
this.endAngle = 360;
this.explode = true;
this.enableAnimation = false;
this.title = 'Mobile Browser Statistics';
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
You can use radius mapping to render the slice with different radius
pie and also use border
, fill properties to customize the point. dataLabel is used to represent individual data and its value.
import { Component, OnInit } from '@angular/core';
import { variespiedata } from 'datasource.ts';
@Component({
selector: 'app-container',
template:
`<ejs-accumulationchart id="container" width='92%' [legendSettings]="legendSettings" [title]="title" [enableAnimation]= 'enableAnimation'>
<e-accumulation-series-collection>
<e-accumulation-series name='Browser' [dataSource]='pieData' xName='x' yName='y' [startAngle]="startAngle" [endAngle]="endAngle" innerRadius="20%" radius="r">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public pieData: Object[];
public startAngle: number;
public endAngle: number;
public center: Object ;
public explode: boolean ;
public enableAnimation: boolean ;
public title: string ;
public radius: string ;
public legendSettings: Object;
ngOnInit(): void {
this.pieData = variespiedata;
this.legendSettings = {
visible: false
};
this.startAngle = 0;
this.endAngle = 360;
this.radius = 'r';
this.enableAnimation = true;
this.title = 'Mobile Browser Statistics';
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
To achieve a doughnut in pie series, customize the innerRadius
property of the series. By setting value greater than 0%, a doughnut will appear. The innerRadius
property takes value from 0% to 100%
of the pie radius.
import { Component, OnInit } from '@angular/core';
import { pieData } from 'datasource.ts';
@Component({
selector: 'app-container',
template:
`<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings'>
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]='piedata' xName='x' yName='y' innerRadius='40%'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public piedata: Object[];
public legendSettings: Object;
ngOnInit(): void {
this.piedata = pieData;
this.legendSettings = {
visible: false
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
You can customize the start and end angle of the pie series using the
startAngle
and
endAngle
properties. The default value of startAngle
is 0 degree,
and endAngle
is 360 degrees. By customizing this, you can achieve a semi pie series.
import { Component, OnInit } from '@angular/core';
import { pieData } from 'datasource.ts';
@Component({
selector: 'app-container',
template:
`<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings'>
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]='piedata' xName='x' yName='y' [startAngle]='startAngle' [endAngle]='endAngle' [dataLabel]='datalabel'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public piedata: Object[];
public startAngle: number;
public endAngle: number;
public datalabel: Object;
public legendSettings: Object;
ngOnInit(): void {
this.startAngle = 270;
this.endAngle = 90;
this.datalabel = { visible: true, name: 'text', position: 'Outside' };
this.piedata = pieData;
this.legendSettings = {
visible: false
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The fill color and the text in the data source can be mapped to the chart using pointColorMapping
in series and
name
in datalabel respectively.
import { Component, OnInit } from '@angular/core';
import { dataMapping } from 'datasource.ts';
@Component({
selector: 'app-container',
template:
`<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings'>
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]='piedata' xName='x' yName='y' [pointColorMapping]= 'map' [dataLabel]='datalabel'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public piedata: Object[];
public map: Object = 'fill';
public datalabel: Object;
public legendSettings: Object;
ngOnInit(): void {
this.piedata = dataMapping;
this.datalabel = { visible: true, name: 'text', position: 'Outside' };
this.legendSettings = {
visible: false
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
By default, the border will appear in the pie/doughnut chart while mouse hover on the chart. You can disable the the border by
setting enableBorderOnMouseMove
property is false
.
import { Component, OnInit } from '@angular/core';
import { dataMapping } from 'datasource.ts';
@Component({
selector: 'app-container',
template:
`<ejs-accumulationchart id="chart-container" [legendSettings]='legendSettings' [enableBorderOnMouseMove]='enableBorderOnMouseMove'>
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]='piedata' xName='x' yName='y' [dataLabel]='datalabel'></e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>`
})
export class AppComponent implements OnInit {
public piedata: Object[];
public datalabel: Object;
public legendSettings: Object;
public enableBorderOnMouseMove: boolean;
ngOnInit(): void {
this.enableBorderOnMouseMove = false;
this.piedata = dataMapping;
this.datalabel = { visible: true, name: 'text', position: 'Outside' };
this.legendSettings = {
visible: false
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, AccumulationChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);