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

See also