React Funnel - Customize Labels

NOTE
This topic focuses on properties that customize the text of item labels. There are other properties that customize labels, such as backgroundColor, font, border, etc., but their purpose and application is rather obvious, and for this reason, they are not detailed in this topic. For more information on them, please refer to the label section of the API reference.

If you need to change the text displayed by funnel items, declare the customizeText function. It must return a string value. The argument of this function contains information about the item whose label is being customized. In the following example, this function instructs item labels to display both the argument and value of a funnel item.

jQuery
JavaScript
$(function() {
    $("#funnelContainer").dxFunnel({
        // ...
        label: {
            customizeText: function (itemInfo) {
                return itemInfo.item.argument + ': ' + itemInfo.value;
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-funnel ... >
    <dxo-label
        [customizeText]="customizeText">
    </dxo-label>
</dx-funnel>
import { DxFunnelModule } from "devextreme-angular";
// ...
export class AppComponent {
    customizeText (itemInfo) {
        return itemInfo.item.argument + ': ' + itemInfo.value;
    }
}
@NgModule({
    imports: [
        // ...
        DxFunnelModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxFunnel ... >
        <DxLabel :customize-text="customizeText" />
    </DxFunnel>
</template>

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

export default {
    components: {
        DxFunnel,
        DxLabel
    },
    methods: {
        customizeText(itemInfo) {
            return `${itemInfo.item.argument}: ${itemInfo.value}`;
        }
    }
}
</script>
React
App.js
import React from 'react';
import Funnel, { Label } from 'devextreme-react/funnel';

class App extends React.Component {
    render() {
        return (
            <Funnel ... >
                <Label customizeText={this.customizeText} />
            </Funnel>
        );
    }
    customizeText(itemInfo) {
        return `${itemInfo.item.argument}: ${itemInfo.value}`;
    }
}

export default App;
See Also