Vue Funnel - Overview
A funnel item is a visual representation of a data object.
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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.