Choose an item

Pareto Chart

These chart types belong to FusionCharts XT.

A Pareto chart, named after Vilfredo Pareto, is a type of chart that combines the column chart with the line chart. The data values in a Pareto chart are represented by columns, which are arranged in descending order of magnitude. The cumulative total of these values is shown by an upward curving line. Pareto charts are used for isolating the key causes of a problem. They can also be used for determining the key factors of success.

The left vertical axis or the primary axis shows the frequency of occurrence, the cost, or other important units of measurement. The right vertical axis or the secondary axis shows the cumulative percentage of the total number of occurrences, the total cost, or the total of a specific unit of measurement.

{ "header": "Chart Anatomy", "subHeader": "To know how FusionCharts works it is important to understand the various components and concepts of a chart", "content": { "header": "Below are different sections with interactive annotated images describing various components and concepts of charts", "contentGroup": [ { "itemHeader": "Pareto Chart", "imgSrc": "pareto-chart-anatomy.png", "annotations": [{ "annotationNumber": "1", "annotationName": "Caption", "annotationDesc": "The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.", "annotationDescLinkPath": null, "leftPosition": "27.5%", "topPosition": "8%", "annotationLinks": [{ "linkDesc": "Learn how to add caption ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption" }, { "linkDesc": "Font properties and cosmetics of caption can also be customized using attributes, know more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" }, { "linkDesc": "You can also customize the alignment of the caption. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment" } ] }, { "annotationNumber": "2", "annotationName": "Subcaption", "annotationDesc": "The subcaption (also called the chart subtitle) is the subheading of your chart. You can add custom text for sub-caption, as well as configure its font properties.", "annotationDescLinkPath": null, "leftPosition": "41%", "topPosition": "13.5%", "annotationLinks": [{ "linkDesc": "Learn how to add subcaption ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption" }, { "linkDesc": "Font properties and cosmetics of subcaption can also be customized using attributes. Learn more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" } ] }, { "annotationNumber": "3", "annotationName": "Canvas Area", "annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.", "annotationDescLinkPath": null, "leftPosition": "80%", "topPosition": "8%", "annotationLinks": [{ "linkDesc": "You can customize the border for canvas. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border" }, { "linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill" } ] }, { "annotationNumber": "4", "annotationName": "X-Axis", "annotationDesc": "X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "19%", "topPosition": "68%", "annotationLinks": [] }, { "annotationNumber": "5", "annotationName": "X-Axis Title", "annotationDesc": "It refers to title of the X-axis. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "55%", "topPosition": "77%", "annotationLinks": [] }, { "annotationNumber": "6", "annotationName": "X-Axis Labels", "annotationDesc": "X-Axis labels are the names of the data points that are displayed on the X-axis of a chart. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "65.5%", "topPosition": "72%", "annotationLinks": [] }, { "annotationNumber": "7", "annotationName": "Y-Axis", "annotationDesc": "Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about them ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "17%", "topPosition": "9%", "annotationLinks": [] }, { "annotationNumber": "8", "annotationName": "Y-Axis Title", "annotationDesc": "Y-Axis refers to the title of the y-axis. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "9%", "topPosition": "38%", "annotationLinks": [] }, { "annotationNumber": "9", "annotationName": "Data Plot", "annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.", "annotationDescLinkPath": null, "leftPosition": "42%", "topPosition": "60.5%", "annotationLinks": [{ "linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ", "linkPath": "/chart-guide/chart-configurations/data-plot" }] }, { "annotationNumber": "10", "annotationName": "Tooltip", "annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "38%", "topPosition": "37%", "annotationLinks": [{ "linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips" }, { "linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros, learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros" } ] } ] } ] } }

The two types of Pareto charts available are:

  • Pareto 2D

  • Pareto 3D

Pareto 2D

In this example, let's create a pareto 2D chart showcasing the late arrivals of the employee by their respective reported cause. The primary y-axis shows the number of occurrences of the employee per month whereas the secondary y-axis shows the cumulative percentage.

To create a pareto chart in 2D follow the steps given below: set the type attribute to pareto2d.

  • In the JSON data, set the attributes and their corresponding values in "<attributeName>": "<value>" format.

  • Specify the chart type using the type attribute. To render a pareto 2D chart, set pareto2d.

  • Set the container object using renderAt attribute.

  • Specify the dimension of the chart using width and height attributes.

  • Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

For a detailed list of attributes, refer to the chart attributes page of multi-series pareto 2D chart.

The pareto chart in 2D for the above code looks like:

FusionCharts will load here..
{
    "chart": {
        "caption": "Employee late arrivals by reported cause",
        "subCaption": "Last month",
        "xAxisName": "Reported Cause",
        "pYAxisName": "No. of Occurrence",
        "sYAxisname": "Cumulative Percentage",
        "showHoverEffect": "1",
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Traffic",
            "value": "5680"
        },
        {
            "label": "Family Engagement",
            "value": "1036"
        },
        {
            "label": "Public Transport",
            "value": "950"
        },
        {
            "label": "Weather",
            "value": "500"
        },
        {
            "label": "Emergency",
            "value": "140"
        },
        {
            "label": "Others",
            "value": "68"
        }
    ]
}
<chart caption="Employee late arrivals by reported cause" subcaption="Last month" xaxisname="Reported Cause" pyaxisname="No. of Occurrence" syaxisname="Cumulative Percentage" showhovereffect="1" theme="fusion">
    <set label="Traffic" value="5680" />
    <set label="Family Engagement" value="1036" />
    <set label="Public Transport" value="950" />
    <set label="Weather" value="500" />
    <set label="Emergency" value="140" />
    <set label="Others" value="68" />
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'pareto2d',
    renderAt: 'chart-container',
    width: '680',
    height: '390',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Employee late arrivals by reported cause",
            "subCaption": "Last month",
            "xAxisName": "Reported Cause",
            "pYAxisName": "No. of Occurrence",
            "sYAxisname": "Cumulative Percentage",
            "showHoverEffect": "1",
            "theme": "fusion"
        },
        "data": [{
            "label": "Traffic",
            "value": "5680"
        }, {
            "label": "Family Engagement",
            "value": "1036"
        }, {
            "label": "Public Transport",
            "value": "950"
        }, {
            "label": "Weather",
            "value": "500"
        }, {
            "label": "Emergency",
            "value": "140"
        }, {
            "label": "Others",
            "value": "68"
        }]
    }
}
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the pareto 2D chart.

