{"id":16735,"date":"2023-07-11T06:26:17","date_gmt":"2023-07-11T06:26:17","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=16735"},"modified":"2023-07-11T06:37:00","modified_gmt":"2023-07-11T06:37:00","slug":"visualize-pareto-charts-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/","title":{"rendered":"How to Visualize Data with Pareto Charts Using JavaScript"},"content":{"rendered":"<p><a href=\"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/\"><img decoding=\"async\" class=\"alignnone size-full wp-image-16742\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social.png\" alt=\"Pareto Chart built using JavaScript\" width=\"100%\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social.png 1200w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social-300x158.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social-768x403.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social-1024x538.png 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a>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!<\/p>\n<p>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 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Vilfredo_Pareto\" target=\"_blank\" rel=\"nofollow\">Vilfredo Pareto<\/a>, the Pareto chart embodies the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Pareto_principle\" target=\"_blank\" rel=\"nofollow\">Pareto principle<\/a>, 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.<\/p>\n<p>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 <a href=\"https:\/\/www.consumerfinance.gov\/data-research\/consumer-complaints\/search\/?chartType=line&amp;dateInterval=Month&amp;dateRange=All&amp;date_received_max=2023-07-04&amp;date_received_min=2011-12-01&amp;lens=Product&amp;product=Consumer%20Loan&amp;searchField=all&amp;subLens=issue&amp;tab=Trends\" target=\"_blank\" rel=\"nofollow\">customer complaints for consumer loans<\/a> in a Pareto chart, demonstrating how easily you can achieve it at every step. So get ready, and let&#8217;s dive into the world of Pareto charts and create our own interactive masterpiece!<\/p>\n<p><!--more Read the JS charting tutorial \u00bb--><\/p>\n<h2>Pareto Chart to Be Created<\/h2>\n<p>Take a moment to behold the final Pareto chart that awaits us.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-16744\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/cfpb.gif\" alt=\"JS Pareto chart preview\" width=\"100%\" \/><\/p>\n<p>Now, let&#8217;s dive into the tutorial and follow the steps to learn how to create your own interactive JS Pareto chart without any complaints.<\/p>\n<h2>Creating a Pareto Chart<\/h2>\n<p>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:<\/p>\n<ul>\n<li>Create an HTML container.<\/li>\n<li>Incorporate the required scripts.<\/li>\n<li>Input the data you want to visualize.<\/li>\n<li>Configure the visualization using JavaScript.<\/li>\n<\/ul>\n<h3>1. Create an HTML container<\/h3>\n<p>To house a chart, you&#8217;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.<\/p>\n<pre><code class=\"html\">&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Pareto Chart JavaScript&lt;\/title&gt;\r\n    &lt;style type=\"text\/css\"&gt;      \r\n      html, body, #container { \r\n        width: 100%; height: 100%; margin: 0; padding: 0; \r\n      } \r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h3>2. Incorporate the required scripts<\/h3>\n<p>In this tutorial, we will be using the <a href=\"https:\/\/www.anychart.com\/\">AnyChart<\/a> JS library as an example. However, the fundamental concepts and steps we discuss can also be applied to <a href=\"https:\/\/en.wikipedia.org\/wiki\/Comparison_of_JavaScript_charting_libraries\" target=\"_blank\" rel=\"nofollow\">other charting libraries<\/a>. AnyChart is a popular choice due to its extensive examples and comprehensive documentation, making it suitable for beginners and experienced professionals.<\/p>\n<p>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.<\/p>\n<p>Remember to add these scripts within the <code>&lt;script&gt;<\/code> tags in the <code>&lt;head&gt;<\/code> section of your HTML page. The JS charting code is to be placed within the <code>&lt;script&gt;<\/code> tags in the <code>&lt;body&gt;<\/code> section.<\/p>\n<pre><code class=\"html\">&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Pareto Chart JavaScript&lt;\/title&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-pareto.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;style type=\"text\/css\"&gt;      \r\n      html, body, #container { \r\n        width: 100%; height: 100%; margin: 0; padding: 0; \r\n      } \r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;  \r\n    &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n    &lt;script&gt;\r\n      \/\/ All the code for the JS Pareto Chart will come here\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h3>3. Input the data you want to visualize<\/h3>\n<p>Since the Pareto chart typically involves a small amount of data, it can be directly integrated:<\/p>\n<pre><code class=\"javascript\">let data = [\r\n  { x: \"Managing the loan or lease\", value: 15265 },\r\n  { x: \"Problems when you are unable to pay\", value: 7678 },\r\n  { x: \"Taking out the loan or lease\", value: 4370 },\r\n  { x: \"Shopping for a loan or lease\", value: 2029 },\r\n  { x: \"Managing the line of credit\", value: 806 },\r\n  { x: \"Other issues\", value: 1427 }\r\n];<\/code><\/pre>\n<h3>4. Configure the visualization using JavaScript<\/h3>\n<p>With everything now in place, let me demonstrate how just a few lines of code can quickly generate an interactive Pareto diagram using JavaScript.<\/p>\n<p>To ensure that the enclosed code only runs after the page is fully loaded, encapsulate it within a function like this:<\/p>\n<pre><code class=\"html\">&lt;script&gt;\r\n  anychart.onDocumentLoad(function () {\r\n    \/\/ the following code here\r\n  });\r\n&lt;\/script&gt;<\/code><\/pre>\n<p>Within the function, first add the data:<\/p>\n<pre><code class=\"javascript\">anychart.onDocumentLoad(function () {\r\n  let data = [\r\n    { x: \"Managing the loan or lease\", value: 15265 },\r\n    { x: \"Problems when you are unable to pay\", value: 7678 },\r\n    { x: \"Taking out the loan or lease\", value: 4370 },\r\n    { x: \"Shopping for a loan or lease\", value: 2029 },\r\n    { x: \"Managing the line of credit\", value: 806 },\r\n    { x: \"Other issues\", value: 1427 }\r\n  ];\r\n});<\/code><\/pre>\n<p>Second, create a Pareto chart instance with the provided data:<\/p>\n<pre><code class=\"javascript\">let chart = anychart.pareto(data);<\/code><\/pre>\n<p>Third, create two Pareto series, bar (column) and line:<\/p>\n<pre><code class=\"javascript\">let column = chart.getSeriesAt(0);\r\nlet line = chart.getSeriesAt(1);<\/code><\/pre>\n<p>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.<\/p>\n<pre><code class=\"javascript\">chart.yAxis(0).title(\"Issue frequency\");\r\nchart.yAxis(1).title(\"Cumulative percentage\");<\/code><\/pre>\n<p>Also, it\u2019s always good to properly name the entire chart:<\/p>\n<pre><code class=\"javascript\">chart.title(\"Consumer Loan Customer Complaints (CFPB)\");<\/code><\/pre>\n<p>Finally, set the container by referring to the HTML container created in step 1 and initiate the Pareto charting:<\/p>\n<pre><code class=\"javascript\">chart.container(\"container\");\r\nchart.draw();<\/code><\/pre>\n<p>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 <a href=\"https:\/\/playground.anychart.com\/OYN9VyKJ\" target=\"_blank\" rel=\"nofollow\">here<\/a>. And keep reading this tutorial for some options to improve this visualization!<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-OYN9VyKJ\" src=\"https:\/\/playground.anychart.com\/OYN9VyKJ\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-OYN9VyKJ{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<pre><code class=\"html\">&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Pareto Chart JavaScript&lt;\/title&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-pareto.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;style type=\"text\/css\"&gt;      \r\n      html, body, #container { \r\n        width: 100%; height: 100%; margin: 0; padding: 0; \r\n      } \r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;  \r\n    &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n    &lt;script&gt;\r\n      anychart.onDocumentReady(function () {\r\n        \/\/ add data\r\n        let data = [\r\n          { x: \"Managing the loan or lease\", value: 15265 },\r\n          { x: \"Problems when you are unable to pay\", value: 7678 },\r\n          { x: \"Taking out the loan or lease\", value: 4370 },\r\n          { x: \"Shopping for a loan or lease\", value: 2029 },\r\n          { x: \"Managing the line of credit\", value: 806 },\r\n          { x: \"Other issues\", value: 1427 }\r\n        ];\r\n        \/\/ create a pareto chart with the data\r\n        let chart = anychart.pareto(data);\r\n        \/\/ set a pareto column series\r\n        let column = chart.getSeriesAt(0);\r\n        \/\/ set a pareto line series\r\n        let line = chart.getSeriesAt(1);\r\n        \/\/ name the measure axis\r\n        chart.yAxis(0).title(\"Issue frequency\");\r\n        \/\/ name the cumulative percentage axis\r\n        chart.yAxis(1).title(\"Cumulative percentage\");\r\n        \/\/ add a chart title\r\n        chart.title(\"Consumer Loan Customer Complaints (CFPB)\");\r\n        \/\/ set the container element id for the chart\r\n        chart.container(\"container\");\r\n        \/\/ initiate the pareto chart drawing\r\n        chart.draw();\r\n      });\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h2>Customizing a Pareto Chart<\/h2>\n<p>Creating a basic Pareto visualization was quite effortless. However, you&#8217;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.<\/p>\n<h3>1. Modifying the colors<\/h3>\n<p>An excellent way to highlight specific points is by assigning different colors to them. To accomplish this, you can modify the colors of the columns based on their values. The example below distinguishes between issues with more than 10% and less than 10% occurrence in customer complaints. This customization will enhance the visual impact of the Pareto chart.<\/p>\n<pre><code class=\"javascript\">column.fill(function () {\r\n  if (this.rf &lt; 10) {\r\n    return \"#b5cfa8\";\r\n  }\r\n    return \"#57c478\";\r\n});\r\ncolumn.stroke(function () {\r\n  if (this.rf &lt; 10) {\r\n    return \"#b5cfa8 \";\r\n  }\r\n    return \"#57c478\";\r\n});<\/code><\/pre>\n<p>Additionally, to emphasize the cumulative frequency, let\u2019s add a red hue to shade the line. This subtle yet effective customization will make the line stand out and draw attention to the cumulative aspect of the Pareto chart.<\/p>\n<pre><code class=\"javascript\">line.stroke(\"#c04d3b\");<\/code><\/pre>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-tU5CH9iD\" src=\"https:\/\/playground.anychart.com\/yoCWKcCp\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-tU5CH9iD{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>2. Adding labels to the columns<\/h3>\n<p>Furthermore, you can enhance the readability of the Pareto chart by adding labels to the top of each column, allowing the percentage values for quick visibility. This can be achieved by enabling the labels and formatting them to display the corresponding values.<\/p>\n<pre><code class=\"javascript\">column.labels().enabled(true).format(\"{%RF}%\");<\/code><\/pre>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-tU5CH9iD\" src=\"https:\/\/playground.anychart.com\/tU5CH9iD\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-tU5CH9iD{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>3. Improving the tooltip<\/h3>\n<p>In the tooltip, you can provide more details and clarity. For instance, let\u2019s make sure the value, cumulative frequency, and relative frequency are properly displayed once a point is hovered over. This improvement will make the tooltips more informative and useful for the viewers of the Pareto chart.<\/p>\n<pre><code class=\"javascript\">column.tooltip().format(\"Value: {%Value}\");\r\nline.tooltip().format(\"Cumulative frequency: {%CF}% \\n Relative frequency: {%RF}%\");<\/code><\/pre>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-tU5CH9iD\" src=\"https:\/\/playground.anychart.com\/34ovN8hU\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-tU5CH9iD{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>4. Setting the interval for the right Y-axis<\/h3>\n<p>Depending on your data, you may like to adjust the interval between axis ticks to enhance the precision and clarity in the visualization. Let\u2019s modify the interval for the right Y-axis that displays the cumulative frequency.<\/p>\n<pre><code class=\"javascript\">chart.yAxis(1).scale().ticks().interval(10);<\/code><\/pre>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-tU5CH9iD\" src=\"https:\/\/playground.anychart.com\/Fy6lfSTD\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-tU5CH9iD{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>5. Adding the reference lines<\/h3>\n<p>You can add line markers to provide additional reference points and aid in data interpretation. Let\u2019s create two dashed horizontal lines at 20% and 80% cumulative frequency values. We\u2019ll offer visual cues that highlight key thresholds by incorporating these reference lines.<\/p>\n<pre><code class=\"javascript\">\/\/ create the first horizontal line marker\r\nchart\r\n  .lineMarker(0)\r\n  .axis(chart.yAxis(1))\r\n  .value(20)\r\n  .stroke(\"#A5B3B3\", 1, \"10 2\", \"round\");\r\n\r\n\/\/ create the second horizontal line marker\r\nchart\r\n  .lineMarker(1)\r\n  .axis(chart.yAxis(1))\r\n  .value(80)\r\n  .stroke(\"#A5B3B3\", 1, \"10 2\", \"round\"); <\/code><\/pre>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-ypwYZOvq\" src=\"https:\/\/playground.anychart.com\/fVYyfz7f\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-ypwYZOvq{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>6. Adding a crosshair<\/h3>\n<p>A regular Pareto chart has two series and two Y-axes. Enabling the crosshairs can facilitate identifying and correlating values across both charts. For example, let\u2019s add a horizontal one like this:<\/p>\n<pre><code class=\"javascript\">chart.crosshair().enabled(true).xLabel(false);<\/code><\/pre>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-ypwYZOvq\" src=\"https:\/\/playground.anychart.com\/zmdplHjz\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-ypwYZOvq{width:600px;height:100%;}\");\n})();<\/script><\/p>\n<h3>7. Arranging the X-axis labels<\/h3>\n<p>To improve the readability of the X-axis labels when they are long, you can change the way they are displayed to avoid overlapping. For instance, let\u2019s arrange them in a staggered manner, in two lines.<\/p>\n<pre><code class=\"javascript\">chart.xAxis().staggerMode(true);\r\nchart.xAxis().staggerLines(2);<\/code><\/pre>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-ypwYZOvq\" src=\"https:\/\/playground.anychart.com\/fxjA31WJ\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-ypwYZOvq{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>8. Enhancing the title<\/h3>\n<p>Customizing the chart title is another aspect you may want to adjust according to your preferences. Here&#8217;s what you can do to enhance our Pareto graphic. Firstly, increasing the font size will make it more prominent and eye-catching. Secondly, adding a subtitle can provide additional context and information. Lastly, giving the title a color that matches the columns will create a visually cohesive look, tying all the elements of the Pareto graph together. These enhancements will contribute to a more visually appealing and engaging chart.<\/p>\n<pre><code class=\"javascript\">chart\r\n  .title()\r\n  .enabled(true)\r\n  .useHtml(true)\r\n  .text(\r\n    '&lt;span style = \"color: #111; font-size:20px; margin-bottom:10px; dy:20px\"&gt;Consumer Loan Customer Complaints (CFPB)&lt;\/span&gt;' +\r\n    '&lt;br\/&gt;&lt;span style=\"color:#57c478; font-size: 15px;\"&gt;The top 2 issues make up almost 80% of all the issues identified in consumer complaints&lt;\/span&gt;'\r\n  );<\/code><\/pre>\n<p>And here\u2019s this tutorial&#8217;s final JS Pareto chart; check it out!<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-ypwYZOvq\" src=\"https:\/\/playground.anychart.com\/ypwYZOvq\/iframe\" width=\"300\" height=\"150\" frameborder=\"0\" sandbox=\"allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><br \/>\n<script type=\"text\/javascript\">(function(){\nfunction ac_add_to_head(el){\n\tvar head = document.getElementsByTagName('head')[0];\n\thead.insertBefore(el,head.firstChild);\n}\nfunction ac_add_style(css){\n\tvar ac_style = document.createElement('style');\n\tif (ac_style.styleSheet) ac_style.styleSheet.cssText = css;\n\telse ac_style.appendChild(document.createTextNode(css));\n\tac_add_to_head(ac_style);\n}\nac_add_style(\".anychart-embed-ypwYZOvq{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<p>Indeed, the graphic now exhibits an elegant and refined appearance with the applied customizations. The combination of color-coded columns, a shaded line, labeled values, improved tooltips, an adjusted Y-axis interval, reference lines, crosshair markers, and an enhanced title contribute to a visually appealing and informative chart.<\/p>\n<p>For the complete code of the finished Pareto chart, you can see it below, and feel free to explore the interactive version of this visualization and further experiment with the code <a href=\"https:\/\/playground.anychart.com\/ypwYZOvq\" target=\"_blank\" rel=\"nofollow\">here<\/a>.<\/p>\n<pre><code class=\"html\">&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Pareto Chart JavaScript&lt;\/title&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-pareto.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;style type=\"text\/css\"&gt;      \r\n      html, body, #container { \r\n        width: 100%; height: 100%; margin: 0; padding: 0; \r\n      } \r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;  \r\n    &lt;div id=\"container\"&gt;&lt;\/div&gt;\r\n    &lt;script&gt;\r\n      anychart.onDocumentReady(function () {\r\n        \/\/ add data\r\n        let data = [\r\n          { x: \"Managing the loan or lease\", value: 15265 },\r\n          { x: \"Problems when you are unable to pay\", value: 7678 },\r\n          { x: \"Taking out the loan or lease\", value: 4370 },\r\n          { x: \"Shopping for a loan or lease\", value: 2029 },\r\n          { x: \"Managing the line of credit\", value: 806 },\r\n          { x: \"Other issues\", value: 1427 }\r\n        ];\r\n        \/\/ create a pareto chart with the data\r\n        let chart = anychart.pareto(data);\r\n        \/\/ set a pareto column series\r\n        let column = chart.getSeriesAt(0);\r\n        \/\/ customize the column colors\r\n        \/\/ fill\r\n        column.fill(function () {\r\n          if (this.rf &lt; 10) {\r\n            return \"#b5cfa8\";\r\n          }\r\n          return \"#57c478\";\r\n        });\r\n        \/\/ stroke\r\n        column.stroke(function () {\r\n          if (this.rf &lt; 10) {\r\n            return \"#b5cfa8 \";\r\n          }\r\n          return \"#57c478\";\r\n        });\r\n        \/\/ set a pareto line series\r\n        let line = chart.getSeriesAt(1);\r\n        \/\/ customize the line stroke\r\n        line.stroke(\"#c04d3b\");\r\n        \/\/ name the measure axis\r\n        chart.yAxis(0).title(\"Issue frequency\");\r\n        \/\/ name the cumulative percentage axis\r\n        chart.yAxis(1).title(\"Cumulative percentage\");\r\n        \/\/ customize the column label format\r\n        column.labels().enabled(true).format(\"{%RF}%\");\r\n        \/\/ customize the tooltip format\r\n        \/\/ column series\r\n        column.tooltip().format(\"Value: {%Value}\");\r\n        \/\/ line series\r\n        line.tooltip().format(\"Cumulative frequency: {%CF}% \\n Relative frequency: {%RF}%\");\r\n        \/\/ set the tick interval\r\n        chart.yAxis(1).scale().ticks().interval(10);\r\n        \/\/ create the first horizontal line marker\r\n        chart\r\n          .lineMarker(0)\r\n          .axis(chart.yAxis(1))\r\n          .value(20)\r\n          .stroke(\"#A5B3B3\", 1, \"10 2\", \"round\");\r\n        \/\/ create the second horizontal line marker\r\n        chart\r\n          .lineMarker(1)\r\n          .axis(chart.yAxis(1))\r\n          .value(80)\r\n          .stroke(\"#A5B3B3\", 1, \"10 2\", \"round\"); \r\n        \/\/ add a crosshair\r\n        chart.crosshair().enabled(true).xLabel(false);\r\n        \/\/ enable the stagger mode for the x-axis labels\r\n        chart.xAxis().staggerMode(true);\r\n        \/\/ configure the stagger mode\r\n        chart.xAxis().staggerLines(2);\r\n        \/\/ add a chart title\r\n        chart\r\n          .title()\r\n          .enabled(true)\r\n          .useHtml(true)\r\n          .text(\r\n            '&lt;span style = \"color: #111; font-size:20px; margin-bottom:10px; dy:20px\"&gt;Consumer Loan Customer Complaints (CFPB)&lt;\/span&gt;' +\r\n              '&lt;br\/&gt;&lt;span style=\"color:#57c478; font-size: 15px;\"&gt;The top 2 issues make up almost 80% of all the issues identified in consumer complaints&lt;\/span&gt;'\r\n          );\r\n        \/\/ set the container element id for the chart\r\n        chart.container(\"container\");\r\n        \/\/ initiate the pareto chart drawing\r\n        chart.draw();\r\n      });\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h2>Conclusion<\/h2>\n<p>The tutorial shows how to use JavaScript to create and customize an excellent interactive Pareto chart without much hassle. While the exact functions may vary depending on the library, the core methodology remains consistent.<\/p>\n<p>Enjoy creating insightful Pareto charts! If you have any questions or need further assistance, feel free to ask.<\/p>\n<hr \/>\n<p><strong><em>Published with the permission of Shachee Swadia. Originally appeared on <a href=\"https:\/\/hackernoon.com\/creating-a-pareto-chart-with-javascript\" target=\"_blank\" rel=\"nofollow\">Hacker Noon<\/a> with the title &#8220;Creating a Pareto Chart With JavaScript&#8221; on July 8, 2023.<\/p>\n<p>You may also like to check out the <a href=\"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/\">JavaScript Pareto Chart Tutorial<\/a> originally published on our blog earlier.<\/p>\n<p>See more <a href=\"https:\/\/www.anychart.com\/blog\/category\/javascript-chart-tutorials\/\">JavaScript charting tutorials<\/a> and keep on mastering interactive data visualization.<\/p>\n<p>Got an idea for a cool guest post? <a href=\"https:\/\/www.anychart.com\/support\/\">Let us know<\/a>.<\/strong><\/em><\/p>\n<hr \/>\n<p><!-- SyntaxHighlighter --><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\"><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/atom-one-light.min.css\"><script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script><script>hljs.initHighlightingOnLoad();<\/script><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,263,8,23,13,279,4],"tags":[619,618,53,3173,70,71,260,265,1556,254,1758,3149,284,166,258,2385,290,85,3326,3507,3582,3581,1924,282,471,266,620,1292,880,806,1759,294,2220,2838,54,1389,1760,2757,256,3377,1111,350,844,165,313,1370,133,774,775,3369,1498,805,1762,1025,2013,2014,32,55,1335,144,2979,3523,2016,167,146,433,152,2949,151,36,907,141,249,3111,81,57,1238,142,96,99,58,65,56,101,3526,2684,3584,196,106,3583,2243,3260,2986,834,459,1226,609,3099,172,3585,807,808,954,3100,293,899,2816,1763,804,3407],"class_list":["post-16735","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-big-data","category-business-intelligence","category-html5","category-javascript","category-javascript-chart-tutorials","category-tips-and-tricks","tag-analysis","tag-analytics","tag-anychart","tag-app-development","tag-bar-chart","tag-bar-charts","tag-best-data-visualization-examples","tag-big-data","tag-business-analytics","tag-chart","tag-chart-design","tag-chart-development","tag-chart-examples","tag-charting","tag-charts","tag-coding","tag-column-chart","tag-column-charts","tag-combinations","tag-combo-chart","tag-consumer-loans","tag-customer-complaints","tag-customers","tag-data","tag-data-analysis","tag-data-analytics","tag-data-analytics-examples","tag-data-chart","tag-data-charting","tag-data-charts","tag-data-design","tag-data-science","tag-data-visual","tag-data-visualisation","tag-data-visualization","tag-data-visualization-best-pracices","tag-data-visualization-design","tag-data-visualization-development","tag-data-visualization-examples","tag-data-visualization-guide","tag-data-visualization-practice","tag-data-visualization-projects","tag-data-visualization-tutorial","tag-data-visualizations","tag-data-visuals","tag-data-viz-examples","tag-dataviz","tag-dataviz-examples","tag-dataviz-projects","tag-developers","tag-example","tag-front-end-development","tag-guest-post","tag-hacker-noon","tag-html","tag-html-charts","tag-html5","tag-html5-charts","tag-infographic","tag-infographics","tag-information-graphics","tag-information-technologies","tag-information-visualization","tag-interactive-charts","tag-interactive-data-visualization","tag-interactive-graphics","tag-interactive-infographic","tag-interactive-infographics","tag-interactive-visualizations","tag-javascript","tag-javascript-chart-tutorial","tag-javascript-charting","tag-javascript-charting-api","tag-javascript-charting-features","tag-javascript-charting-library","tag-javascript-charts","tag-javascript-graph","tag-javascript-graphics","tag-javascript-graphics-library","tag-javascript-library","tag-js-chart","tag-js-charting","tag-js-charts","tag-js-graphics","tag-js-library","tag-js-line-chart","tag-lease","tag-line-chart","tag-line-charts","tag-loan","tag-pareto-chart","tag-statistic","tag-statistic-visualization","tag-statistical-analysis","tag-statistics","tag-statistics-visualization","tag-storytelling","tag-storytelling-examples","tag-tutorial","tag-vilfredo-pareto","tag-visual-analysis","tag-visual-analytics","tag-visual-data-analytics","tag-visual-storytelling-examples","tag-visualization","tag-visualizations","tag-web-design","tag-web-developers","tag-web-development","tag-website-development","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create Pareto Charts Using JavaScript - Tutorial<\/title>\n<meta name=\"description\" content=\"Learn how to easily create an interactive Pareto chart with JavaScript. We&#039;ll demonstrate the steps using customer complaints data. Check out the tutorial!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Pareto Charts Using JavaScript - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Learn how to easily create an interactive Pareto chart with JavaScript. We&#039;ll demonstrate the steps using customer complaints data. Check out the tutorial!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/\" \/>\n<meta property=\"og:site_name\" content=\"AnyChart News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AnyCharts\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-11T06:26:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-11T06:37:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social.png\" \/>\n<meta name=\"author\" content=\"Shachee Swadia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Create Pareto Charts Using JavaScript - Tutorial\" \/>\n<meta name=\"twitter:description\" content=\"Learn how to easily create an interactive Pareto chart with JavaScript. We&#039;ll demonstrate the steps using customer complaints data. Check out the tutorial!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social.png\" \/>\n<meta name=\"twitter:creator\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:site\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shachee Swadia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/\"},\"author\":{\"name\":\"Shachee Swadia\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/273255f98371177b5ac1f4775610bb51\"},\"headline\":\"How to Visualize Data with Pareto Charts Using JavaScript\",\"datePublished\":\"2023-07-11T06:26:17+00:00\",\"dateModified\":\"2023-07-11T06:37:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/\"},\"wordCount\":1393,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social.png\",\"keywords\":[\"analysis\",\"analytics\",\"AnyChart\",\"app development\",\"bar chart\",\"bar charts\",\"best data visualization examples\",\"big data\",\"business analytics\",\"chart\",\"chart design\",\"chart development\",\"chart examples\",\"charting\",\"charts\",\"coding\",\"column chart\",\"column charts\",\"combinations\",\"combo chart\",\"consumer loans\",\"customer complaints\",\"customers\",\"data\",\"data analysis\",\"data analytics\",\"data analytics examples\",\"data chart\",\"data charting\",\"data charts\",\"data design\",\"data science\",\"data visual\",\"data visualisation\",\"Data Visualization\",\"data visualization best practices\",\"data visualization design\",\"data visualization development\",\"data visualization examples\",\"data visualization guide\",\"data visualization practice\",\"data visualization projects\",\"data visualization tutorial\",\"data visualizations\",\"data visuals\",\"data viz examples\",\"dataviz\",\"dataviz examples\",\"dataviz projects\",\"developers\",\"example\",\"front-end development\",\"guest post\",\"Hacker Noon\",\"HTML\",\"HTML charts\",\"HTML5\",\"html5 charts\",\"infographic\",\"infographics\",\"information graphics\",\"information technologies\",\"information visualization\",\"interactive charts\",\"interactive data visualization\",\"interactive graphics\",\"interactive infographic\",\"interactive infographics\",\"interactive visualizations\",\"JavaScript\",\"javascript chart tutorial\",\"javascript charting\",\"javascript charting api\",\"JavaScript charting features\",\"JavaScript charting library\",\"javascript charts\",\"javascript graph\",\"javascript graphics\",\"JavaScript graphics library\",\"JavaScript library\",\"js chart\",\"js charting\",\"js charts\",\"JS graphics\",\"js library\",\"js line chart\",\"lease\",\"line chart\",\"line charts\",\"loan\",\"pareto chart\",\"statistic\",\"statistic visualization\",\"statistical analysis\",\"statistics\",\"statistics visualization\",\"storytelling\",\"storytelling examples\",\"tutorial\",\"Vilfredo Pareto\",\"visual analysis\",\"visual analytics\",\"visual data analytics\",\"visual storytelling examples\",\"visualization\",\"visualizations\",\"web design\",\"web developers\",\"web development\",\"website development\"],\"articleSection\":[\"AnyChart Charting Component\",\"Big Data\",\"Business Intelligence\",\"HTML5\",\"JavaScript\",\"JavaScript Chart Tutorials\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/\",\"name\":\"How to Create Pareto Charts Using JavaScript - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social.png\",\"datePublished\":\"2023-07-11T06:26:17+00:00\",\"dateModified\":\"2023-07-11T06:37:00+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/273255f98371177b5ac1f4775610bb51\"},\"description\":\"Learn how to easily create an interactive Pareto chart with JavaScript. We'll demonstrate the steps using customer complaints data. Check out the tutorial!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social.png\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Visualize Data with Pareto Charts Using JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\",\"url\":\"https:\/\/www.anychart.com\/blog\/\",\"name\":\"AnyChart News\",\"description\":\"AnyChart JS Charts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anychart.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/273255f98371177b5ac1f4775610bb51\",\"name\":\"Shachee Swadia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/50ebd5c61e4e46e052898a5ddbcef5996666132cf07c614be4725f028ec7eae3?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/50ebd5c61e4e46e052898a5ddbcef5996666132cf07c614be4725f028ec7eae3?s=96&r=g\",\"caption\":\"Shachee Swadia\"},\"url\":\"https:\/\/www.anychart.com\/blog\/author\/shachee-swadia\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Pareto Charts Using JavaScript - Tutorial","description":"Learn how to easily create an interactive Pareto chart with JavaScript. We'll demonstrate the steps using customer complaints data. Check out the tutorial!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Pareto Charts Using JavaScript - Tutorial","og_description":"Learn how to easily create an interactive Pareto chart with JavaScript. We'll demonstrate the steps using customer complaints data. Check out the tutorial!","og_url":"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2023-07-11T06:26:17+00:00","article_modified_time":"2023-07-11T06:37:00+00:00","og_image":[{"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social.png","type":"","width":"","height":""}],"author":"Shachee Swadia","twitter_card":"summary_large_image","twitter_title":"How to Create Pareto Charts Using JavaScript - Tutorial","twitter_description":"Learn how to easily create an interactive Pareto chart with JavaScript. We'll demonstrate the steps using customer complaints data. Check out the tutorial!","twitter_image":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social.png","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"Shachee Swadia","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/"},"author":{"name":"Shachee Swadia","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/273255f98371177b5ac1f4775610bb51"},"headline":"How to Visualize Data with Pareto Charts Using JavaScript","datePublished":"2023-07-11T06:26:17+00:00","dateModified":"2023-07-11T06:37:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/"},"wordCount":1393,"commentCount":0,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social.png","keywords":["analysis","analytics","AnyChart","app development","bar chart","bar charts","best data visualization examples","big data","business analytics","chart","chart design","chart development","chart examples","charting","charts","coding","column chart","column charts","combinations","combo chart","consumer loans","customer complaints","customers","data","data analysis","data analytics","data analytics examples","data chart","data charting","data charts","data design","data science","data visual","data visualisation","Data Visualization","data visualization best practices","data visualization design","data visualization development","data visualization examples","data visualization guide","data visualization practice","data visualization projects","data visualization tutorial","data visualizations","data visuals","data viz examples","dataviz","dataviz examples","dataviz projects","developers","example","front-end development","guest post","Hacker Noon","HTML","HTML charts","HTML5","html5 charts","infographic","infographics","information graphics","information technologies","information visualization","interactive charts","interactive data visualization","interactive graphics","interactive infographic","interactive infographics","interactive visualizations","JavaScript","javascript chart tutorial","javascript charting","javascript charting api","JavaScript charting features","JavaScript charting library","javascript charts","javascript graph","javascript graphics","JavaScript graphics library","JavaScript library","js chart","js charting","js charts","JS graphics","js library","js line chart","lease","line chart","line charts","loan","pareto chart","statistic","statistic visualization","statistical analysis","statistics","statistics visualization","storytelling","storytelling examples","tutorial","Vilfredo Pareto","visual analysis","visual analytics","visual data analytics","visual storytelling examples","visualization","visualizations","web design","web developers","web development","website development"],"articleSection":["AnyChart Charting Component","Big Data","Business Intelligence","HTML5","JavaScript","JavaScript Chart Tutorials","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/","url":"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/","name":"How to Create Pareto Charts Using JavaScript - Tutorial","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social.png","datePublished":"2023-07-11T06:26:17+00:00","dateModified":"2023-07-11T06:37:00+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/273255f98371177b5ac1f4775610bb51"},"description":"Learn how to easily create an interactive Pareto chart with JavaScript. We'll demonstrate the steps using customer complaints data. Check out the tutorial!","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social.png","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2023\/07\/pareto-chart-javascript-social.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2023\/07\/11\/visualize-pareto-charts-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Visualize Data with Pareto Charts Using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.anychart.com\/blog\/#website","url":"https:\/\/www.anychart.com\/blog\/","name":"AnyChart News","description":"AnyChart JS Charts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anychart.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/273255f98371177b5ac1f4775610bb51","name":"Shachee Swadia","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/50ebd5c61e4e46e052898a5ddbcef5996666132cf07c614be4725f028ec7eae3?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/50ebd5c61e4e46e052898a5ddbcef5996666132cf07c614be4725f028ec7eae3?s=96&r=g","caption":"Shachee Swadia"},"url":"https:\/\/www.anychart.com\/blog\/author\/shachee-swadia\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/16735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=16735"}],"version-history":[{"count":23,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/16735\/revisions"}],"predecessor-version":[{"id":16763,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/16735\/revisions\/16763"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=16735"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=16735"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=16735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}