All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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;

View Demo

See Also