Data Visualization ▸ Pyramid Chart

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

    }
}

#pyramid {
    height: 440px;
}