React Funnel - Relocate Labels
Labels are arranged in a column by default. Change the label.position property to display labels beside or inside funnel items.
jQuery
JavaScript
$(function() { $("#funnelContainer").dxFunnel({ // ... label: { position: "columns" // or "inside" | "outside" } }); });
Angular
HTML
TypeScript
<dx-funnel ... > <dxo-label position="columns"> <!-- or "inside" | "outside" --> </dxo-label> </dx-funnel>
import { DxFunnelModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxFunnelModule ], // ... })
Vue
App.vue
<template> <DxFunnel ... > <DxLabel position="columns" /> </DxFunnel> </template> <script> import DxFunnel, { DxLabel } from 'devextreme-vue/funnel'; export default { components: { DxFunnel, DxLabel } } </script>
React
App.js
import React from 'react'; import Funnel, { Label } from 'devextreme-react/funnel'; class App extends React.Component { render() { return ( <Funnel ... > <Label position="columns" /> </Funnel> ); } } export default App;
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.