DevExtreme Angular - 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