Configuring a Pareto Chart

The Pareto chart, named after Vilfredo Pareto, is a type of chart which contains both bars and a line. FusionCharts Suite XT allows you to configure several functional and cosmetic properties for the Pareto chart.

In this section you will be shown how you can:

Display values for the line series
Customize the line dataset
Hide secondary axis values
Show/hide the line chart

Displaying Values for the Line Series

By default, the auto-generated percentage values for the line chart are not rendered.

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

FusionCharts will load here..

Given below is a brief description of the attribute that is used to show data values for the line series:

Attribute Name	Description
`showLineValues`	It is used to specify whether the percentage data values will be shown for the line chart. Setting this attribute to `1` will show them, setting it to `0` (default) will hide them.

The data structure needed to show percentage values for the line chart is given below:

JSON
XML

{ "chart": { "theme": "fint", "caption": "Employee late arrivals by reported cause", "subCaption": "Last month", "xAxisName": "Reported Cause", "pYAxisName": "No. of Occurrence", "sYAxisname": "Cumulative Percentage", "showValues": "0", "showXAxisLine": "1", "showLineValues": "1" }, "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": {
        "theme": "fint",
        "caption": "Employee late arrivals by reported cause",
        "subCaption": "Last month",
        "xAxisName": "Reported Cause",
        "pYAxisName": "No. of Occurrence",
        "sYAxisname": "Cumulative Percentage",
        "showValues": "0",
        "showXAxisLine": "1",
        "showLineValues": "1"
    },
    "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"
        }
    ]
}

Customizing the Line Dataset

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

FusionCharts will load here..

Given below is a brief description of the attributes used to customize the line segments:

Attribute Name	Description
`lineColor`	It is used to specify the hex code for the color that will be used to render the line.
`lineThickness`	It is used to configure the thickness of the line, in pixels.
`lineAlpha`	It use to set the transparency for the line segments. This attribute takes values between 0 (transparent) and 100 (opaque).
`lineDashed`	It is used to specify whether the line segments will be rendered as dashed lines. Setting this attribute to `1` will render them as dashed lines, setting it to `0` will render them as whole lines.
`lineDashLen`	It is used to specify the length of each dash, if the line segments are to be rendered as dashed lines.
`lineDashGap`	It is used to specify the gap between each dash, if the line segments are to be rendered as dashed lines.

The data structure needed to customize the line segments is given below:

JSON
XML

{ "chart": { "theme": "fint", "caption": "Employee late arrivals by reported cause", "subCaption": "Last month", "xAxisName": "Reported Cause", "pYAxisName": "No. of Occurrence", "sYAxisname": "Cumulative Percentage", "showValues": "0", "showXAxisLine": "1", "lineThickness": "2", "lineColor": "#8e0000", "lineAlpha": "80", "lineDashed": "1", "lineDashLen": "5", "lineDashGap": "3" }, "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": {
        "theme": "fint",
        "caption": "Employee late arrivals by reported cause",
        "subCaption": "Last month",
        "xAxisName": "Reported Cause",
        "pYAxisName": "No. of Occurrence",
        "sYAxisname": "Cumulative Percentage",
        "showValues": "0",
        "showXAxisLine": "1",
        "lineThickness": "2",
        "lineColor": "#8e0000",
        "lineAlpha": "80",
        "lineDashed": "1",
        "lineDashLen": "5",
        "lineDashGap": "3"
    },
    "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"
        }
    ]
}

Hiding Secondary Axis Values

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

FusionCharts will load here..

Given below is a brief description of the attributes used to hide the secondary y-axis values:

Attribute Name	Description
`showSecondaryLimits`	It is used to specify whether the upper and lower limits for the secondary y-axis will be shown. Setting this attribute to `0` will hide the limits, setting it to `1` (default) will show them.
`showDivLineSecondaryValue`	It is used to specify whether the divisional line values for the secondary y-axis will be shown. Setting this attribute to `0` will hide the values, setting it to `1` (default) will show them.

The data structure needed to hide the secondary y-axis values is given below:

JSON
XML

{ "chart": { "theme": "fint", "caption": "Employee late arrivals by reported cause", "subCaption": "Last month", "xAxisName": "Reported Cause", "pYAxisName": "No. of Occurrence", "sYAxisname": "Cumulative Percentage", "showValues": "0", "showXAxisLine": "1", "showSecondaryLimits": "0", "showDivLineSecondaryValue": "0" }, "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": {
        "theme": "fint",
        "caption": "Employee late arrivals by reported cause",
        "subCaption": "Last month",
        "xAxisName": "Reported Cause",
        "pYAxisName": "No. of Occurrence",
        "sYAxisname": "Cumulative Percentage",
        "showValues": "0",
        "showXAxisLine": "1",
        "showSecondaryLimits": "0",
        "showDivLineSecondaryValue": "0"
    },
    "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"
        }
    ]
}

Showing/Hiding the Line Chart

Given below is a brief description of the attribute used to show/hide the line chart:

Attribute Name	Description
`showCumulativeLine`	It is used to specify whether the line chart will be rendered in the Pareto chart. Setting this attribute to `0` will hide the line chart, setting it to `1` (default) will show it.

There! You have now seen how you can configure the Pareto chart.