All docs
V23.2
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.

jQuery Funnel - Relocate Labels

Labels are arranged in a column by default. Change the label.position property 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