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 and inject ParetoSeries ColumnSeries and LineSeries module using Chart.Inject(ParetoSeries, LineSeries, ColumnSeries) method.
/**
* Sample for Pareto chart
*/
var chart = new ej.charts.Chart({
//Initializing Primary X Axis
primaryXAxis: {
interval: 1,
valueType: 'Category',labelIntersectAction: 'Rotate45',
majorGridLines: { width: 0 }, minorGridLines: { width: 0 },
majorTickLines: { width: 0 }, minorTickLines: { width: 0 },
lineStyle: { width: 0 },
},
//Initializing Primary X Axis
primaryYAxis: {
title: 'Frequency of Occurence',
minimum: 0,
maximum: 25,
interval: 5,
lineStyle: { width: 0 },
majorTickLines: { width: 0 }, majorGridLines: { width: 1 },
minorGridLines: { width: 1 }, minorTickLines: { width: 0 }
},
chartArea: {
border: {
width: 0
}
},
//Initializing Chart Series
series: [
{
type: 'Pareto',
dataSource: [
{ x: 'Button Defect', y: 23 }, { x: 'Pocket Defect', y: 16 },
{ x: 'Coller Defect', y: 10 }, { x: 'Cuff Defect', y: 7 },
{ x: 'Sleeve Defect', y: 6 }
], marker: { visible: true },
xName: 'x', yName: 'y', name: 'Defect', width: 2
}
],
width: ej.base.Browser.isDevice ? '100%' : '75%',
//Initializing Chart Title
title: 'Pareto chart - Defects in Shirts',
legendSettings: { visible: false },
//Initializing Tooltip
tooltip: {
enable: true,
shared: false
},
});
chart.appendTo('#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>