Your search did not match any results.
Funnel and Pyramid Charts

Funnel Chart

Documentation

The DevExtreme HTML5 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.

@model IEnumerable<object> @(Html.DevExtreme().Funnel() .ID("funnel") .Title(t=>t.Text("Website Conversions") .Margin(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 List<object> { 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.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult FunnelChart() { return View(); } } }
#funnel { height: 440px; }