React 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.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.

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