DevExtreme Vue - Pyramid Chart

You can use the Funnel widget to create a pyramid chart. Change the algorithm option to "dynamicHeight" and the inverted option 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;

View Demo

See Also