DevExtreme React - Array Only
To bind the Chart to an array, pass this array to the dataSource option. The array should contain objects.
jQuery
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
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.
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
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
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
If you have technical questions, please create a support ticket in the DevExpress Support Center.