New Funnel Chart Widget (Coming soon in v17.2)

Oliver's Blog
12 October 2017

A Funnel Chart is a type of chart often used to visualize a value at different stages of a process and to assess value changes throughout those stages. Funnels are useful to identify potential issues in processes.

A typical funnel report represents stages of a process in the form of upturned trapezoids. The longer and shorter bases of the trapezoids represent the value at the start and end the given stage, respectively. Although the funnel chart is named after the household funnel, the resemblance is superficial. Unlike a real funnel, not everything that is “poured in” at the top of a funnel chart flows through to the bottom.

An Example Use Case

For this post, we focus on using a funnel chart to analyze a conversion rate and identify bottlenecks. This type of report is usually called Conversion Funnel or Sales Funnel.

The conversion rate is one of the most important aspects of paid inclusion campaigns. The conversion rate of a website, for example, can show what percentage of all visitors performed a desired action: bought a product, filled out a form, etc. The bigger the conversion rate, the more successful is the website and a related paid inclusion campaign.

One way of raising the conversion rate is getting rid of bottlenecks. A bottleneck is one process in a chain of processes whose limited throughput reduces the throughput of the entire chain. Simply put, it’s a point where the measured value drops by the largest margin. We created a sample funnel chart to illustrate the concepts of conversion rate and bottleneck. We used the jQuery Funnel widget, a data visualization component new to DevExtreme in the upcoming v.17.2 release. Note that as usual the component is also available as an Angular Component, ASP.NET MVC and ASP.NET Core MVC Controls and a Knockout binding.

Conversion Rate Funnel Chart

As you can see, 18% of the website visitors renewed their subscriptions, so this is the conversion rate of the website. But most of the visitors decided not to subscribe after contacting support. This bottleneck is made obvious by the funnel chart, and it might be possible to improve things, for example, by providing some extra training for the support team.

Why a New Widget?

DevExtreme subscribers are familiar with our impressive library of data visualization components. Specifically, there is the feature-rich Chart widget with its many series types. We considered implementing the Funnel chart as a new series type for the Chart widget, but we decided to introduce it as a separate component, because the Cartesian XY coordinate system used by the Chart is not a good fit for the Funnel.

However, Funnel and Chart share many visual elements like the legend, the title, tooltips and color schemes, and most importantly they share the simplicity of configuration. For example, the following code is sufficient to create a Funnel with default styling:

  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 } 
  title: "Website Conversions", 
  argumentField: "argument", 
  valueField: "value" 

Try It Now!

The Funnel widget is included in the v17.2 pre-release that is available via npm right now. Please note that this pre-release may contain some bugs and is not intended to be used in production.

npm install devextreme@17.2.1-pre-17262

We will provide full documentation when v17.2 is released, meanwhile you can learn more about Funnel configuration from this PR on GitHub.

If you have thoughts about this new DevExtreme widget, please share them with us!

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.

Hi Oliver,

I have always found it very difficult and confusing to compare the funnel sections based on the area, width and height etc. Without the % labels in your example it would be impossible. I think a simple bar chart would be much easier to read in my opinion. A funnel, by design, means that everything should flow through it (top to bottom) but in your example a visitor only did one of the tasks. So even a pie chart would be easier to read.

I am sure some people will like this chart type though, just not me.

12 October 2017
Oliver Sturm (DevExpress)
Oliver Sturm (DevExpress)

@APB - Thanks for your comment. As I explained in the post, the funnel chart is only called that for its appearance, not because the "function" of a funnel (having everything flow through to the bottom) is similar to what the funnel chart does. I think the chart does a good job of showing process stages - of course you could imagine the same data in a (horizontal?) bar chart, but I don't think it would be as easy to understand. A pie chart would not work, because the assumption with a pie is that its parts logically add up to a whole - this is not true for the percentages displayed in a funnel chart.

12 October 2017
Steve Sharkey
Steve Sharkey

An excellent example of good use of the funnel chart. I find, with all chart types, people have their favourites and tend to over use them rather than come from the point of view of "what am I trying to show/learn by displaying data graphically then choosing the appropriate chart type.

As you stated, this chart (even without the percentages) highlights the point in the process on that is forming a bottle neck - though it is possible to take the view that the more you pump in at the top the more (possibly) comes out of the bottom - this appears to be the theory banks use and hence better offers to new customers rather than existing ones. It would be nice to be able to overlay the relative costs of addressing each layer of the funnel chart to improve the return (in the banks example - it's surely more cost effective to spend a little and retain more customers rather than spend a lot to attract more at the top).

On a final note the funnel chart is also nice for profiling when done on percentages so for the example given how does DevExpress compare with any competitors or the industry "standard"?

12 October 2017
21 Data Visualization Types: Examples of Graphs and Charts Uses

Pingback from  21 Data Visualization Types: Examples of Graphs and Charts Uses

24 March 2020
Top 10 Graphs in Business and Statistics (Pictures, Examples)

Pingback from  Top 10 Graphs in Business and Statistics (Pictures, Examples)

29 July 2020
21 Best Data Visualization Types: Examples Of Graphs And Charts Uses – Sweet Saw

Pingback from  21 Best Data Visualization Types: Examples Of Graphs And Charts Uses – Sweet Saw

10 January 2022
What is Data Visualization?

Pingback from  What is Data Visualization?

12 April 2023

Please login or register to post comments.