DevExtreme React - Relocate the Legend

The legend can be moved inside the chart using the position option, and also aligned in the horizontal or vertical direction using the horizontalAlignment or verticalAlignment option.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        legend: {
            position: "inside", // or "outside"
            horizontalAlignment: "center", // or "left" | "right"
            verticalAlignment: "top" // or "bottom"
        }
    });
});
Angular
HTML
TypeScript
<dx-chart>
    <dxo-legend
        position="inside"
        horizontalAlignment="center"
        verticalAlignment="top">
    </dxo-legend>
</dx-chart>
import { DxChartModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Below, you can try out these options in action.

See Also