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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.