Angular Charts - Equal Size Pies

To display multiple PieChart components that share series and legend settings, you can use an *ngFor notation to iterate through every PieChart option.

Backend API

<div class="pies-container"> @for(options of pies; track options.title) { <dx-pie-chart class="pie" [title]="options.title" [palette]="options.palette" [dataSource]="options.dataSource" sizeGroup="piesGroup" > <dxi-pie-chart-series argumentField="name" valueField="area"> <dxo-pie-chart-label [visible]="true" format="percent" ></dxo-pie-chart-label> </dxi-pie-chart-series> <dxo-pie-chart-legend verticalAlignment="bottom" horizontalAlignment="center" itemTextPosition="right" [rowCount]="2" > </dxo-pie-chart-legend> </dx-pie-chart> } </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxPieChartModule } from 'devextreme-angular'; import { PieOptions, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], imports: [ DxPieChartModule, ], }) export class AppComponent { pies: PieOptions[]; constructor(service: Service) { this.pies = service.getPies(); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep .pies-container { margin: auto; width: 800px; } ::ng-deep .pies-container > .pie { width: 400px; float: left; }

import { Injectable, } from '@angular/core'; class Area { name: string; area: number; } export class PieOptions { title: string; palette: string; dataSource: Area[]; } const countries: Area[] = [{ name: 'Russia', area: 0.12, }, { name: 'Canada', area: 0.07, }, { name: 'USA', area: 0.07, }, { name: 'China', area: 0.07, }, { name: 'Brazil', area: 0.06, }, { name: 'Australia', area: 0.05, }, { name: 'India', area: 0.02, }, { name: 'Others', area: 0.55, }]; const waterLandRatio: Area[] = [{ name: 'Land', area: 0.29, }, { name: 'Water', area: 0.71, }]; @Injectable() export class Service { getPies(): PieOptions[] { return [{ title: 'Area of Countries', palette: 'Soft', dataSource: countries, }, { title: 'Water/Land Ratio', palette: 'Soft Pastel', dataSource: waterLandRatio, }]; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>

When you display PieChart components side by side, their pies may differ in size. You can join all charts into a size group to resize these pies to match each other. To do so, set the sizeGroup property of every chart to the same value.