DevExtreme Angular - Array Only

To bind the PieChart to an array, pass this array to the dataSource option. The array should contain objects.

TypeScript
HTML
  • import { DxPieChartModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • fruits = [
  • { fruit: 'Apples', count: 10 },
  • { fruit: 'Oranges', count: 12 },
  • { fruit: 'Lemons', count: 15 },
  • { fruit: 'Pears', count: 20 },
  • { fruit: 'Pineapples', count: 3 }
  • ];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPieChartModule
  • ],
  • // ...
  • })
  • <dx-pie-chart [dataSource]="fruits">
  • <!-- See details in the "Bind Series to Data" topic -->
  • <dxi-series argumentField="fruit" valueField="count"></dxi-series>
  • </dx-pie-chart>

If objects in the array need to be processed (sorted, filtered, etc.), you can create a Query. For example, in the following code, a Query sorts objects in the fruits array by the count field in descending order.

TypeScript
HTML
  • import { DxPieChartModule } from 'devextreme-angular';
  • import query from 'devextreme/data/query';
  • // ...
  • export class AppComponent {
  • fruits = [
  • { fruit: 'Apples', count: 10 },
  • { fruit: 'Oranges', count: 12 },
  • { fruit: 'Lemons', count: 15 },
  • { fruit: 'Pears', count: 20 },
  • { fruit: 'Pineapples', count: 3 }
  • ];
  • getSortedFruits () {
  • return query(this.fruits).sortBy("count", true).toArray();
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPieChartModule
  • ],
  • // ...
  • })
  • <dx-pie-chart [dataSource]="getSortedFruits()">
  • <dxi-series argumentField="fruit" valueField="count"></dxi-series>
  • </dx-pie-chart>
See Also