All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Relocate the Legend

The legend can be aligned in the horizontal or vertical direction using the horizontalAlignment or verticalAlignment option.

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        // ...
        legend: {
            horizontalAlignment: "center", // or "left" | "right"
            verticalAlignment: "top" // or "bottom"
        }
    });
});
Angular
HTML
TypeScript
<dx-pie-chart>
    <dxo-legend
        horizontalAlignment="center" <!-- or "left" | "right" -->
        verticalAlignment="top"> <!-- or "bottom" -->
    </dxo-legend>
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})

Below, you can try out these options in action.

See Also