Charts - Overview

DevExtreme ASP.NET MVC offers a set of jQuery-based chart controls for Razor C#. Common charts like line, area, bar, and pie are included, along with specialized charts such as funnel, treemap, polar, and radar.

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

@(Html.DevExtreme().Chart() .ID("chart") .Palette(VizPalette.HarmonyLight) .Title("Pizza Shop Complaints") .ArgumentAxis(a => a .Label(l => l .OverlappingBehavior(OverlappingBehavior.Stagger) ) ) .Tooltip(t => t .Enabled(true) .Shared(true) .CustomizeTooltip( @<text> function(info) { return { html: "<div><div class='tooltip-header'>" + info.argumentText + "</div>" + "<div class='tooltip-body'><div class='series-name'>" + "<span class='top-series-name'>" + info.points[0].seriesName + "</span>" + ": </div><div class='value-text'>" + "<span class='top-series-value'>" + info.points[0].valueText + "</span>" + "</div><div class='series-name'>" + "<span class='bottom-series-name'>" + info.points[1].seriesName + "</span>" + ": </div><div class='value-text'>" + "<span class='bottom-series-value'>" + info.points[1].valueText + "</span>" + "% </div></div></div>" }; } </text>) ) .ValueAxis(a => { a.Add() .Name("frequency") .Position(Position.Left) .TickInterval(300); a.Add() .Name("percentage") .Position(Position.Right) .ShowZero(true) .Label(l => l .CustomizeText( @<text> function(info) { return info.valueText + "%"; } </text>) ) .ConstantLines(c => { c.Add() .Value(80) .Color("#fc3535") .DashStyle(DashStyle.Dash) .Width(2) .Label(l => l.Visible(false)); }) .TickInterval(20) .ValueMarginsEnabled(false); }) .CommonSeriesSettings(s => s .ArgumentField("complaint") ) .Series(s => { s.Add() .Type(SeriesType.Bar) .ValueField("count") .Axis("frequency") .Name("Complaint frequency") .Color("#fac29a"); s.Add() .Type(SeriesType.Spline) .ValueField("cumulativePercentage") .Axis("percentage") .Name("Cumulative percentage") .Color("#6b71c3"); }) .Legend(l => l .VerticalAlignment(VerticalEdge.Top) .HorizontalAlignment(HorizontalAlignment.Center) ) .DataSource(d => d.Mvc().LoadAction("GetComplaintsData")) )

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

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models { public class ParetoChartData { public String complaint { get; set; } public int count { get; set; } } }

#chart { height: 440px; } .tooltip-header { margin-bottom: 5px; font-size: 16px; font-weight: 500; padding-bottom: 5px; border-bottom: 1px solid #c5c5c5; } .tooltip-body { width: 170px; } .tooltip-body .series-name { font-weight: normal; opacity: 0.6; display: inline-block; line-height: 1.5; padding-right: 10px; width: 126px; } .tooltip-body .value-text { display: inline-block; line-height: 1.5; width: 30px; }