DevExtreme React - 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 option.
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 ], // ... })
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 ], // ... })
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.