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