React Funnel - Pyramid Chart
You can use the Funnel UI component to create a pyramid chart. Change the algorithm property to "dynamicHeight" and the inverted property to true.
jQuery
JavaScript
$(function() { $("#funnelContainer").dxFunnel({ // ... algorithm: "dynamicHeight", inverted: true }); });
Angular
HTML
TypeScript
<dx-funnel ... algorithm="dynamicHeight" [inverted]="true"> </dx-funnel>
import { DxFunnelModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxFunnelModule ], // ... })
Vue
App.vue
<template> <DxFunnel algorithm="dynamicHeight" :inverted="true" /> </template> <script> import DxFunnel from 'devextreme-vue/funnel'; export default { components: { DxFunnel } } </script>
React
App.js
import React from 'react'; import Funnel from 'devextreme-react/funnel'; class App extends React.Component { render() { return ( <Funnel algorithm="dynamicHeight" inverted={true} /> ); } } 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.