DevExtreme Vue - 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 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