Your search did not match any results.

Charts - Funnel Chart

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

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; }

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

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