Angular Funnel - Overview

A funnel item is a visual representation of a data object.

Funnel Items

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