Pareto in ASP.NET MVC Charts Component

23 Jun 20236 minutes to read

Pareto

Pareto charts are used to find the cumulative values of data in different categories. It is a combination of Column and Line series. The initial values are represented by column chart and the cumulative values are represented by Line chart. To render a pareto chart, use series Type as Pareto.

@(Html.EJS().Chart("container").Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Pareto).
      Marker(mr => mr.Visible(true).Height(10).Width(10)).
      XName("x").
      YName("y").
      DataSource(ViewBag.dataSource).
      Name("Gold").
      Width(2).
      Add();
   }).
   PrimaryXAxis(px => 
         px.Title("Defects")
            .ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   ).
   PrimaryYAxis(py => 
      py.Title("Frequency")
         .Minimum(0)
         .Maximum(150)
         .Interval(30)
   )
   .Render()
)
public ActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ x= "Traffic", y=56  },
                new ColumnChartData{ x="Child care", y=44.8 },
                new ColumnChartData{ x= "Transport", y=27.2 },
                new ColumnChartData{ x= "Weather", y=19.6},
                new ColumnChartData{ x= "Emergency", y=6.6 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }

        public class ColumnChartData
        {
            public string x;
            public double y;
        };

Pareto customization

The pareto line series can be customized by using the Marker, Width, DashArray, and Fill properties in the ParetoOptions. The secondary axis for the pareto series can be shown or hidden using the ShowAxis property.

@(Html.EJS().Chart("container").Series(series =>
   {
      series.XName("DefectCategory")
      .YName("Y")
      .Name("Defect")
      .Width(2)
      .Opacity(0.75)
      .ColumnWidth(0.4)
      .ParetoOptions(pr=>pr.DashArray("3,2").Marker(mr => mr.Visible(true).Width(7).Height(7).IsFilled(true)).Width(2).Fill("#F7523F"))
      .DataSource(ViewBag.ChartPoints)
      .Type(Syncfusion.EJ2.Charts.ChartSeriesType.Pareto).Add();
   }).
   PrimaryXAxis(px => 
      px.Interval(1)
         .ValueType(Syncfusion.EJ2.Charts.ValueType.Category).LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate45)
         .MajorGridLines(mg => mg.Width(0))
         .MinorGridLines(mg => mg.Width(0))
         .MajorTickLines(mt => mt.Width(0))
         .MinorTickLines(mt => mt.Width(0))
         .LineStyle(ls => ls.Width(0))
   ).
   PrimaryYAxis(py => 
      py.Title("Frequency of Occurence")
         .Minimum(0)
         .Maximum(25)
         .Interval(5)
         .MajorGridLines(mg => mg.Width(1))
         .MinorGridLines(mg => mg.Width(1))
         .MajorTickLines(mt => mt.Width(0))
         .MinorTickLines(mt => mt.Width(0))
         .LineStyle(ls => ls.Width(0))
   )
   .Title("Defects in Shirts")
   .LegendSettings(leg => leg.Visible(true).EnableHighlight(true))
   .Tooltip(tp => tp.Enable(true).Shared(true).Format("${series.name} : <b>${point.y}</b>"))
   .ChartArea(area => area.Border(br => br.Width(0)))
   .Render()
)
public ActionResult Index()
        {
            List<ParetoChartData> ChartPoints = new List<ParetoChartData>
            {
                new ParetoChartData { DefectCategory = "Button Defect", Y = 23 },
                new ParetoChartData { DefectCategory = "Pocket Defect", Y = 16 },
                new ParetoChartData { DefectCategory = "Collar Defect", Y = 10 },
                new ParetoChartData { DefectCategory = "Cuff Defect", Y = 7 },
                new ParetoChartData { DefectCategory = "Sleeve Defect", Y = 6 },
                new ParetoChartData { DefectCategory = "Other Defect", Y = 2 }
            };
            ViewBag.ChartPoints = ChartPoints;
            return View();
        }
        public class ParetoChartData
        {
            public string DefectCategory;
            public double Y;
        }

See also