DevExtreme React - 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 Chart arranges legend items in columns or in rows. To change the legend orientation, use the orientation option.

    jQuery
    JavaScript
    $(function() {
    $("#chartContainer").dxChart({
        // ...
        legend: {
            orientation: "vertical" // or "horizontal"
        }
    });
});
    Angular
    HTML
    TypeScript
    <dx-chart>
    <dxo-legend
        orientation="vertical"> <!-- or "horizontal" -->
    </dxo-legend>
</dx-chart>
    import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
    Vue
    App.vue
    <template> 
    <DxChart ... >
        <DxLegend orientation="vertical"/> <!-- or "horizontal" -->
    </DxChart>
</template>

<script>
import DxChart, {
    DxLegend
} from 'devextreme-vue/chart';

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

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

export default App;
    NOTE
    To center a horizontally-oriented legend, assign "center" to the horizontalAlignment option. For details on the location of the legend on a chart, refer to the 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 option respectively.

    jQuery
    JavaScript
    $(function() {
    $("#chartContainer").dxChart({
        // ...
        legend: {
            // ...
            columnCount: 3
            // rowCount: 2
        }
    });
});
    Angular
    HTML
    TypeScript
    <dx-chart>
    <dxo-legend
        [columnCount]="3">
        <!-- [rowCount]="2"> -->
    </dxo-legend>
</dx-chart>
    import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
    Vue
    App.vue
    <template> 
    <DxChart ... >
        <DxLegend :column-count="3"/> <!-- or :row-count="2" -->
    </DxChart>
</template>

<script>
import DxChart, {
    DxLegend
} from 'devextreme-vue/chart';

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

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

export default App;

  • Adjust the empty space between columns and rows
    Regardless the legend orientation, you can adjust the empty space between columns and rows using the columnItemSpacing and rowItemSpacing options respectively.

    jQuery
    JavaScript
    $(function() {
    $("#chartContainer").dxChart({
        // ...
        legend: {
            // ...
            columnItemSpacing: 20,
            rowItemSpacing: 30
        }
    });
});
    Angular
    HTML
    TypeScript
    <dx-chart>
    <dxo-legend
        [columnItemSpacing]="20"
        [rowItemSpacing]="30">
    </dxo-legend>
</dx-chart>
    import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
    Vue
    App.vue
    <template> 
    <DxChart ... >
        <DxLegend
            :column-item-spacing="20"
            :row-item-spacing="30"
        />
    </DxChart>
</template>

<script>
import DxChart, {
    DxLegend
} from 'devextreme-vue/chart';

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

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

export default App;

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

See Also