Pareto chart – What is it and what does it suggest?

Posted by Highsoft | 0 comments

Post categories:

A Pareto chart is a powerful tool in the world of data visualization, particularly useful for identifying the most significant factors in a dataset. Named after the Italian economist Vilfredo Pareto, the chart is built upon the principle that roughly 80% of effects come from 20% of causes – a concept now widely known as the Pareto Principle or the 80/20 rule. This blog post will delve into what a Pareto chart is, how it works, and what it suggests when analyzing data.

A Pareto chart is a type of bar chart that combines both bars and a line graph. The bars represent individual values in descending order, and the line represents the cumulative total. The primary purpose of a Pareto chart is to highlight the most important among a set of factors. By doing so, it helps to focus efforts on the issues that will have the most significant impact when resolved.

This blog post will guide you through the creation of a Pareto chart using Highcharts, one of the most versatile and powerful charting libraries available.

Whether you’re a developer working with JavaScript, .NET, React or other common frameworks, we’re confident you’ll find the inspiration you need.

Highcharts also integrates seamlessly with popular languages such as Python, R, PHP and Java, as well as mobile platforms like iOS and Android. Additional support for frameworks like Svelte, Angular, and Vue, makes it a versatile tool for various development environments.

To see more examples and get an even better understanding of the opportunities Highcharts offers, please head over to the demo section of our website or read up on the technical documentation on how to get started. Once you get the hang of it, the API reference will help you customize your charts in no time.

 

Components of a Pareto chart

  • Bars: The bars are arranged in descending order, with the tallest bar on the left. Each bar represents a category of data, such as the frequency of defects, the cost of various issues, or the time consumed by different activities.
  • Line graph: The line graph plots the cumulative percentage of the total number of occurrences, moving from left to right. As you move along the line graph, you can see how much each category contributes to the cumulative total.
  • Left vertical axis: This axis represents the frequency or magnitude of occurrences, such as the number of defects or the total cost.
  • Right vertical axis: This axis typically represents the cumulative percentage, showing how the categories contribute to the overall total.

 

Imagine you are analyzing the reasons for restaurant complaints. You list down all the causes, such as overpriced, small portions, wait time, and so on. You then tally how many times each cause has contributed to complaints. When you plot this data on a Pareto chart, the bars show the frequency of each complaint, while the line graph shows the cumulative percentage. Typically, you will find that a few complaints account for the majority of the delays – this is the Pareto Principle in action.

 

 

Go to the demo page for “Restaurant Complaints” to view its code, play around with different theme colors or edit it on JSFiddle or Codepen.

 

What does a Pareto chart suggest?

A Pareto chart suggests where you should focus your efforts to achieve the most significant improvements. By identifying the “vital few” factors that are causing the majority of issues, you can prioritize actions that will yield the highest return on investment. Here’s what a Pareto chart typically suggests:

1. Identify key issues

The chart shows which factors are the most significant. For example, if you’re analyzing customer complaints, a Pareto chart might reveal that the majority of complaints stem from a small number of issues.

2. Prioritize actions

By focusing on the top contributors, you can make more informed decisions about where to allocate resources. This is especially important in business environments where time and resources are limited.

3. Monitor improvements

After implementing changes, you can use a Pareto chart to monitor the effectiveness of your actions. If the most significant issues are resolved, you should see a noticeable improvement in the cumulative percentage.

4. Drive continuous improvement

Pareto charts can also suggest areas for continuous improvement. Once the major issues are addressed, you can move on to the less significant ones, gradually refining your process.

 

 

Here’s how to recreate the Pareto chart using Highcharts

Creating a Pareto chart using Highcharts is straightforward.s. Here’s a simple guide on how to do it:

 

Step 1

Load the required files.

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/pareto.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

Note that this example in addition to the base Highchart script and the Pareto module also includes some additional scripts, namely the  Export modules (docs) and Accessibility module (docs).


Step 2

Create a container for your chart in HTML.

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        A Pareto Chart is a chart type based on the Pareto principle, commonly
        used to maximize business efficiency. Highcharts can calculate the
        Pareto line automatically based on a series, as shown in this chart.
    </p>
</figure>


Step 3

Insert some CSS to control the container, style and elements of your chart.

.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

 

Step 4

Load and initialize the chart. Notice how there is a separate pareto series.

Highcharts.chart('container', {
    chart: {
        renderTo: 'container',
        type: 'column'
    },
    title: {
        text: 'Restaurants Complaints'
    },
    tooltip: {
        shared: true
    },
    xAxis: {
        categories: [
            'Overpriced',
            'Small portions',
            'Wait time',
            'Food is tasteless',
            'No atmosphere',
            'Not clean',
            'Too noisy',
            'Unfriendly staff'
        ],
        crosshair: true
    },
    yAxis: [{
        title: {
            text: ''
        }
    }, {
        title: {
            text: ''
        },
        minPadding: 0,
        maxPadding: 0,
        max: 100,
        min: 0,
        opposite: true,
        labels: {
            format: '{value}%'
        }
    }],
    series: [{
        type: 'pareto',
        name: 'Pareto',
        yAxis: 1,
        zIndex: 10,
        baseSeries: 1,
        tooltip: {
            valueDecimals: 2,
            valueSuffix: '%'
        }
    }, {
        name: 'Complaints',
        type: 'column',
        zIndex: 2,
        data: [755, 222, 151, 86, 72, 51, 36, 10]
    }]
});

 

For detailed samples and documentation check the API documentation.

For more information on customization of your chart and to explore the capabilities of Highcharts, visit the Highcharts demo section and the technical documentation on pareto charts.

Real-world applications of Pareto charts

Pareto charts are essential tools across various industries for enhancing quality control, improving business processes, and aiding in decision-making. In manufacturing, these charts are used to pinpoint the most common causes of defects, allowing companies to address these issues effectively, leading to significant improvements in product quality and reductions in waste. Similarly, in customer service, businesses utilize Pareto charts to analyze and prioritize customer complaints, enabling them to resolve the most frequent issues and thereby boost customer satisfaction and loyalty.

In project management, Pareto charts help project managers identify the primary factors contributing to delays or budget overruns. By focusing on these critical risks, they can take targeted actions to keep projects on track. In the healthcare sector, Pareto charts are valuable for analyzing the causes of medical errors or patient complaints, allowing healthcare providers to implement changes that enhance patient care and safety. These applications demonstrate the versatility of Pareto charts in driving improvements across diverse fields.

 

Conclusion and additional resources

A Pareto chart is more than just a simple bar chart; it’s a strategic tool that helps you identify the most impactful factors in any dataset. By focusing on the “vital few” rather than the “trivial many,” you can make more informed decisions, prioritize your efforts, and drive significant improvements. Whether you’re in manufacturing, customer service, project management, or healthcare, the insights provided by a Pareto chart can help you achieve better outcomes and optimize your processes.

Highcharts makes creating and customizing Pareto charts easy, allowing you to visualize your data in a way that is both informative and actionable. By incorporating Pareto charts into your data analysis toolkit, you can ensure that your efforts are directed where they matter most, leading to more efficient and effective decision-making.

 

 

 

Related posts