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.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

​x
 
@model IEnumerable<object>​@(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 }        }))​

xxxxxxxxxx
 
using DevExtreme.AspNet.Data;using DevExtreme.AspNet.Mvc;using DevExtreme.NETCore.Demos.Models;using DevExtreme.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;using System;using System.Collections.Generic;using System.Linq;​namespace DevExtreme.NETCore.Demos.Controllers {    public class ChartsController : Controller {        public ActionResult FunnelChart() {            return View();        }    }}

xxxxxxxxxx
 
#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