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