Data Visualization ▸ Overview

@(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;

namespace DevExtreme.MVC.Demos.Models.SampleData {
    public partial class SampleData {
        public static readonly IEnumerable<ParetoChartData> ParetoChartData = new[] {
            new ParetoChartData { complaint = "Cold pizza", count = 780 },
            new ParetoChartData { complaint = "Not enough cheese", count = 120 },
            new ParetoChartData { complaint = "Underbaked or Overbaked", count = 52 },
            new ParetoChartData { complaint = "Delayed delivery", count = 1123 },
            new ParetoChartData { complaint = "Damaged pizza", count = 321 },
            new ParetoChartData { complaint = "Incorrect billing", count = 89 },
            new ParetoChartData { complaint = "Wrong size delivered", count = 222 }
        };
    }
}

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;
}