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.
jQuery
JavaScript
$(function() {
$("#funnelContainer").dxFunnel({
dataSource: [
{ fruit: "Apples", count: 10, color: "green" },
{ fruit: "Oranges", count: 12, color: "orange" },
{ fruit: "Lemons", count: 15, color: "yellow" }
],
argumentField: "fruit",
valueField: "count",
colorField: "color"
});
});Angular
HTML
TypeScript
<dx-funnel
[dataSource]="fruits"
argumentField="fruit"
valueField="count"
colorField="color">
</dx-funnel>
import { DxFunnelModule } from "devextreme-angular";
// ...
export class AppComponent {
fruits = [
{ fruit: "Apples", count: 10, color: "green" },
{ fruit: "Oranges", count: 12, color: "orange" },
{ fruit: "Lemons", count: 15, color: "yellow" }
];
}
@NgModule({
imports: [
// ...
DxFunnelModule
],
// ...
})Vue
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>React
App.js
import React from 'react';
import Funnel from 'devextreme-react/funnel';
const fruits = [
{ fruit: "Apples", count: 10, color: "green" },
{ fruit: "Oranges", count: 12, color: "orange" },
{ fruit: "Lemons", count: 15, color: "yellow" }
];
class App extends React.Component {
render() {
return (
<Funnel
dataSource={fruits}
argumentField="fruit"
valueField="count"
colorField="color"
/>
);
}
}
export default App;To configure other aspects of the funnel items' appearance, use the item object.
jQuery
JavaScript
$(function() {
$("#funnelContainer").dxFunnel({
// ...
item: {
border: {
visible: true
}
}
});
});Angular
HTML
TypeScript
<dx-funnel ... >
<dxo-border
[visible]="true">
</dxo-border>
</dx-funnel>
import { DxFunnelModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxFunnelModule
],
// ...
})Vue
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>React
App.js
import React from 'react';
import Funnel, { Item, Border } from 'devextreme-react/funnel';
class App extends React.Component {
render() {
return (
<Funnel ... >
<Item>
<Border visible={true} />
</Item>
</Funnel>
);
}
}
export default App;Refer to other topics in this section for details on the main funnel item features.
See Also
Feedback