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.

Overview

The legend is a component that helps a user identify funnel items. The legend contains several items, one per funnel item, each consisting of a colored marker and text showing the funnel item's argument.

Funnel Legend

Properties that configure the legend's appearance, location, and content are collected in the legend object. To make the legend visible, set the legend.visible property to true.

jQuery
JavaScript
$(function() {
    $("#funnelContainer").dxFunnel({
        // ...
        legend: {
            visible: true
        }
    });
});
Angular
HTML
TypeScript
<dx-funnel ... >
    <dxo-legend [visible]="true"></dxo-legend>
</dx-funnel>
import { DxFunnelModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFunnelModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxFunnel ... >
        <DxLegend :visible="true" />
    </DxFunnel>
</template>

<script>
import DxFunnel, { DxLegend } from 'devextreme-vue/funnel';

export default {
    components: {
        DxFunnel,
        DxLegend
    }
}
</script>
React
App.js
import React from 'react';
import Funnel, { Legend } from 'devextreme-react/funnel';

class App extends React.Component {
    render() {
        return (
            <Funnel ... >
                <Legend visible={true} />
            </Funnel>
        );
    }
}

export default App;
See Also