DevExtreme React - Array Only
To bind the PieChart to an array, pass this array to the dataSource option. The array should contain objects.
jQuery
JavaScript
var fruits = [ { fruit: 'Apples', count: 10 }, { fruit: 'Oranges', count: 12 }, { fruit: 'Lemons', count: 15 }, { fruit: 'Pears', count: 20 }, { fruit: 'Pineapples', count: 3 } ]; $(function () { $("#pieChartContainer").dxPieChart({ dataSource: fruits, series: { // See details in the "Bind Series to Data" topic argumentField: 'fruit', valueField: 'count' } }); });
Angular
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.
jQuery
JavaScript
var fruits = [ { fruit: 'Apples', count: 10 }, { fruit: 'Oranges', count: 12 }, { fruit: 'Lemons', count: 15 }, { fruit: 'Pears', count: 20 }, { fruit: 'Pineapples', count: 3 } ]; $(function () { $("#pieChartContainer").dxPieChart({ dataSource: DevExpress.data.query(fruits).sortBy("count", true).toArray(), series: { argumentField: 'fruit', valueField: 'count' } }); });
Angular
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.