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