DevExtreme Vue - Relocate Labels

Labels are arranged in a column by default. Change the label.position option to display labels beside or inside funnel items.

jQuery
JavaScript
$(function() {
    $("#funnelContainer").dxFunnel({
        // ...
        label: {
            position: "columns" // or "inside" | "outside"
        }
    });
});
Angular
HTML
TypeScript
<dx-funnel ... >
    <dxo-label
        position="columns"> <!-- or "inside" | "outside" -->
    </dxo-label>
</dx-funnel>
import { DxFunnelModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFunnelModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxFunnel ... >
        <DxLabel position="columns" />
    </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 position="columns" />
            </Funnel>
        );
    }
}

export default App;
See Also