Pie dough nut in Angular Accumulation chart component
25 Sep 202424 minutes to read
Pie Chart
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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { pieData } from './datasource';
@Component({
imports: [
AccumulationChartModule
],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService],
standalone: true,
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Radius Customization
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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { pieData } from './datasource';
@Component({
imports: [
AccumulationChartModule
],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService],
standalone: true,
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Pie Center
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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
@Component({
imports: [
AccumulationChartModule
],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService],
standalone: true,
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Various Radius Pie Chart
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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { variespiedata } from './datasource';
@Component({
imports: [
AccumulationChartModule
],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService],
standalone: true,
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Doughnut Chart
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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { pieData } from './datasource';
@Component({
imports: [
AccumulationChartModule
],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService],
standalone: true,
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Start and End angles
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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { pieData } from './datasource';
@Component({
imports: [
AccumulationChartModule
],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService],
standalone: true,
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Color & Text Mapping
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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { dataMapping } from './datasource';
@Component({
imports: [
AccumulationChartModule
],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService],
standalone: true,
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Border Radius
You can create rounded corners for each slice by using the borderRadius
option, which gives the chart a modern and polished appearance.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { variespiedata } from './datasource';
@Component({
imports: [
AccumulationChartModule
],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService],
standalone: true,
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="60%" borderRadius='8'>
</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.enableAnimation = true;
this.title = 'Mobile Browser Statistics';
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Hide pie or doughnut border
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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { dataMapping } from './datasource';
@Component({
imports: [
AccumulationChartModule
],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService],
standalone: true,
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Patterns
You can apply different patterns to the pie slices using the applyPattern
property in the series and the pointRender
event.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService,
AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { variespiedata } from './datasource';
@Component({
imports: [
AccumulationChartModule
],
providers: [PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationDataLabelService,
AccumulationAnnotationService],
standalone: true,
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" applyPattern='true' [endAngle]="endAngle">
</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.enableAnimation = true;
this.title = 'Mobile Browser Statistics';
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Multi-level pie chart
You can achieve a multi-level drill down in pie and doughnut charts using pointClick event. If user clicks any point in the chart, that corresponding data will be shown in the next level and so on based on point clicked.
You can also achieve drill-up (back to the initial state) by using chartMouseClick event. In below sample, you can drill-up by clicking back button in the center of the chart.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule } from '@syncfusion/ej2-angular-charts'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationTooltipService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import { LineSeriesService, DateTimeService, DataLabelService,StackingColumnSeriesService,CategoryService, ChartShape,
StepAreaSeriesService,SplineSeriesService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
SelectionService,ScatterSeriesService
} from '@syncfusion/ej2-angular-charts'
import { Component, ViewChild } from '@angular/core';
import {
AccumulationChartComponent,
IMouseEventArgs,
IAccTextRenderEventArgs,
AccumulationChart,
} from '@syncfusion/ej2-angular-charts';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import { getElement } from '@syncfusion/ej2-charts';
/**
* Sample for Drilldown in Pie chart
*/
@Component({
imports: [
ChartModule, AccumulationChartModule, GridModule
],
providers: [ LineSeriesService, DateTimeService, DataLabelService, StackingColumnSeriesService,CategoryService,
StepAreaSeriesService, SplineSeriesService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
PieSeriesService, AccumulationTooltipService, AccumulationDataLabelService, SelectionService,ScatterSeriesService
,PageService],
standalone: true,
selector: 'app-container',
template: `<ejs-accumulationchart id="container" #pie style='display:block; width: 92%' [legendSettings]="legendSettings"
[enableSmartLabels]='false' [title]="title" (textRender)="onTextRender($event)"
(chartMouseClick)="onChartMouseClick($event)" (pointClick)="onPointClick($event)">
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]='data' xName='x' yName='y' [startAngle]="startAngle"
[endAngle]="endAngle" innerRadius="0%" radius="70%" [dataLabel]="dataLabel" [explode]="explode"
explodeOffset='10%' [explodeIndex]='explodeIndex'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
<ejs-grid id='Grid' #grid [dataSource]='data'>
<e-columns>
<e-column field='x' headerText='Vehicle' type='string'></e-column>
<e-column field='y' headerText='Sales' type='string'></e-column>
</e-columns>
</ejs-grid>`,
})
export class AppComponent {
public data = [
{
x: 'SUV',
y: 25,
z: [
{
title: 'Automobile Sales in the SUV Segment',
x: 'Toyota',
y: 8,
z: [
{ x: '2000', y: 20 },
{ x: '2001', y: 30 },
{ x: '2002', y: 40 },
],
},
{ x: 'Ford', y: 12 },
{ x: 'GM', y: 17 },
{ x: 'Renault', y: 6 },
],
},
{
x: 'Car',
y: 37,
z: [
{ title: 'Automobile Sales in the Car Segment', x: 'Toyota', y: 7 },
{ x: 'Chrysler', y: 12 },
{ x: 'Nissan', y: 9 },
{ x: 'Ford', y: 15 },
],
},
{
x: 'Pickup',
y: 15,
z: [
{ title: 'Automobile Sales in the Pickup Segment', x: 'Nissan', y: 9 },
{ x: 'Chrysler', y: 4 },
{ x: 'Ford', y: 7 },
{ x: 'Toyota', y: 20 },
],
},
{
x: 'Minivan',
y: 23,
z: [
{
title: 'Automobile Sales in the Minivan Segment',
x: 'Hummer',
y: 11,
},
{ x: 'Ford', y: 5 },
{ x: 'GM', y: 12 },
{ x: 'Chrysler', y: 3 },
],
},
];
@ViewChild('pie')
public pie?: AccumulationChartComponent | AccumulationChart;
@ViewChild('grid')
public grid?: GridComponent;
public pointIndex: number = -1;
//Initializing Legend
public legendSettings: Object = {
visible: false,
};
//Initializing Datalabel
public dataLabel: Object = {
visible: true,
position: 'Inside',
connectorStyle: { type: 'Curve', length: '5%' },
font: { size: '14px', color: 'white' },
};
public explode: boolean = false;
public content: string =
'<div id="back" style="cursor:pointer;padding:3px;width:30px; height:30px;">' +
'<img src="https://ej2.syncfusion.com/javascript/demos/src/chart/images/back.png" id="back" />';
public startAngle: number = 0;
public explodeIndex: number = 2;
public endAngle: number = 360;
public title: string = 'Automobile Sales by Category';
public isparent: boolean = true;
public onTextRender(args: IAccTextRenderEventArgs): void {
args.text = args.point.x + ' ' + args.point.y + ' %';
}
public onChartMouseClick(args: IMouseEventArgs): void {
if (args.target.indexOf('back') > -1) {
if (this.pie?.series[0].name === 'Level 3') {
this.pie.series[0].dataSource = this.data[this.pointIndex].z;
this.pie.series[0].name = 'Level 2';
this.pie.title = this.data[this.pointIndex].z[0].title as any;
this.pie.series[0].innerRadius = '30%';
(this.grid as GridComponent ).dataSource = this.pie.series[0].dataSource;
((this.grid as GridComponent ).columns[0] as any).headerText = this.data[this.pointIndex].x;
(this.grid as GridComponent ).refresh();
this.pie.refresh();
} else if (this.pie?.series[0].name === 'Level 2') {
this.pie.series[0].dataSource = this.data;
this.pie.series[0].name = 'Level 1';
this.pie.series[0].innerRadius = '0%';
this.pie.title = 'Automobile Sales by Category';
this.pie.annotations = null as any;
this.pie.pointClick = this.onPointClick;
(this.grid as GridComponent ).dataSource = this.pie.series[0].dataSource;
((this.grid as GridComponent ).columns[0] as any).headerText = 'Vehicle';
(this.grid as GridComponent ).refresh();
this.pie.refresh();
}
}
(this.grid as GridComponent ).dataSource = this.pie?.series[0].dataSource as any;
}
public click(args: IMouseEventArgs | any) {
if (this.pie?.series[0].name !== 'Level 3') {
switch (args.pointIndex) {
case 0:
this.pie!.series[0].dataSource = (this.data[0].z[0] as any).z;
this.pie!.title = 'SUV Sales by Years';
this.pie!.series[0].name = 'Level 3';
((this.grid as GridComponent ).columns[0] as any).headerText = 'Year';
(this.grid as GridComponent ).refresh();
this.pie?.refresh();
break;
}
(this.grid as GridComponent ).dataSource = this.pie?.series[0].dataSource as any;
}
}
public onPointClick(args: IMouseEventArgs | any) {
if (
getElement(
this.pie?.element.id +
'_Series_' +
args.seriesIndex +
'_Point_' +
args.pointIndex
)
) {
this.pie!.series[0].dataSource = this.data[args.pointIndex].z;
this.pie!.title = this.data[args.pointIndex].z[0].title as any;
this.pointIndex = args.pointIndex;
this.pie!.series[0].name = 'Level 2';
this.pie!.series[0].innerRadius = '30%';
this.pie!.annotations = [
{
content:
'<div id="back" style="cursor:pointer;padding:3px;width:30px; height:30px;">' +
'<img src="https://ej2.syncfusion.com/javascript/demos/src/chart/images/back.png" id="back" />',
region: 'Series',
x: '50%',
y: '50%',
},
];
}
(this.grid as GridComponent ).dataSource = this.pie?.series[0].dataSource as any;
((this.grid as GridComponent ).columns[0] as any).headerText = this.data[args.pointIndex].x;
(this.grid as GridComponent ).refresh();
this.pie?.refresh();
}
constructor() {
//code
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));