Angular PieChart - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

The PieChart UI component visualizes data as a circle divided into portions (slices) to illustrate data proportions.

NOTE

Use our DevExpress BI Dashboard to embed interactive business intelligence into your next web app.

The Web Dashboard is a data analysis UI component that you can embed into your ASP.NET Core or Angular, React, and Vue applications with .NET backend. Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an automatically-arranged layout.

The set of components allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly on the web client (includes adaptive layouts for tablet & mobile).

The Web Dashboard is available as a part of a Universal subscription.

Get Started with DevExpress BI Dashboard | Explore Demos

This tutorial shows how to add a PieChart to the page and configure the component's core settings. As a result, you will create the following UI component:

Each section in this tutorial describes a single configuration step. You can also find the full source code in the GitHub repository.

View on GitHub

Create a PieChart

Add DevExtreme to your Angular application and use the following code to create a PieChart:

app.component.html
app.component.ts
app.module.ts
  • <dx-pie-chart
  • // Configuration goes here
  • >
  • </dx-pie-chart>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  •  
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxPieChartModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxPieChartModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }

Bind PieChart to Data and Configure Series

The PieChart can visualize data from different sources. Refer to the following demos for details on how to bind the PieChart to your data source:

This tutorial uses an array as a PieChart data source. To bind the PieChart to data, pass the array to the PieChart's dataSource property.

Once you assign the data source, specify the series type. The PieChart has two series types: the Pie (default) and Doughnut. The only difference between them is the Doughnut has a blank center.

To display data, specify the series nested options: argumentField and valueField. This allows the component to determine the corresponding object fields (arguments and values) in the array.

app.component.html
app.component.ts
app.service.ts
  • <dx-pie-chart
  • [dataSource]="billionaires"
  • type="doughnut"
  • >
  • <dxi-series
  • argumentField="country"
  • valueField="amount"
  • >
  • </dxi-series>
  • </dx-pie-chart>
  • import { Component } from '@angular/core';
  • import { Billionaires, Service } from './app.service';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css'],
  • providers: [Service],
  • })
  •  
  • export class AppComponent {
  • billionaires: Billionaires[];
  • constructor(private service: Service) {
  • this.billionaires = service.getBillionaires();
  • }
  • }
  • import { Injectable } from '@angular/core';
  •  
  • export class Billionaires {
  • country: string;
  • amount: number;
  • }
  •  
  • const billionaires: Billionaires[] = [
  • {
  • country: "China",
  • amount: 1002
  • },
  • {
  • country: "United States",
  • amount: 716
  • },
  • {
  • country: "India",
  • amount: 215
  • },
  • {
  • country: "United Kingdom",
  • amount: 150
  • },
  • {
  • country: "Germany",
  • amount: 145
  • }
  • ];
  •  
  • @Injectable()
  • export class Service {
  • getBillionaires(): Billionaires[] {
  • return billionaires;
  • }
  • }

Set PieChart Title

Use the title property to specify and configure the chart's title.

app.component.html
  • <dx-pie-chart ...
  • title="Top-5 Countries by Number of Billionaires"
  • >
  • <!-- ... -->
  • </dx-pie-chart>
See Also

Configure Point Labels

You can accompany each series point with a label that displays the point's value or custom data.

To make point labels visible, assign true to the series.label.visible property. With this configuration, the component displays point labels detached from their respective series points. To make the connection between labels and points visible, set the label.connector.visible property to true.

The component displays labels next to points. Change the label.position property to rearrange labels in columns or place them inside series points.

If you need to change the point's label text, declare the label.customizeText function. It must return a string value.

app.component.html
app.component.ts
  • <dx-pie-chart ...
  • >
  • <dxi-series ...
  • >
  • <dxo-label
  • [visible]="true"
  • position="columns"
  • [customizeText]="customizeText"
  • >
  • <dxo-connector [visible]="true"></dxo-connector>
  • </dxo-label>
  • </dxi-series>
  • </dx-pie-chart>
  • // ...
  •  
  • export class AppComponent {
  • // ...
  • customizeText (pointInfo: any) {
  • return pointInfo.value + " billionaires";
  • }
  • }

Enable Tooltips

To enable tooltips, assign true to the enabled property of the tooltip object. A PieChart tooltip displays information about the point value, but you can display custom content in a tooltip.

In this tutorial, the tooltip displays information about the point argument. Use the tooltip.contentTemplate function to assign a custom template for all PieChart tooltips.

app.component.html
app.component.ts
  • <dx-pie-chart ...
  • >
  • <!-- ... -->
  • <dxo-tooltip
  • [enabled]="true"
  • [contentTemplate]="contentTemplate"
  • >
  • </dxo-tooltip>
  • </dx-pie-chart>
  • // ...
  •  
  • export class AppComponent {
  • // ...
  • contentTemplate (data: any) {
  • return data.argumentText;
  • }
  • }

Handle Selection

Use the onPointClick function to implement the selection functionality. Call a point's isSelected() method to check whether a user selected it.

In this tutorial, when a user clicks on a point, the point is selected. When the user clicks on the point again, the component clears the selection.

app.component.html
app.component.ts
  • <dx-pie-chart ...
  • (onPointClick)="onPointClick($event)"
  • >
  • <!-- ... -->
  • </dx-pie-chart>
  • // ...
  •  
  • export class AppComponent {
  • // ...
  • onPointClick (e: any) {
  • const point = e.target;
  • if (point.isSelected()) {
  • point.clearSelection();
  • } else {
  • point.select();
  • }
  • }
  • }