JavaScript/jQuery Funnel - Overview
A funnel item is a visual representation of a data object.
Funnel items get their colors from the palette by default. If you want to use colors from the data source, specify the colorField property.
jQuery
JavaScript
$(function() { $("#funnelContainer").dxFunnel({ dataSource: [ { fruit: "Apples", count: 10, color: "green" }, { fruit: "Oranges", count: 12, color: "orange" }, { fruit: "Lemons", count: 15, color: "yellow" } ], argumentField: "fruit", valueField: "count", colorField: "color" }); });
Angular
HTML
TypeScript
<dx-funnel [dataSource]="fruits" argumentField="fruit" valueField="count" colorField="color"> </dx-funnel>
import { DxFunnelModule } from "devextreme-angular"; // ... export class AppComponent { fruits = [ { fruit: "Apples", count: 10, color: "green" }, { fruit: "Oranges", count: 12, color: "orange" }, { fruit: "Lemons", count: 15, color: "yellow" } ]; } @NgModule({ imports: [ // ... DxFunnelModule ], // ... })
Vue
App.vue
<template> <DxFunnel :data-source="fruits" argument-field="fruit" value-field="count" color-field="color" /> </template> <script> import DxFunnel from 'devextreme-vue/funnel'; export default { components: { DxFunnel }, data() { return { fruits: [ { fruit: "Apples", count: 10, color: "green" }, { fruit: "Oranges", count: 12, color: "orange" }, { fruit: "Lemons", count: 15, color: "yellow" } ]; }; } } </script>
React
App.js
import React from 'react'; import Funnel from 'devextreme-react/funnel'; const fruits = [ { fruit: "Apples", count: 10, color: "green" }, { fruit: "Oranges", count: 12, color: "orange" }, { fruit: "Lemons", count: 15, color: "yellow" } ]; class App extends React.Component { render() { return ( <Funnel dataSource={fruits} argumentField="fruit" valueField="count" colorField="color" /> ); } } export default App;
To configure other aspects of the funnel items' appearance, use the item object.
jQuery
JavaScript
$(function() { $("#funnelContainer").dxFunnel({ // ... item: { border: { visible: true } } }); });
Angular
HTML
TypeScript
<dx-funnel ... > <dxo-border [visible]="true"> </dxo-border> </dx-funnel>
import { DxFunnelModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxFunnelModule ], // ... })
Vue
App.vue
<template> <DxFunnel ... > <DxItem> <DxBorder :visible="true" /> </DxItem> </DxFunnel> </template> <script> import DxFunnel, { DxItem, DxBorder } from 'devextreme-vue/funnel'; export default { components: { DxFunnel, DxItem, DxBorder } } </script>
React
App.js
import React from 'react'; import Funnel, { Item, Border } from 'devextreme-react/funnel'; class App extends React.Component { render() { return ( <Funnel ... > <Item> <Border visible={true} /> </Item> </Funnel> ); } } export default App;
Refer to other topics in this section for details on the main funnel item features.
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.