All docs
V22.1
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery Funnel - Overview

A label that displays the item's value or custom data can accompany each funnel item.

Funnel Item Labels

Properties that configure item labels are collected in the label object. Refer to its description in the API reference or to other topics in this section for details on item label settings.

jQuery
JavaScript
$(function() {
    $("#funnelContainer").dxFunnel({
        // ...
        label: {
            // Settings for all item labels
        }
    });
});
Angular
HTML
TypeScript
<dx-funnel ... >
    <dxo-label ... >
        <!-- Settings for all item labels -->
    </dxo-label>
</dx-funnel>
import { DxFunnelModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFunnelModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxFunnel ... >
        <DxLabel <!-- Settings for all item labels --> />
    </DxFunnel>
</template>

<script>
import DxFunnel, {
    DxLabel
} from 'devextreme-vue/funnel';

export default {
    components: {
        DxFunnel,
        DxLabel
    }
}
</script>
React
App.js
import React from 'react';
import Funnel, { Label } from 'devextreme-react/funnel';

class App extends React.Component {
    render() {
        return (
            <Funnel ... >
                <Label {/* Settings for all item labels */} />
            </Funnel>
        );
    }
}

export default App;
See Also