DevExtreme Vue - 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 PieChart arranges legend items in columns or in rows. To change the legend orientation, use the orientation option.jQuery
JavaScript$(function() { $("#pieChartContainer").dxPieChart({ // ... legend: { orientation: "vertical" // or "horizontal" } }); });
Angular
HTMLTypeScript<dx-pie-chart ...> <dxo-legend orientation="vertical"> <!-- or "horizontal" --> </dxo-legend> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
NOTETo center a horizontally-oriented legend, assign "center" to the horizontalAlignment option. For details on the legend's location, 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() { $("#pieChartContainer").dxPieChart({ // ... legend: { // ... columnCount: 3 // rowCount: 2 } }); });
Angular
HTMLTypeScript<dx-pie-chart ...> <dxo-legend ... [columnCount]="3"> <!-- [rowCount]="2"> --> </dxo-legend> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
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() { $("#pieChartContainer").dxPieChart({ // ... legend: { // ... columnItemSpacing: 20, rowItemSpacing: 30 } }); });
Angular
HTMLTypeScript<dx-pie-chart ...> <dxo-legend ... [columnItemSpacing]="20" [rowItemSpacing]="30"> </dxo-legend> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Below, you can try out all the mentioned options in action.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.