DevExtreme Angular - Array Only

To bind the Chart 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 () {
    $("#chartContainer").dxChart({
        dataSource: fruits,
        series: {
            // See details in the "Bind Series to Data" topic
            argumentField: 'fruit',
            valueField: 'count'
        }
    });
});
Angular
TypeScript
HTML
import { DxChartModule } 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: [
        // ...
        DxChartModule
    ],
    // ...
})
<dx-chart [dataSource]="fruits">
    <!-- See details in the "Bind Series to Data" topic -->
    <dxi-series argumentField="fruit" valueField="count"></dxi-series>
</dx-chart>

After that, you need to bind one or several Chart series to data. Depending on the series type you chose, use one of the techniques described in the Bind Series to Data topic.

View Demo

If objects in an 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 () {
    $("#chartContainer").dxChart({
        dataSource: DevExpress.data.query(fruits).sortBy("count", true).toArray(),
        series: {
            argumentField: 'fruit',
            valueField: 'count'
        }
    });
});
Angular
TypeScript
HTML
import { DxChartModule } 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: [
        // ...
        DxChartModule
    ],
    // ...
})
<dx-chart [dataSource]="getSortedFruits()">
    <dxi-series argumentField="fruit" valueField="count"></dxi-series>
</dx-chart>
See Also