jQuery PieChart - Relocate the Legend
The legend can be aligned in the horizontal or vertical direction using the horizontalAlignment or verticalAlignment property.
jQuery
JavaScript
$(function() {
$("#pieChartContainer").dxPieChart({
// ...
legend: {
horizontalAlignment: "center", // or "left" | "right"
verticalAlignment: "top" // or "bottom"
}
});
});Angular
HTML
TypeScript
<dx-pie-chart>
<dxo-legend
horizontalAlignment="center" <!-- or "left" | "right" -->
verticalAlignment="top"> <!-- or "bottom" -->
</dxo-legend>
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxPieChartModule
],
// ...
})Vue
App.vue
<template>
<DxPieChart ... >
<DxLegend
horizontal-alignment="center" <!-- or "left" | "right" -->
vertical-alignment="top" <!-- or "bottom" -->
/>
</DxPieChart>
</template>
<script>
import DxPieChart, {
DxLegend
} from 'devextreme-vue/pie-chart';
export default {
components: {
DxPieChart,
DxLegend
}
}
</script>React
App.js
import React from 'react';
import PieChart, {
Legend
} from 'devextreme-react/pie-chart';
class App extends React.Component {
render() {
return (
<PieChart ... >
<Legend
horizontalAlignment="center" {/* or "left" | "right" */}
verticalAlignment="top" {/* or "bottom" */}
/>
</PieChart>
);
}
}Below, you can try out these properties in action.
See Also
Feedback