JavaScript/jQuery 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-chart-legend
        position="inside"
        horizontalAlignment="center"
        verticalAlignment="top">
    </dxo-chart-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';

export default function App() {
    return (
        <Chart ... >
            <Legend
                position="inside"
                horizontalAlignment="center"
                verticalAlignment="top"
            />
        </Chart>
    );
}

Below, you can try out these properties in action.

See Also