A newer version of this page is available. Switch to the current version.

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