Angular 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.
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.
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.