Charts - Funnel Chart

The DevExtreme JavaScript Funnel Chart visualizes a value at different stages. It helps assess value changes throughout these stages and identify potential issues. In this demo, the Funnel shows the percentage of website users that performed a certain action: downloaded a trial, contacted support, purchased a subscription, etc. The chart shows that most users decided not to subscribe after contacting support. You can use this information to make a decision, for example, to provide extra training for the support team.

Backend API

@(Html.DevExtreme().Funnel() .ID("funnel") .Title(t => t.Text("Website Conversions") .Margin(m => m.Bottom(30)) ) .Export(e => e.Enabled(true)) .ArgumentField("Argument") .ValueField("Value") .Palette(VizPalette.SoftPastel) .Tooltip(t => t.Enabled(true) .Format("fixedPoint") ) .Item(i => i.Border(b => b.Visible(true))) .Label(l => l.Visible(true) .Position(FunnelLabelPosition.Inside) .BackgroundColor("none") .CustomizeText(@<text> function(e){ return "<span style='font-size: 28px'>" + e.percentText + "</span><br />" + e.item.argument; } </text>) ) .DataSource(new[] { new { Argument = "Visited the Website", Value = 9152 }, new { Argument = "Downloaded a Trial", Value = 6879 }, new { Argument = "Contacted Support", Value = 5121 }, new { Argument = "Subscribed", Value = 2224 }, new { Argument = "Renewed", Value = 1670 } }) )

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Collections.Generic; using System.Linq; using System.Text.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult FunnelChart() { return View(); } } }

#funnel { height: 440px; }

NOTE

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

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

The set of components allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly on the web client (includes adaptive layouts for tablet & mobile).

The Web Dashboard is available as a part of a Universal subscription.

Get Started with DevExpress BI Dashboard | Explore Demos