Vue Funnel - Array Only
To bind the Funnel 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() { $("#funnelContainer").dxFunnel({ dataSource: fruits, argumentField: 'fruit', valueField: 'count' }); });
Angular
app.component.html
app.component.ts
app.module.ts
<dx-funnel [dataSource]="fruits" argumentField="fruit" valueField="count"> </dx-funnel>
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 { DxFunnelModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxFunnelModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
App.vue
<template> <DxFunnel :data-source="fruits" argument-field="fruit" value-field="count" /> </template> <script> import DxFunnel from 'devextreme-vue/funnel'; export default { components: { DxFunnel }, 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 Funnel from 'devextreme-react/funnel'; 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 ( <Funnel dataSource={fruits} argumentField="fruit" valueField="count" /> ); }
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.