Pareto 3D

To render a pareto chart in 3D, change the value of the type attribute from pareto2D to pareto3D. The rest of the data structure remains the same.

For a detailed list of attributes, refer to the chart attributes page of multi-series pareto 3D chart.

A simple Pareto 3D chart looks like this:

FusionCharts will load here..
{
    "chart": {
        "caption": "Employee late arrivals by reported cause",
        "subCaption": "Last month",
        "xAxisName": "Reported Cause",
        "pYAxisName": "No. of Occurrence",
        "sYAxisname": "Cumulative Percentage",
        "showHoverEffect": "1",
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Traffic",
            "value": "5680"
        },
        {
            "label": "Family Engagement",
            "value": "1036"
        },
        {
            "label": "Public Transport",
            "value": "950"
        },
        {
            "label": "Weather",
            "value": "500"
        },
        {
            "label": "Emergency",
            "value": "140"
        },
        {
            "label": "Others",
            "value": "68"
        }
    ]
}
<chart caption="Employee late arrivals by reported cause" subcaption="Last month" xaxisname="Reported Cause" pyaxisname="No. of Occurrence" syaxisname="Cumulative Percentage" showhovereffect="1" theme="fusion">
    <set label="Traffic" value="5680" />
    <set label="Family Engagement" value="1036" />
    <set label="Public Transport" value="950" />
    <set label="Weather" value="500" />
    <set label="Emergency" value="140" />
    <set label="Others" value="68" />
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'pareto3d',
    renderAt: 'chart-container',
    width: '680',
    height: '390',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Employee late arrivals by reported cause",
            "subCaption": "Last month",
            "xAxisName": "Reported Cause",
            "pYAxisName": "No. of Occurrence",
            "sYAxisname": "Cumulative Percentage",
            "showHoverEffect": "1",
            "theme": "fusion"
        },
        "data": [{
            "label": "Traffic",
            "value": "5680"
        }, {
            "label": "Family Engagement",
            "value": "1036"
        }, {
            "label": "Public Transport",
            "value": "950"
        }, {
            "label": "Weather",
            "value": "500"
        }, {
            "label": "Emergency",
            "value": "140"
        }, {
            "label": "Others",
            "value": "68"
        }]
    }
});
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the pareto 3D chart.

The data for the above two charts is single series. Values provided are only for the column plots. The percentage values for the line are automatically calculated and added to the chart.

Now, let's customize the appearance and properties of the charts.

Display Values for the Line Series

By default, the auto-generated percentage values for the line chart are not rendered. To specify the percentage data values for the line chart, set the showLineValues attribute to 1.

Refer to the code given below:

{
  "chart": {
    "showLineValues": "1"
  },
}

A pareto chart configured to render the percentage values for the line chart looks like this:

FusionCharts will load here..

Click here to edit the pareto 2D chart.

Customize the Line Dataset

In a pareto chart, you can customize the cosmetic of the line rendered. Given below are the cosmetic which can be applied to customize the line dataset.

  • Set the hex color code to lineColor attribute to specify the color of the rendered line.

  • Specify the thickness of the line (in pixels), using lineThinkness attribute.

  • Set the transparency of the line segments using lineAlpha attribute. This attribute takes values between 0 (transparent) and 100 (opaque).

  • Set the value of lineDashed attribute as 1 to render the line segments as dashed lines. Setting this attribute to 0 will render them as whole lines.

  • If the line segments are rendered as dashed lines, set the length of each dash using lineDashLen attribute.

  • If the line segments are rendered as dashed lines, set the gap between each dash using lineDashGap attribute.

Refer to the code given below:

{
    "chart": {
        "lineColor": "#8e0000",
        "lineThickness": "2",
        "lineAlpha": "80",
        "lineDashed": "1",
        "lineDashLen": "5",
        "lineDashGap": "3"
    },
}

A pareto chart with the line segments customized looks like this:

FusionCharts will load here..

Click here to edit the pareto 2D chart.

Hide Secondary Axis Values

Depending on the use case, hide the secondary y-axis of the pareto chart by following the steps given below:

  • Specify the showSecondaryLimits attribute to set the upper and lower limits for the secondary y-axis. Setting this attribute to 0 will hide the limits, whereas setting it to 1 (default) will show them.

  • Specify the showDivLineSecondaryValue attribute to set whether the divisional line values for the secondary y-axis will be shown. Setting this attribute to 0 will hide the values whereas setting it to 1 (default) will show them.

Refer to the code given below:

{
  "chart": {
    "showSecondaryLimits": "0",
    "showDivLineSecondaryValue": "0"
  },
}

A pareto chart with hidden secondary y-axis looks like:

FusionCharts will load here..

Click here to edit the pareto 2D chart.