Your search did not match any results.

Overview

DevExtreme ASP.NET Core MVC Charts are jQuery-powered server-side charting controls that enable you to transform data into an eye-catching and elegant visual representation. In addition to the common line, bar, and pie charts, the collection includes such specialized charts as treemap, bubble chart, polar and radar charts, and many more. You can configure each chart with Razor C# or Razor VB syntax, and use them in MVC views as well as in Razor Pages (introduced in .NET Core 2.0).

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.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult Overview() { return View(); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.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; }