All docs
V20.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

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.

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