Angular PieChart - Array Only
To bind the PieChart 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() { $("#pieChartContainer").dxPieChart({ dataSource: fruits, series: { argumentField: 'fruit', valueField: 'count' } }); });
Angular
app.component.html
app.component.ts
app.module.ts
<dx-pie-chart [dataSource]="fruits"> <dxi-series argumentField="fruit" valueField="count"></dxi-series> </dx-pie-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 { DxPieChartModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxPieChartModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
App.vue
<template> <DxPieChart :data-source="fruits"> <DxSeries argument-field="fruit" value-field="count" /> </DxPieChart> </template> <script> import DxPieChart, { DxSeries } from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart, 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 PieChart, { Series } from 'devextreme-react/pie-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 ( <PieChart dataSource={fruits}> <Series argumentField="fruit" valueField="count" /> </PieChart> ); }
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.