Vue Funnel - Rearrange Legend Items

Although the legend's layout is virtually universal, in some cases, you may need to slightly adjust it, for example, rearrange legend items. You can learn how to do it from the following instructions.

  • Choose legend orientation
    Depending on whether the legend is oriented vertically or horizontally, the Funnel arranges legend items in columns or in rows. To change the legend orientation, use the orientation property.

    jQuery

    $(function() { $("#funnelContainer").dxFunnel({ // ... legend: { orientation: "vertical" // or "horizontal" } }); });

Angular
HTML
TypeScript
<dx-funnel ...>
    <dxo-legend
        orientation="vertical"> <!-- or "horizontal" -->
    </dxo-legend>
</dx-funnel>
import { DxFunnelModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFunnelModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxFunnel ... >
        <DxLegend
            orientation="vertical" <!-- or "horizontal" -->
        />
    </DxFunnel>
</template>

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

export default {
    components: {
        DxFunnel,
        DxLegend
    }
}
</script>
React
App.js
import React from 'react';
import Funnel, { Legend } from 'devextreme-react/funnel';

class App extends React.Component {
    render() {
        return (
            <Funnel ... >
                <Legend
                    orientation="vertical" {/* or "horizontal" */}
                />
            </Funnel>
        );
    }
}

export default App;
[note] To center a horizontally-oriented legend, assign *"center"* to the [horizontalAlignment](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/legend/#horizontalAlignment) property. For details on the legend's location, refer to the [Relocate the Legend](/Documentation/Guide/UI_Components/Funnel/Legend/Relocate_the_Legend/) topic.
  • Set the number of columns or rows
    To distribute all legend items between several columns (in a vertically-oriented legend) or rows (in a horizontally-oriented legend), set the columnCount or rowCount property respectively.
jQuery
JavaScript
$(function() {
    $("#funnelContainer").dxFunnel({
        // ...
        legend: {
            // ...
            columnCount: 3
            // rowCount: 2
        }
    });
});
Angular
HTML
TypeScript
<dx-funnel ...>
    <dxo-legend ...
        [columnCount]="3">
        <!-- [rowCount]="2"> -->
    </dxo-legend>
</dx-funnel>
import { DxFunnelModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFunnelModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxFunnel ... >
        <DxLegend
            :column-count="3" 
            <!-- :row-count="2" -->
        />
    </DxFunnel>
</template>

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

export default {
    components: {
        DxFunnel,
        DxLegend
    }
}
</script>
React
App.js
import React from 'react';
import Funnel, { Legend } from 'devextreme-react/funnel';

class App extends React.Component {
    render() {
        return (
            <Funnel ... >
                <Legend
                    columnCount={3} 
                    {/* rowCount={2} */}
                />
            </Funnel>
        );
    }
}

export default App;
  • Adjust the empty space between columns and rows
    Regardless of the legend orientation, you can adjust the empty space between columns and rows using the columnItemSpacing and rowItemSpacing properties respectively.
jQuery
JavaScript
$(function() {
    $("#funnelContainer").dxFunnel({
        // ...
        legend: {
            // ...
            columnItemSpacing: 20,
            rowItemSpacing: 30
        }
    });
});
Angular
HTML
TypeScript
<dx-funnel ...>
    <dxo-legend ...
        [columnItemSpacing]="20"
        [rowItemSpacing]="30">
    </dxo-legend>
</dx-funnel>
import { DxFunnelModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFunnelModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxFunnel ... >
        <DxLegend ...
            :column-item-spacing="20"
            :row-item-spacing="30"
        />
    </DxFunnel>
</template>

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

export default {
    components: {
        DxFunnel,
        DxLegend
    }
}
</script>
React
App.js
import React from 'react';
import Funnel, { Legend } from 'devextreme-react/funnel';

class App extends React.Component {
    render() {
        return (
            <Funnel ... >
                <Legend
                    columnItemSpacing={20}
                    rowItemSpacing={30}
                />
            </Funnel>
        );
    }
}

export default App;

Below, you can try out all the mentioned properties in action.

See Also