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