Charts - Pyramid Chart

DevExtreme Funnel can display data/information as a pyramid chart. To generate pyramid visualizations, set the algorithm property to "dynamicHeight" and invert the Funnel.

Backend API

<div id="pyramid-demo"> @(Html.DevExtreme().Funnel() .ID("pyramid") .Palette(VizPalette.HarmonyLight) .ValueField("Count") .ArgumentField("Level") .Legend(l => l .Visible(true) ) .Title(t => t .Text("Team Composition") .Margin(m => m.Bottom(30)) ) .Tooltip(t => t .Enabled(true) ) .Inverted(true) .Algorithm(FunnelAlgorithm.DynamicHeight) .Item(i => i .Border(b => b .Visible(true) ) ) .Label(l => l .Visible(true) .HorizontalAlignment(HorizontalEdge.Left) .BackgroundColor("none") .Font(f => f .Size(16) ) ) .SortData(false) .DataSource(new[] { new { Level = "Junior Engineer", Count = 75 }, new { Level = "Mid-Level Engineer", Count = 95 }, new { Level = "Senior Engineer", Count = 53 }, new { Level = "Lead Engineer", Count = 23 }, new { Level = "Architect", Count = 18 } }) ) </div>

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 PyramidChart() { return View(); } } }

#pyramid { height: 440px; }

This demo configures the following objects:

title
Specifies component title.
tooltip
Specifies item tooltips.
item
Customizes item appearance.
legend
Configures the component legend.
label
Configures item labels.