Angular PieChart - Array Only

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

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>
See Also