React Charts - Funnel Chart

DevExtreme Funnel displays data/information flow across different stages/periods. This demo displays conversion rates from website visits to product renewals.

TS JS

Backend API

import React from 'react'; import Funnel, { Title, Margin, Export, Tooltip, Item, Border, Label, } from 'devextreme-react/funnel'; import type { ILabelProps } from 'devextreme-react/funnel'; import { dataSource } from './data.ts'; const formatLabel: ILabelProps['customizeText'] = (arg) => `<span class="label">${arg.percentText}</span><br/>${arg.item.argument}`; function App() { return ( <Funnel id="funnel" dataSource={dataSource} palette="Soft Pastel" argumentField="argument" valueField="value" > <Title text="Website Conversions"> <Margin bottom={30} /> </Title> <Export enabled={true} /> <Tooltip enabled={true} format="fixedPoint" /> <Item> <Border visible={true} /> </Item> <Label visible={true} position="inside" backgroundColor="none" customizeText={formatLabel} /> </Funnel> ); } export default App;

import React from 'react'; import Funnel, { Title, Margin, Export, Tooltip, Item, Border, Label, } from 'devextreme-react/funnel'; import { dataSource } from './data.js'; const formatLabel = (arg) => `<span class="label">${arg.percentText}</span><br/>${arg.item.argument}`; function App() { return ( <Funnel id="funnel" dataSource={dataSource} palette="Soft Pastel" argumentField="argument" valueField="value" > <Title text="Website Conversions"> <Margin bottom={30} /> </Title> <Export enabled={true} /> <Tooltip enabled={true} format="fixedPoint" /> <Item> <Border visible={true} /> </Item> <Label visible={true} position="inside" backgroundColor="none" customizeText={formatLabel} /> </Funnel> ); } export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export const dataSource = [ { argument: 'Visited the Website', value: 9152 }, { argument: 'Downloaded a Trial', value: 6879 }, { argument: 'Contacted Support', value: 5121 }, { argument: 'Subscribed', value: 2224 }, { argument: 'Renewed', value: 1670 }, ];

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

#funnel { height: 440px; } #funnel .label { font-size: 28px; }

This demo configures the following objects:

title
Specifies component title.
export
Configures export settings. Our Funnel Chart supports the following export formats: PNG, PDF, JPEG, SVG, and GIF.
tooltip
Specifies item tooltips.
label
Configures item labels.
item
Customizes item appearance.

Use the DevExpress BI Dashboard to embed interactive business intelligence into your next web app.

Our Web Dashboard is a data analysis UI component you can embed into your ASP.NET Core or Angular, React, and Vue applications with a .NET backend. DevExpress Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an auto-arranged layout.

DevExpress Dashboard allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly within the web client (includes built-in adaptive layouts for tablet & mobile devices).

DevExpress is available as part of a Universal subscription.

Get Started with DevExpress BI Dashboard | Explore Demos