Angular Chart - Array Only

To bind the Chart to an array, pass this array to the dataSource property. The array should contain objects.

jQuery
index.js
const 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: {
            argumentField: 'fruit',
            valueField: 'count'
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-chart [dataSource]="fruits">
    <dxi-series argumentField="fruit" valueField="count"></dxi-series>
</dx-chart>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    fruits = [
        { fruit: 'Apples', count: 10 },
        { fruit: 'Oranges', count: 12 },
        { fruit: 'Lemons', count: 15 },
        { fruit: 'Pears', count: 20 },
        { fruit: 'Pineapples', count: 3 }
    ];
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxChart :data-source="fruits">
        <DxSeries argument-field="fruit" value-field="count" />
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxSeries
    },
    data() {
        return {
            fruits: [
                { fruit: 'Apples', count: 10 },
                { fruit: 'Oranges', count: 12 },
                { fruit: 'Lemons', count: 15 },
                { fruit: 'Pears', count: 20 },
                { fruit: 'Pineapples', count: 3 }
            ]
        }
    }
}
</script>
React
App.js
import Chart, {
    Series
} from 'devextreme-react/chart';

const fruits = [
    { fruit: 'Apples', count: 10 },
    { fruit: 'Oranges', count: 12 },
    { fruit: 'Lemons', count: 15 },
    { fruit: 'Pears', count: 20 },
    { fruit: 'Pineapples', count: 3 }
];

export default function App() {
    return (
        <Chart dataSource={fruits}>
            <Series argumentField="fruit" valueField="count" />
        </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

See Also