Vue Funnel - Overview

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

Funnel Item Labels

Propertiesthat 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