Vue Funnel - Overview

A funnel item is a visual representation of a data object.

Funnel Items

Funnel items get their colors from the palette by default. If you want to use colors from the data source, specify the colorField property.

App.vue
  • <template>
  • <DxFunnel
  • :data-source="fruits"
  • argument-field="fruit"
  • value-field="count"
  • color-field="color"
  • />
  • </template>
  •  
  • <script>
  • import DxFunnel from 'devextreme-vue/funnel';
  •  
  • export default {
  • components: {
  • DxFunnel
  • },
  • data() {
  • return {
  • fruits: [
  • { fruit: "Apples", count: 10, color: "green" },
  • { fruit: "Oranges", count: 12, color: "orange" },
  • { fruit: "Lemons", count: 15, color: "yellow" }
  • ];
  • };
  • }
  • }
  • </script>

To configure other aspects of the funnel items' appearance, use the item object.

App.vue
  • <template>
  • <DxFunnel ... >
  • <DxItem>
  • <DxBorder :visible="true" />
  • </DxItem>
  • </DxFunnel>
  • </template>
  •  
  • <script>
  • import DxFunnel, {
  • DxItem,
  • DxBorder
  • } from 'devextreme-vue/funnel';
  •  
  • export default {
  • components: {
  • DxFunnel,
  • DxItem,
  • DxBorder
  • }
  • }
  • </script>

Refer to other topics in this section for details on the main funnel item features.

See Also