📊 How to Create Pareto Charts in JavaScript 📈
Tags: webdev, javascript, tutorial, datascience
Published: 2023-07-12 12:45:57

Welcome to this step-by-step tutorial that will empower you to create an interactive Pareto chart using JavaScript that will look nice on any device and in any browser! A Pareto chart is a captivating graphical combo representation that showcases individual values through descending bars, while a line graph illustrates the cumulative total. It is a powerful tool highlighting the relative importance of different categories within a dataset. Named after the visionary economist [Vilfredo Pareto](https://en.wikipedia.org/wiki/Vilfredo_Pareto), the Pareto chart embodies the [Pareto principle](https://en.wikipedia.org/wiki/Pareto_principle), also known as the 80/20 rule. This principle reveals that approximately 80% of effects stem from a mere 20% of causes. With their ability to pinpoint the most significant elements driving a specific scenario, Pareto charts have become indispensable in certain areas of data analysis. Every chart needs data, and for this tutorial, I have chosen a dataset to serve as an example for illustration. Together, we will embark on a journey to visualize the major [customer complaints for consumer loans](https://www.consumerfinance.gov/data-research/consumer-complaints/search/?chartType=line&dateInterval=Month&dateRange=All&date_received_max=2023-07-04&date_received_min=2011-12-01&lens=Product&product=Consumer%20Loan&searchField=all&subLens=issue&tab=Trends) in a Pareto chart, demonstrating how easily you can achieve it at every step. So get ready, and let's dive into the world of Pareto charts and create our own interactive masterpiece! 

## Pareto Chart to Be Created

Take a moment to behold the final Pareto chart that awaits us.

![Pareto chart preview](https://www.anychart.com/blog/wp-content/uploads/2023/07/cfpb.gif)

Now, let's dive into the tutorial and follow the steps to learn how to create your own interactive JS Pareto chart without any complaints.

## Creating a Pareto Chart

Developing a fully functional Pareto chart is an uncomplicated task that can be completed in four steps. While having an understanding of HTML and JavaScript can be beneficial, it is optional when utilizing a decent JavaScript charting library. The basic steps are as follows:

* Create an HTML container.
* Incorporate the required scripts.
* Input the data you want to visualize.
* Configure the visualization using JavaScript.

### 1\. Create an HTML container

To house a chart, you'll need a container. Start by crafting an HTML page that features a block-level element with a unique identifier for easy referencing. To ensure the chart fills the entire page, set the width and height parameters to 100%, or style it based on your preferences.

```html
<html>
  <head>
    <title>Pareto Chart JavaScript</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>
```

### 2\. Incorporate the required scripts

In this tutorial, we will be using the [AnyChart](https://www.anychart.com/) JS library as an example. However, the fundamental concepts and steps we discuss can also be applied to [other charting libraries](https://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_libraries). AnyChart is a popular choice due to its extensive examples and comprehensive documentation, making it suitable for beginners and experienced professionals. We will include two essential scripts for the Pareto chart: the core library file, which is a prerequisite for all charts, and the Pareto module. Remember to add these scripts within the `<script>` tags in the `<head>` section of your HTML page. The JS charting code is to be placed within the `<script>` tags in the `<body>` section.

```html
<html>
  <head>
    <title>Pareto Chart JavaScript</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-pareto.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS Pareto Chart will come here
    </script>
  </body>
</html>
```

### 3\. Input the data you want to visualize

Since the Pareto chart typically involves a small amount of data, it can be directly integrated:

```javascript
let data = [
  { x: "Managing the loan or lease", value: 15265 },
  { x: "Problems when you are unable to pay", value: 7678 },
  { x: "Taking out the loan or lease", value: 4370 },
  { x: "Shopping for a loan or lease", value: 2029 },
  { x: "Managing the line of credit", value: 806 },
  { x: "Other issues", value: 1427 }
];
```

### 4\. Configure the visualization using JavaScript

With everything now in place, let me demonstrate how just a few lines of code can quickly generate an interactive Pareto diagram using JavaScript. To ensure that the enclosed code only runs after the page is fully loaded, encapsulate it within a function like this:

```html
<script>
  anychart.onDocumentLoad(function () {
    // the following code here
  });
</script>
```

Within the function, first add the data:

```javascript
anychart.onDocumentLoad(function () {
  let data = [
    { x: "Managing the loan or lease", value: 15265 },
    { x: "Problems when you are unable to pay", value: 7678 },
    { x: "Taking out the loan or lease", value: 4370 },
    { x: "Shopping for a loan or lease", value: 2029 },
    { x: "Managing the line of credit", value: 806 },
    { x: "Other issues", value: 1427 }
  ];
});
```

Second, create a Pareto chart instance with the provided data:

```javascript
let chart = anychart.pareto(data);
```

Third, create two Pareto series, bar (column) and line:

```javascript
let column = chart.getSeriesAt(0);
let line = chart.getSeriesAt(1);
```

Fourth, to enhance comprehensibility, add some important captions. For example, name both Y-axes. One (for the Pareto column series) will represent the issue frequency, while the other (for the Pareto line series) will display the cumulative percentage.

```javascript
chart.yAxis(0).title("Issue frequency");
chart.yAxis(1).title("Cumulative percentage");
```

Also, it’s always good to properly name the entire chart:

```javascript
chart.title("Consumer Loan Customer Complaints (CFPB)");
```

Finally, set the container by referring to the HTML container created in step 1 and initiate the Pareto charting:

```javascript
chart.container("container");
chart.draw();
```

And voila! In no time, a visually appealing JavaScript-based Pareto chart displaying consumer grievances is ready! Glance at it and its resulting code below; you can see the interactive version and play with the code [here](https://playground.anychart.com/OYN9VyKJ). And keep reading this tutorial for some options to improve this visualization!


![Pareto Chart Created with JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lm72azczkxe3p10hb1cp.png)
```html
<html>
  <head>
    <title>Pareto Chart JavaScript</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-pareto.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // add data
        let data = [
          { x: "Managing the loan or lease", value: 15265 },
          { x: "Problems when you are unable to pay", value: 7678 },
          { x: "Taking out the loan or lease", value: 4370 },
          { x: "Shopping for a loan or lease", value: 2029 },
          { x: "Managing the line of credit", value: 806 },
          { x: "Other issues", value: 1427 }
        ];
        // create a pareto chart with the data
        let chart = anychart.pareto(data);
        // set a pareto column series
        let column = chart.getSeriesAt(0);
        // set a pareto line series
        let line = chart.getSeriesAt(1);
        // name the measure axis
        chart.yAxis(0).title("Issue frequency");
        // name the cumulative percentage axis
        chart.yAxis(1).title("Cumulative percentage");
        // add a chart title
        chart.title("Consumer Loan Customer Complaints (CFPB)");
        // set the container element id for the chart
        chart.container("container");
        // initiate the pareto chart drawing
        chart.draw();
      });
    </script>
  </body>
</html>
```

## Customizing a Pareto Chart

Creating a basic Pareto visualization was quite effortless. However, you'll be pleasantly surprised to discover how you can also easily modify the chart and enhance its aesthetics. Let me show you some ways to customize the Pareto chart and take it to the next level.

1. Modifying the colors
2. Adding labels to the columns
3. Improving the tooltip
4. Setting the interval for the right Y-axis
5. Adding the reference lines
6. Adding a crosshair
7. Arranging the X-axis labels
8. Enhancing the title

**FOR A WALKTHROUGH OF THESE JS PARETO CHART CUSTOMIZATIONS, CONTINUE READING THE [TUTORIAL HERE](https://www.anychart.com/blog/2023/07/11/visualize-pareto-charts-js/).**