Charts - Pareto Chart

You can use DevExtreme Chart to visualize data as a Pareto chart and display individual values along with their cumulative totals. In this demo, individual values are numbers of complaints and cumulative totals are given in percentages.

Backend API

​x
 
@(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")))​

xxxxxxxxxx
 
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 ParetoChart() {            return View();        }        public ActionResult Overview() {            return View();        }​        [HttpGet]        public IEnumerable<object> GetComplaintsData() {            var dataSource = new List<object>();            var sortedParetoData = SampleData.ParetoChartData.OrderByDescending(i => i.count);            var totalCount = sortedParetoData.Sum(i => i.count);            var cumulativeCount = 0;​            foreach(var item in sortedParetoData) {                cumulativeCount += item.count;                dataSource.Add(new {                    item.complaint,                    item.count,                    cumulativePercentage = Math.Round((double)cumulativeCount * 100 / totalCount)                });            }​            return dataSource;        }    }}

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

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

To create a Pareto chart you must:

Configure a Bar series and assign your primary data to this series (specify series.valueField property).
Add a Line or Spline series and assign cumulative total values to this series.
Specify valueAxis.constantLines to illustrate Pareto principle correlations (80/20).