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