Angular Chart - Relocate the Legend

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

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 properties in action.

See Also