Pareto in ASP.NET CORE Charts Component
23 Jun 20237 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
.
<ejs-chart id="container" enableAnimation="true">
<e-chart-primaryyaxis title="Frequency" minimum="0" maximum="150" interval="30" valueType="Category">
</e-chart-primaryyaxis>
<e-chart-primaryxaxis title="Defect" valueType="Category">
</e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="x" yName="y"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Pareto">
<e-series-marker visible="true" width="10" height="10">
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
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.
<ejs-chart id="container" title="Defects in Shirts">
<e-chart-tooltipsettings enable="true" shared="true" format="${series.name} : <b>${point.y}</b>">
</e-chart-tooltipsettings>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-chart-legendsettings visible="true" enableHighlight="true">
</e-chart-legendsettings>
<e-chart-primaryxaxis labelIntersectAction="@Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate45" interval="1"
valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
<e-majorgridlines width="0"></e-majorgridlines>
<e-minorgridlines width="0"></e-minorgridlines>
<e-majorticklines width="0"></e-majorticklines>
<e-minorticklines width="0"></e-minorticklines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Frequency of Occurence" minimum="0" maximum="25" interval="5">
<e-majorgridlines width="1"></e-majorgridlines>
<e-minorgridlines width="1"></e-minorgridlines>
<e-majorticklines width="0"></e-majorticklines>
<e-minorticklines width="0"></e-minorticklines>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryyaxis>
<e-series-collection>
<e-series dataSource="ViewBag.ChartPoints" width="2" name="Defect" xName="DefectCategory" yName="Y"
opacity="0.75" columnWidth="0.4" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Pareto">
<e-series-paretooptions width="2" dashArray="3,2" fill="#F7523F">
<e-marker visible="true" width="7" height="7" isFilled="true"></e-marker>
</e-series-paretooptions>
</e-series>
</e-series-collection>
</ejs-chart>
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;
}