Angular

Search results

Pie & Doughnut in Angular Accumulation Chart component

05 Oct 2022 / 9 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:

Source

Preview

app.component.ts

app.module.ts

main.ts

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);

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.

Source

Preview

app.component.ts

app.module.ts

main.ts

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);

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.

Source

Preview

app.component.ts

app.module.ts

main.ts

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);

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.

Source

Preview

app.component.ts

app.module.ts

main.ts

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);

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.

Source

Preview

app.component.ts

app.module.ts

main.ts

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);

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.

Source

Preview

app.component.ts

app.module.ts

main.ts

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);

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.

Source

Preview

app.component.ts

app.module.ts

main.ts

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);

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.

Source

Preview

app.component.ts

app.module.ts

main.ts

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);

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.

Source

Preview

app.component.ts

app.module.ts

main.ts

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({
  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;
        this.pie.series[0].innerRadius = '30%';
        this.grid.dataSource = this.pie.series[0].dataSource;
        this.grid.columns[0].headerText = this.data[this.pointIndex].x;
        this.grid.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;
        this.pie.pointClick = this.onPointClick;
        this.grid.dataSource = this.pie.series[0].dataSource;
        this.grid.columns[0].headerText = 'Vehicle';
        this.grid.refresh();
        this.pie.refresh();
      }
    }
    this.grid.dataSource = this.pie.series[0].dataSource;
  }
  public click(args: IMouseEventArgs) {
    if (this.pie.series[0].name !== 'Level 3') {
      switch (args.pointIndex) {
        case 0:
          this.pie.series[0].dataSource = this.data[0].z[0].z;
          this.pie.title = 'SUV Sales by Years';
          this.pie.series[0].name = 'Level 3';
          this.grid.columns[0].headerText = 'Year';
          this.grid.refresh();
          this.pie.refresh();
          break;
      }
      this.grid.dataSource = this.pie.series[0].dataSource;
    }
  }
  public onPointClick(args: IMouseEventArgs) {
    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;
      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.dataSource = this.pie.series[0].dataSource;
    this.grid.columns[0].headerText = this.data[args.pointIndex].x;
    this.grid.refresh();
    this.pie.refresh();
  }
  constructor() {
    //code
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
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';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, AccumulationChartModule, GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ LineSeriesService, DateTimeService, DataLabelService, StackingColumnSeriesService,CategoryService,
               StepAreaSeriesService, SplineSeriesService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
               PieSeriesService, AccumulationTooltipService, AccumulationDataLabelService, SelectionService,ScatterSeriesService
               ,PageService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Contents

Pie Chart
Radius Customization
Pie Center
Various Radius Pie Chart
Doughnut Chart
Start and End angles
Color Text Mapping
Hide pie or doughnut border
Multi-level pie chart

Contents

Pie Chart
Radius Customization
Pie Center
Various Radius Pie Chart
Doughnut Chart
Start and End angles
Color Text Mapping
Hide pie or doughnut border
Multi-level pie chart