All docs
V20.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

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