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
Feedback