{"id":12089,"date":"2021-02-16T10:46:22","date_gmt":"2021-02-16T10:46:22","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=12089"},"modified":"2022-08-13T11:03:35","modified_gmt":"2022-08-13T11:03:35","slug":"pareto-chart-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/","title":{"rendered":"How to Build Pareto Chart in JavaScript"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignnone size-full wp-image-12163\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-blog.png\" alt=\"Pareto chart created in JavaScript being shown\" width=\"100%\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-blog.png 1200w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-blog-300x180.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-blog-768x461.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-blog-1024x614.png 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/>Creating\u00a0a Pareto\u00a0chart\u00a0with JavaScript\u00a0for\u00a0HTML5\u00a0apps and\u00a0websites\u00a0is not a\u00a0complicated\u00a0or hectic\u00a0development process\u00a0at all. Get hands-on experience with this tutorial\u00a0and you will find\u00a0<a href=\"https:\/\/www.anychart.com\/blog\/2018\/11\/20\/data-visualization-definition-history-examples\/\">data visualization<\/a> in such a form joyful and exciting!<\/p>\n<p>Before we start, let&#8217;s\u00a0remember\u00a0how\u00a0<a href=\"https:\/\/www.anychart.com\/chartopedia\/chart-type\/pareto-chart\/\">Pareto charts<\/a>\u00a0look and what their purpose is, just to\u00a0make sure we are on the same page. A Pareto chart, also a Pareto diagram, is a\u00a0combination of\u00a0vertical bars (<a href=\"https:\/\/www.anychart.com\/chartopedia\/chart-type\/column-chart\/\">columns<\/a>) and a <a href=\"https:\/\/www.anychart.com\/chartopedia\/chart-type\/line-chart\/\">line graph<\/a>. Columns are used to depict values and are displayed in descending order, left to right. The\u00a0line in a Pareto chart shows the cumulative\u00a0total in percentages. Such a visualization\u00a0helps data scientists and analysts\u00a0quickly\u00a0identify the most\u00a0important among a set\u00a0of factors, i.e. those characterized by the largest values and therefore\u00a0making the most significant contribution to the total across all the represented factors.<\/p>\n<p>In this\u00a0JS\u00a0Pareto chart tutorial, we\u2019ll\u00a0be visualizing\u00a0statistics\u00a0for the\u00a0leading causes of death\u00a0in\u00a0the United States in 2019\u00a0and find out what claimed\u00a0the most\u00a0American lives during that year according to official data.<\/p>\n<p>Now let\u2019s move to\u00a0JavaScript charting, and more precisely, building\u00a0an\u00a0interactive\u00a0Pareto chart using JS!<\/p>\n<p><!--more Read the JS charting tutorial \u00bb--><\/p>\n<p>(Below is how the final JavaScript-based Pareto chart will look if you&#8217;re interested.)<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-final.png\" alt=\"Pareto spoiler\" width=\"100%\" class=\"alignnone size-full wp-image-12207\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-final.png 1195w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-final-300x166.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-final-768x424.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-final-1024x566.png 1024w\" sizes=\"(max-width: 1195px) 100vw, 1195px\" \/><\/p>\n<h2>Building Basic JS Pareto Chart<\/h2>\n<p>The common order of visualizing data\u00a0in JavaScript charts\u00a0builds on the following four steps. To create a\u00a0JS Pareto chart, you should\u00a0follow them too:<\/p>\n<ul>\n<li>First, generate an HTML with a container to display the chart.<\/li>\n<li>Second, reference\u00a0all JS scripts you are going to use.<\/li>\n<li>Third, load the data that needs to be charted.<\/li>\n<li>Fourth, write the JavaScript code required to visualize the chart.<\/li>\n<\/ul>\n<p>Let\u2019s go through each of these steps to make an interactive Pareto chart and understand the entire process which is quite simple overall.<\/p>\n<h3>Step 1: Create an HTML page<\/h3>\n<p>The following code sets up\u00a0an HTML page with\u00a0a container to hold our Pareto chart.<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Pareto Chart Example&lt;\/title&gt;\r\n    &lt;style&gt;\r\n      html, body, #container1 {\r\n        width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"container1\"&gt;&lt;\/div&gt;\r\n      \/\/ The Pareto chart code will be put here.\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<p>The HTML page developed above consists of two main sections:\u00a0<code>&lt;head&gt;<\/code> and\u00a0<code>&lt;body&gt;<\/code>.\u00a0The <code>&lt;head&gt;<\/code> section\u00a0includes\u00a0two subsections: <code>&lt;title&gt;<\/code> and <code>&lt;style&gt;<\/code>. The title of the page is set\u00a0here\u00a0as\u00a0\u2018Pareto Chart Example.&#8217; The\u00a0<code>&lt;style&gt;<\/code> element is used to apply a simple style sheet to the HTML document, the <code>&lt;body&gt;<\/code> section, and the <code>&lt;div&gt;<\/code> container\u00a0with the id &#8216;container1&#8217; (that&#8217;s\u00a0where we will place our Pareto chart).<\/p>\n<h3>Step 2: Connect\u00a0scripts<\/h3>\n<p>Then, we\u00a0should link all scripts to be used when building a Pareto chart\u00a0&#8211; in the <code>&lt;head&gt;<\/code> section.<\/p>\n<p>There are many <a href=\"https:\/\/en.wikipedia.org\/wiki\/Comparison_of_JavaScript_charting_libraries\" target=\"_blank\" rel=\"nofollow\">JavaScript charting libraries<\/a> you might <a href=\"https:\/\/www.anychart.com\/blog\/2017\/03\/05\/how-to-choose-the-right-javascript-charting-component-10-factors-you-have-to-consider\/\">choose<\/a> to employ to create an interactive Pareto chart for your web site or app. In this tutorial, I will be using <a href=\"https:\/\/www.anychart.com\">AnyChart<\/a>. It is a very flexible JavaScript library for\u00a0cross-platform data visualization, enriched with\u00a0a huge number of chart <a href=\"https:\/\/www.anychart.com\/products\/anychart\/gallery\/\">demos<\/a> as well as vast and extremely detailed <a href=\"https:\/\/docs.anychart.com\" target=\"_blank\" rel=\"nofollow\">documentation<\/a> and <a href=\"https:\/\/api.anychart.com\" target=\"_blank\" rel=\"nofollow\">API reference<\/a>\u00a0making it easy\u00a0enough to deal with even for beginners to web development and programming.<\/p>\n<p>AnyChart\u00a0features a <a href=\"https:\/\/docs.anychart.com\/Quick_Start\/Modules\" target=\"_blank\" rel=\"nofollow\">modular<\/a> system, which allows you to minimize the\u00a0amount of JavaScript that needs to run on your page as you do not need to load more than you actually need. To develop a Pareto chart, you need\u00a0only two modules: &#8216;core&#8217; with all the\u00a0JS charting library basics and &#8216;pareto&#8217; specifically with the Pareto chart type.<\/p>\n<pre><code class=\"html\">&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-pareto.min.js\"&gt;&lt;\/script&gt;\r\n<\/code><\/pre>\n<p>Now let\u2019s add these modules\u00a0to the <code>&lt;head&gt;<\/code>\u00a0section\u00a0as shown below.<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Pareto Chart Example&lt;\/title&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-pareto.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;style&gt;\r\n      html, body, #container1 {\r\n        width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"container1\"&gt;&lt;\/div&gt;\r\n    &lt;script&gt;\r\n      \/\/ The Pareto chart code will be put here.\r\n    &lt;\/script&gt;    \r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h3>Step 3: Load the\u00a0data\u00a0you\u00a0want to\u00a0visualize<\/h3>\n<p>For this\u00a0JavaScript\u00a0Pareto chart tutorial, I decided to take <a href=\"https:\/\/www.cdc.gov\/nchs\/data\/databriefs\/db395-tables-508.pdf#page=4\" target=\"_blank\" rel=\"nofollow\">CDC&#8217;s statistics<\/a>\u00a0revealing\u00a0the ten\u00a0leading causes of death in\u00a0the United States of America in 2019. It is known that a total of 2,854,838 resident deaths were reported. The ten leading causes of death accounted for 73.4% of all\u00a0the deaths. A Pareto chart will show the\u00a0ten leading causes of death\u00a0and\u00a0the contribution\u00a0of each to their total, in descending order.<\/p>\n<p>So, let\u2019s\u00a0see the dataset first.<\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<th style=\"padding: 15px; text-align: center;\"><strong>Cause of death<\/strong><\/th>\n<th style=\"padding: 15px; text-align: center;\"><strong>Number of deaths<\/strong><\/th>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Heart disease<\/td>\n<td style=\"padding: 6px 15px;\">659,041<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Cancer<\/td>\n<td style=\"padding: 6px 15px;\">599,601<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Accidents<\/td>\n<td style=\"padding: 6px 15px;\">173,040<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Chronic lower respiratory diseases (CLRD)<\/td>\n<td style=\"padding: 6px 15px;\">156,979<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Alzheimer disease<\/td>\n<td style=\"padding: 6px 15px;\">150,005<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Stroke<\/td>\n<td style=\"padding: 6px 15px;\">121,499<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Diabetes<\/td>\n<td style=\"padding: 6px 15px;\">87,647<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Kidney disease<\/td>\n<td style=\"padding: 6px 15px;\">51,567<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Influenza and pneumonia<\/td>\n<td style=\"padding: 6px 15px;\">49,783<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 6px 15px;\">Suicide<\/td>\n<td style=\"padding: 6px 15px;\">47,511<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<br \/>\nUsing the\u00a0JS Pareto\u00a0charting module\u00a0of AnyChart, you\u00a0can simply set and feed the dataset\u00a0in the form of a JavaScript object\u00a0(like shown below). The library\u00a0will handle the rest of\u00a0the things required to build a Pareto chart\u00a0such as sorting the factor frequencies, setting the highest frequent factor to the left and\u00a0the lowest to the right, automatic calculation of cumulative percentages, and so on.<\/p>\n<p>To generate\u00a0a JavaScript object with our data, we need two data fields named \u2018x\u2019 and \u2018value\u2019 according to the following:<\/p>\n<ul>\n<li>&#8216;x&#8217;\u00a0is the name of\u00a0a factor required to\u00a0be displayed in\u00a0a Pareto chart\u00a0(in our case, the name of a cause of death), and<\/li>\n<li>&#8216;value&#8217; is the frequency of the\u00a0corresponding factor\u00a0(in our case, the number of deaths from that cause).<\/li>\n<\/ul>\n<p>Here&#8217;s how it can look with our data:<\/p>\n<pre><code class=\"javascript\">var data = [\r\n  {x: 'Heart disease', value: 659041},\r\n  {x: 'Alzheimer disease', value: 150005},\r\n  {x: 'Cancer', value: 599601},\r\n  {x: 'Accidents', value: 173040},\r\n  {x: 'Kidney disease', value: 51567},\r\n  {x: 'Suicide', value: 47511},\r\n  {x: 'CLRD', value: 156979},\r\n  {x: 'Stroke', value: 121499},\r\n  {x: 'Diabetes', value: 87647},\r\n  {x: 'Influenza and pneumonia', value: 49783}\r\n];\r\n<\/code><\/pre>\n<h3>Step 4: Writing the JS\u00a0Pareto chart code<\/h3>\n<p>By now, we have obtained all fundamental things to generate\u00a0an interactive Pareto chart\u00a0using JavaScript. So,\u00a0let\u2019s collate everything\u00a0else we need to reach our target.<\/p>\n<p>All the JavaScript codes\u00a0should be placed inside\u00a0of the <code>&lt;script&gt;<\/code>\u00a0tag. Moreover, as is shown in the\u00a0following snippet, we\u00a0write the Pareto chart-related\u00a0lines of JS code\u00a0within\u00a0the <code>onDocumentReady<\/code> function. This function waits until the HTML\u00a0page is fully loaded.<\/p>\n<pre><code class=\"html\">&lt;script&gt;\r\n  anychart.onDocumentReady(function() {\r\n    \/\/ The entire code of the Pareto chart will be here.\r\n  });\r\n&lt;\/script&gt;<\/code><\/pre>\n<p>So, in the <code>onDocumentReady<\/code> function, load the data\u00a0like explained in step 3.<\/p>\n<p>Once the data object is created, feed it to the Pareto chart.<\/p>\n<pre><code class=\"javascript\">\/\/ create a pareto chart\r\nvar chart = anychart.pareto();\r\n\/\/ feed the data into the chart\r\nchart.data(data);\r\n<\/code><\/pre>\n<p>Then, set the main\u00a0Pareto chart title and\u00a0add two\u00a0Y-axis titles as shown below to make it clear where is what:<\/p>\n<pre><code class=\"javascript\">\/\/ set the chart title\r\nchart.title('Number of Deaths for 10 Leading Causes of Death in U.S. in 2019');\r\n\/\/ set the measure y axis title\r\nchart.yAxis(0).title('Number of deaths');\r\n\/\/ set the cumulative percentage y axis title\r\nchart.yAxis(1).title('Cumulative percentage');\r\n<\/code><\/pre>\n<p>The final\u00a0action is to feed the\u00a0resulting Pareto chart to the division with\u00a0the id \u2018container1\u2019 and provide the command to draw the graphic according to the given configuration:<\/p>\n<pre><code class=\"javascript\">\/\/ set the chart container id\r\nchart.container('container1');\r\n\/\/ draw the chart\r\nchart.draw();\r\n<\/code><\/pre>\n<p>Wow! Here is how our Pareto chart\u00a0created with JavaScript looks\u00a0in the end. It is interactive and responsive! (See this basic Pareto chart on <a href=\"https:\/\/playground.anychart.com\/iithlO5T\/\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a>.)<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-iithlO5T\" src=\"https:\/\/playground.anychart.com\/iithlO5T\/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-iithlO5T{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<p>The complete code of the interactive\u00a0JS\/HTML5 Pareto chart\u00a0is below:<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Pareto Chart Example&lt;\/title&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-core.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.anychart.com\/releases\/8.9.0\/js\/anychart-pareto.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;style&gt;\r\n      html, body, #container1 {\r\n        width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;script&gt;\r\n\r\nanychart.onDocumentReady(function () {\r\n\r\n  \/\/ set data\r\n  var data = [\r\n    {x: 'Heart disease', value: 659041},\r\n    {x: 'Alzheimer disease', value: 150005},\r\n    {x: 'Cancer', value: 599601},\r\n    {x: 'Accidents', value: 173040},\r\n    {x: 'Kidney disease', value: 51567},\r\n    {x: 'Suicide', value: 47511},\r\n    {x: 'CLRD', value: 156979},\r\n    {x: 'Stroke', value: 121499},\r\n    {x: 'Diabetes', value: 87647},\r\n    {x: 'Influenza and pneumonia', value: 49783}\r\n  ];\r\n\r\n  \/\/ create a pareto chart\r\n  var chart = anychart.pareto();\r\n  \/\/ feed the data into the chart\r\n  chart.data(data);\r\n\r\n  \/\/ set the chart title\r\n  chart.title('Number of Deaths for 10 Leading Causes of Death in U.S. in 2019');\r\n  \/\/ set the measure y axis title\r\n  chart.yAxis(0).title('Number of deaths');\r\n  \/\/ set the cumulative percentage y axis title\r\n  chart.yAxis(1).title('Cumulative percentage');\r\n\r\n  \/\/ set the chart container id\r\n  chart.container('container1');\r\n  \/\/ draw the chart\r\n  chart.draw();\r\n\r\n});\r\n    &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<h2>Customizing JavaScript Pareto Chart<\/h2>\n<p>Do you need to make the chart handier and make it more\u00a0beautiful, readable, or pack it with extra details? You have\u00a0a lot of options to do that with the\u00a0help of the\u00a0AnyChart\u00a0JS API. You can perform many\u00a0visual design\u00a0and functional changes for\u00a0a Pareto chart as well. (Refer to the <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Pareto_Chart\" target=\"_blank\" rel=\"nofollow\">Pareto chart documentation<\/a> for more details.)<\/p>\n<p>For some more inspiration, you can\u00a0look at\u00a0AnyChart&#8217;s gallery with <a href=\"https:\/\/www.anychart.com\/products\/anychart\/gallery\/Pareto_Charts\/\">Pareto\u00a0chart\u00a0examples.<\/a><\/p>\n<p>Now, let&#8217;s apply some improvements to our JS-based Pareto chart to make it look even more awesome &#8211; follow me then!<\/p>\n<h3>Using\u00a0palettes to\u00a0change the\u00a0Pareto\u00a0chart colors<\/h3>\n<p>Do you want to change the default light blue color of the Pareto chart according to your preference? If so, there is a\u00a0very convenient way\u00a0&#8211;\u00a0<a href=\"https:\/\/docs.anychart.com\/Appearance_Settings\/Palettes\" target=\"_blank\" rel=\"nofollow\">palettes<\/a> for auto coloring!<\/p>\n<p>There are many pre-defined color palettes available in the AnyChart JS charting library, and it&#8217;s all\u00a0really straightforward to make use of them. Let\u2019s\u00a0apply, for example, one called Earth:<\/p>\n<pre><code class=\"javascript\">\/\/ use one of the pre-built palettes for coloring\r\nchart.palette(anychart.palettes.earth);\r\n<\/code><\/pre>\n<p>Below is the newly colored Pareto chart. (See it on <a href=\"https:\/\/playground.anychart.com\/osIT4aKF\/\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a>.)<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-osIT4aKF\" src=\"https:\/\/playground.anychart.com\/osIT4aKF\/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-osIT4aKF{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<p>Earth tone colors are soothing\u00a0and natural, so I like it. Make your own\u00a0choice guys. Or create a custom\u00a0color palette\u00a0from scratch if you want.<\/p>\n<h3>Format\u00a0the column and\u00a0line series of Pareto<\/h3>\n<p>The Pareto chart consists of\u00a0columns and lines, and they\u00a0are separate series that have their own <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Pareto_Chart#appearance\" target=\"_blank\" rel=\"nofollow\">visual settings.<\/a>\u00a0Let&#8217;s\u00a0apply some design changes to the appearance of our data visualization.<\/p>\n<p>We can use different built-in methods to change the appearance of data points. Basically, there are three states: normal, hover, and selected. The <code>normal()<\/code> method\u00a0is used to set the points&#8217; appearance in the normal state, i.e. when nothing is performed on a point. The <code>hovered()<\/code> method is\u00a0designed for\u00a0determining the\u00a0appearance\u00a0in the hover state, i.e. when we hover over\u00a0a point. Finally, the\u00a0<code>selected()<\/code> method controls the look\u00a0of\u00a0the points when they are clicked\u00a0(selected).<\/p>\n<p>These three methods can be combined with the <code>fill()<\/code>, <code>hatchFill()<\/code>, and <code>stroke()<\/code> methods. The <code>fill()<\/code> method is used to fill the points with a given color. The <code>hatchFill()<\/code> method is to fill the points with stripe patterns. Finally, <code>stroke()<\/code> is to change the appearance of the points&#8217; outline.<\/p>\n<p>Let&#8217;s change it all for\u00a0the Pareto column series first:<\/p>\n<pre><code class=\"javascript\">\/\/ configure the visual settings of the first (column) series\r\nchart.getSeries(0).normal().fill(\"#c98411\", 0.3);\r\nchart.getSeries(0).hovered().fill(\"#c98411\", 0.1);\r\nchart.getSeries(0).selected().fill(\"#c98411\", 0.5);\r\nchart.getSeries(0).normal().hatchFill(\"forward-diagonal\", \"#c98411\", 1, 15);\r\nchart.getSeries(0).hovered().hatchFill(\"forward-diagonal\", \"#c98411\", 1, 15);\r\nchart.getSeries(0).selected().hatchFill(\"forward-diagonal\", \"#c98411\", 1, 15);\r\nchart.getSeries(0).normal().stroke(\"#c98411\");\r\nchart.getSeries(0).hovered().stroke(\"#c98411\", 2);\r\nchart.getSeries(0).selected().stroke(\"#c98411\", 4);\r\n<\/code><\/pre>\n<p>Next, let\u2019s\u00a0customize the line series:<\/p>\n<pre><code class=\"javascript\">\/\/ configure the visual settings of the second (line) series\r\nchart.getSeries(1).normal().stroke(\"#991e00\", 4, \"4 4\", \"round\");\r\n<\/code><\/pre>\n<p>The above code\u00a0changes the outline of the line series in the normal state.<\/p>\n<p>The\u00a0interactive Pareto chart with these new changes\u00a0is displayed below. Isn\u2019t\u00a0the visualization\u00a0looking even more interesting\u00a0now? (See it on <a href=\"https:\/\/playground.anychart.com\/mSLdM3g7\/\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a>.)<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-mSLdM3g7\" src=\"https:\/\/playground.anychart.com\/mSLdM3g7\/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-mSLdM3g7{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>Configure the Pareto chart tooltip<\/h3>\n<p>Do you know what the purpose of tooltips is? They\u00a0show up when you hover over\u00a0a point on a chart visualization\u00a0to provide more information\u00a0about the corresponding point.<\/p>\n<p>Let&#8217;s\u00a0work\u00a0some more with our Pareto diagram&#8217;s tooltip now. By default, it displays\u00a0values for both series, line\u00a0(cumulative percentages) and\u00a0column (absolute\u00a0numbers). Let&#8217;s make it all look neater and also include relative percentages.<\/p>\n<p>First, we access the column series\u00a0and command the tooltip to display the text\u00a0&#8216;Value:&#8217;\u00a0before the actual values.<\/p>\n<pre><code class=\"javascript\">\/\/ configure the pareto column series tooltip format\r\nvar column = chart.getSeriesAt(0);\r\ncolumn.tooltip().format('Value: {%Value}');\r\n<\/code><\/pre>\n<p>Second, we access the line series\u00a0and\u00a0add the text\u00a0&#8216;Cumulative Frequency:&#8217; before the cumulative percentages as well as\u00a0set the display of the relative frequency values in the same way. The &#8216;\\n&#8217; character is used for a line break.<\/p>\n<pre><code class=\"javascript\">\/\/ configure the pareto line series tooltip format\r\nvar line = chart.getSeriesAt(1);\r\nline\r\n  .tooltip()\r\n  .format('Cumulative Frequency: {%CF}% \\n Relative Frequency: {%RF}%');\r\n<\/code><\/pre>\n<p>Check out how our\u00a0JavaScript Pareto chart\u00a0looks now when the tooltips are\u00a0improved like that. (See it on <a href=\"https:\/\/playground.anychart.com\/JNVGvmq0\/\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a>.)<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-JNVGvmq0\" src=\"https:\/\/playground.anychart.com\/JNVGvmq0\/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-JNVGvmq0{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>Set the Pareto chart labels<\/h3>\n<p>It could be helpful to make a Pareto chart more informative at a glance\u00a0by displaying the cumulative percentage of each factor\u00a0(causes of death in our case) on top of the line series, near each data point. Look at that:<\/p>\n<pre><code class=\"javascript\">\/\/ set the pareto line series labels\r\nvar line = chart.getSeriesAt(1);\r\nline.labels().enabled(true).anchor('right-bottom').format('{%CF}%');\r\n<\/code><\/pre>\n<p>I&#8217;ll explain it real quick.<\/p>\n<p>The Pareto chart&#8217;s line series can be obtained\u00a0using <code>chart.getSeriesAt(1)<\/code> as we discussed earlier. Once\u00a0we&#8217;ve got it, we enable the labels of the line series object. For that, the\u00a0<code>labels().enabled()<\/code> method needs to be set, with &#8216;true&#8217; as its parameter.<\/p>\n<p>The <code>anchor()<\/code> function is\u00a0used to set where the labels\u00a0are wanted to be\u00a0shown.<\/p>\n<p>Finally, we use the <code>format()<\/code> method\u00a0to configure the\u00a0label display format.<\/p>\n<p>Below is the new\u00a0interactive JS Pareto chart, now with\u00a0percentage information labels. (See it on <a href=\"https:\/\/playground.anychart.com\/qjgBK7Ii\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a>.)<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-qjgBK7Ii\" src=\"https:\/\/playground.anychart.com\/qjgBK7Ii\/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-qjgBK7Ii{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<h3>Enable the\u00a0Pareto chart crosshair<\/h3>\n<p>Crosshairs are horizontal and vertical lines perpendicular to each other\u00a0that\u00a0follow\u00a0the mouse pointer. They make it easy to\u00a0see\u00a0exact values\u00a0in any data point. Let&#8217;s enable these for\u00a0our Pareto chart:<\/p>\n<pre><code class=\"javascript\">\/\/ add and configure the crosshair\r\nchart.crosshair().enabled(true).xLabel(false);\r\n<\/code><\/pre>\n<p>You can see that the <code>xLabel<\/code> method&#8217;s parameter\u00a0is set as &#8216;false.&#8217; So, no crosshair label\u00a0will be shown on the X-axis.<\/p>\n<p>Below is\u00a0how the Pareto chart\u00a0looks with the crosshair. (See it on <a href=\"https:\/\/playground.anychart.com\/KGqzUmFh\/\" target=\"_blank\" rel=\"nofollow\">AnyChart Playground<\/a>.)<\/p>\n<p><iframe loading=\"lazy\" class=\"anychart-embed anychart-embed-KGqzUmFh\" src=\"https:\/\/playground.anychart.com\/KGqzUmFh\/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-KGqzUmFh{width:100%;height:600px;}\");\n})();<\/script><\/p>\n<p><strong>That&#8217;s the final\u00a0interactive JavaScript Pareto chart for this tutorial. Looks great, doesn&#8217;t it?<\/strong><\/p>\n<p>Let&#8217;s see what we can read\u00a0on this Pareto\u00a0diagram. The chart makes it crystal clear, for example, that a vast majority of deaths of Americans in 2019\u00a0happened due to diseases\u00a0of heart and cancers &#8211; these two leading causes of deaths account for more than 60% of the top ten ones.<\/p>\n<p>Unintentional injuries lead to 173,040 deaths and became the third leading\u00a0cause.<\/p>\n<p>Suicide cases are\u00a0displayed in the chart&#8217;s rightmost corner, which means they contributed the least to the total across all the ten leading causes; this is nonetheless horrible at the same time and definitely should be addressed by the U.S. authorities and non-government organizations in the coming years.<\/p>\n<h2>Conclusion<\/h2>\n<p>How was\u00a0the creation of an interactive\u00a0Pareto chart\u00a0with the help of\u00a0JS? Easy, right? Really, we merely needed to\u00a0create a basic HTML page, reference necessary JavaScript scripts, load\u00a0a dataset, and write some code according to clear instructions in the documentation depending\u00a0on exactly what we wanted from such a data visualization. The AnyChart API handled basically everything and made it all spick and span.<\/p>\n<p>Next, feel free to explore more on Pareto charts and play with these\u00a0cool visualizations to continue learning. All the best!<\/p>\n<hr \/>\n<p><em>We at AnyChart are glad to thank Dilhani Withanage for writing this stunning JS Pareto chart tutorial.<\/p>\n<p>If you want to create an interesting guest post for our blog, <a href=\"https:\/\/www.anychart.com\/support\/\">get in touch<\/a>.<\/em><\/p>\n<hr \/>\n<p><em>Check out other <a href=\"https:\/\/www.anychart.com\/blog\/category\/javascript-chart-tutorials\/\">JavaScript charting tutorials<\/a>.<\/em><\/p>\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>Creating\u00a0a Pareto\u00a0chart\u00a0with JavaScript\u00a0for\u00a0HTML5\u00a0apps and\u00a0websites\u00a0is not a\u00a0complicated\u00a0or hectic\u00a0development process\u00a0at all. Get hands-on experience with this tutorial\u00a0and you will find\u00a0data visualization in such a form joyful and exciting! Before we start, let&#8217;s\u00a0remember\u00a0how\u00a0Pareto charts\u00a0look and what their purpose is, just to\u00a0make sure we are on the same page. A Pareto chart, also a Pareto diagram, is a\u00a0combination of\u00a0vertical [&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":21,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,263,23,13,279,4],"tags":[53,413,1745,1746,1747,284,127,258,471,266,620,54,256,844,130,145,32,55,144,36,907,141,81,57,58,65,56,414,1930,2243,459,1226,30,172,309],"class_list":["post-12089","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-big-data","category-html5","category-javascript","category-javascript-chart-tutorials","category-tips-and-tricks","tag-anychart","tag-causes-of-death","tag-cdc","tag-cdc-data","tag-cdc-data-visualization","tag-chart-examples","tag-chart-types","tag-charts","tag-data-analysis","tag-data-analytics","tag-data-analytics-examples","tag-data-visualization","tag-data-visualization-examples","tag-data-visualization-tutorial","tag-data-visualization-weekly","tag-dataviz-weekly","tag-html5","tag-html5-charts","tag-infographics","tag-javascript","tag-javascript-chart-tutorial","tag-javascript-charting","tag-javascript-charting-library","tag-javascript-charts","tag-js-chart","tag-js-charting","tag-js-charts","tag-mortality","tag-mortality-statistics","tag-pareto-chart","tag-statistics","tag-statistics-visualization","tag-tips-and-tricks","tag-tutorial","tag-united-states","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Pareto Chart &amp; How to Create This Data Visualization in JavaScript HTML5<\/title>\n<meta name=\"description\" content=\"Learn how to build an interactive Pareto Chart for an HTML5 app or website using JavaScript. Visualizing data on top 10 causes of deaths in the US in 2019.\" \/>\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\/2021\/02\/16\/pareto-chart-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build Pareto Chart with JavaScript HTML5\" \/>\n<meta property=\"og:description\" content=\"Learn how to build an interactive Pareto Chart for an HTML5 app or website using JavaScript. Visualizing data on top 10 causes of deaths in the US in 2019.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/\" \/>\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=\"2021-02-16T10:46:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-13T11:03:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-social.png\" \/>\n<meta name=\"author\" content=\"Dilhani Withanage\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Build Pareto Chart with JavaScript HTML5\" \/>\n<meta name=\"twitter:description\" content=\"Learn how to build an interactive Pareto Chart for an HTML5 app or website using JavaScript. Visualizing data on top 10 causes of deaths in the US in 2019.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-twitter.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=\"Dilhani Withanage\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/\"},\"author\":{\"name\":\"Dilhani Withanage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/90e0c1bebbad8a042c97cf667f0ffc41\"},\"headline\":\"How to Build Pareto Chart in JavaScript\",\"datePublished\":\"2021-02-16T10:46:22+00:00\",\"dateModified\":\"2022-08-13T11:03:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/\"},\"wordCount\":2071,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-blog.png\",\"keywords\":[\"AnyChart\",\"causes of death\",\"CDC\",\"CDC data\",\"CDC data visualization\",\"chart examples\",\"chart types\",\"charts\",\"data analysis\",\"data analytics\",\"data analytics examples\",\"Data Visualization\",\"data visualization examples\",\"data visualization tutorial\",\"data visualization weekly\",\"dataviz weekly\",\"HTML5\",\"html5 charts\",\"infographics\",\"JavaScript\",\"javascript chart tutorial\",\"javascript charting\",\"JavaScript charting library\",\"javascript charts\",\"js chart\",\"js charting\",\"js charts\",\"mortality\",\"mortality statistics\",\"pareto chart\",\"statistics\",\"statistics visualization\",\"Tips and tricks\",\"tutorial\",\"united states\"],\"articleSection\":[\"AnyChart Charting Component\",\"Big Data\",\"HTML5\",\"JavaScript\",\"JavaScript Chart Tutorials\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/\",\"name\":\"Pareto Chart & How to Create This Data Visualization in JavaScript HTML5\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-blog.png\",\"datePublished\":\"2021-02-16T10:46:22+00:00\",\"dateModified\":\"2022-08-13T11:03:35+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/90e0c1bebbad8a042c97cf667f0ffc41\"},\"description\":\"Learn how to build an interactive Pareto Chart for an HTML5 app or website using JavaScript. Visualizing data on top 10 causes of deaths in the US in 2019.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-blog.png\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-blog.png\",\"width\":1200,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Build Pareto Chart in 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\/90e0c1bebbad8a042c97cf667f0ffc41\",\"name\":\"Dilhani Withanage\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/35ee7b2273ffffdaea96beb03771380fac7258a4904e0c8de2b474d8f27b8962?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/35ee7b2273ffffdaea96beb03771380fac7258a4904e0c8de2b474d8f27b8962?s=96&r=g\",\"caption\":\"Dilhani Withanage\"},\"url\":\"https:\/\/www.anychart.com\/blog\/author\/dilhani_withanage\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pareto Chart & How to Create This Data Visualization in JavaScript HTML5","description":"Learn how to build an interactive Pareto Chart for an HTML5 app or website using JavaScript. Visualizing data on top 10 causes of deaths in the US in 2019.","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\/2021\/02\/16\/pareto-chart-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Build Pareto Chart with JavaScript HTML5","og_description":"Learn how to build an interactive Pareto Chart for an HTML5 app or website using JavaScript. Visualizing data on top 10 causes of deaths in the US in 2019.","og_url":"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2021-02-16T10:46:22+00:00","article_modified_time":"2022-08-13T11:03:35+00:00","og_image":[{"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-social.png","type":"","width":"","height":""}],"author":"Dilhani Withanage","twitter_card":"summary_large_image","twitter_title":"How to Build Pareto Chart with JavaScript HTML5","twitter_description":"Learn how to build an interactive Pareto Chart for an HTML5 app or website using JavaScript. Visualizing data on top 10 causes of deaths in the US in 2019.","twitter_image":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-twitter.png","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"Dilhani Withanage","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/"},"author":{"name":"Dilhani Withanage","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/90e0c1bebbad8a042c97cf667f0ffc41"},"headline":"How to Build Pareto Chart in JavaScript","datePublished":"2021-02-16T10:46:22+00:00","dateModified":"2022-08-13T11:03:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/"},"wordCount":2071,"commentCount":0,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-blog.png","keywords":["AnyChart","causes of death","CDC","CDC data","CDC data visualization","chart examples","chart types","charts","data analysis","data analytics","data analytics examples","Data Visualization","data visualization examples","data visualization tutorial","data visualization weekly","dataviz weekly","HTML5","html5 charts","infographics","JavaScript","javascript chart tutorial","javascript charting","JavaScript charting library","javascript charts","js chart","js charting","js charts","mortality","mortality statistics","pareto chart","statistics","statistics visualization","Tips and tricks","tutorial","united states"],"articleSection":["AnyChart Charting Component","Big Data","HTML5","JavaScript","JavaScript Chart Tutorials","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/","url":"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/","name":"Pareto Chart & How to Create This Data Visualization in JavaScript HTML5","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-blog.png","datePublished":"2021-02-16T10:46:22+00:00","dateModified":"2022-08-13T11:03:35+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/90e0c1bebbad8a042c97cf667f0ffc41"},"description":"Learn how to build an interactive Pareto Chart for an HTML5 app or website using JavaScript. Visualizing data on top 10 causes of deaths in the US in 2019.","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-blog.png","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2021\/02\/pareto-chart-blog.png","width":1200,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2021\/02\/16\/pareto-chart-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Build Pareto Chart in 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\/90e0c1bebbad8a042c97cf667f0ffc41","name":"Dilhani Withanage","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/35ee7b2273ffffdaea96beb03771380fac7258a4904e0c8de2b474d8f27b8962?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/35ee7b2273ffffdaea96beb03771380fac7258a4904e0c8de2b474d8f27b8962?s=96&r=g","caption":"Dilhani Withanage"},"url":"https:\/\/www.anychart.com\/blog\/author\/dilhani_withanage\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/12089","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\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=12089"}],"version-history":[{"count":60,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/12089\/revisions"}],"predecessor-version":[{"id":15505,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/12089\/revisions\/15505"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=12089"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=12089"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=12089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}