React 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.
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 ], // ... })
Vue
App.vue
<template> <DxChart ... > <DxLegend position="inside" horizontal-alignment="center" vertical-alignment="top" /> </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 position="inside" horizontalAlignment="center" verticalAlignment="top" /> </Chart> ); } } export default App;
Below, you can try out these properties in action.
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.