{"id":14786,"date":"2022-04-12T07:41:47","date_gmt":"2022-04-12T07:41:47","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=14786"},"modified":"2022-08-13T11:10:59","modified_gmt":"2022-08-13T11:10:59","slug":"stacked-chart","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/04\/12\/stacked-chart\/","title":{"rendered":"How to Create Stacked Chart with JavaScript"},"content":{"rendered":"

\"A<\/a>Data visualization<\/a> is a skill vital for analysts and developers in the current times. Stacked charts are one of the most widely used chart types, and now I want to tell you what they are and how to build such graphics with ease using JavaScript. In the main tutorial part, I will be creating different versions of a stacked chart, providing comprehensive step-by-step instructions to let you learn fast. My visualizations will offer a look at the medal counts for the top 10 countries on the final Beijing 2022 Winter Olympics leaderboard so you also have fun as you follow along.<\/p>\n

<\/p>\n

What Is Stacked Chart?<\/h2>\n

A stacked chart is a variation of a bar chart<\/a>, a column chart<\/a>, or an area chart<\/a> that provides a look at the composition of total values to enrich comparisons (or over-time tracking) in visual data analysis.<\/p>\n

Stacked charts are effective when you need to graphically aggregate parts of a (changing) whole.<\/p>\n

Stacked Chart Types<\/h2>\n

There are two major types of stacked charts: value-based and percentage-based.<\/p>\n

A value stacked chart \u2014 or simply a stacked chart \u2014 represents totals by category while offering a bird\u2019s-eye view of the composition by series, all in absolute values. Such graphics are helpful for comparing totals across several categories and, at the same time, understanding the role of each series in the differences revealed during a quick visual analysis.<\/p>\n

A percent stacked chart \u2014 sometimes also called a 100% stacked chart \u2014 visualizes percentages instead of absolute values. It represents totals by category as 100% and individual data points within the series as proportions in relation to the whole. Such plots are ideal for observing how the contribution of a certain series changes from category to category when absolute totals themselves are not to take into account.<\/p>\n

Depending on the initial, base form of a series visualization, such a graphic can be called a stacked bar chart<\/a>, a stacked column chart<\/a>, or a stacked area chart<\/a> \u2014 or, respectively, a percent stacked bar chart<\/a>, a percent stacked column chart<\/a>, or a percent stacked area chart<\/a>.<\/p>\n

Don\u2019t miss out on reading an awesome article about stacked bar charts<\/a> on Smashing Magazine, for example, to get a deep dive into how this stacked chart type works and should be used the right way.<\/p>\n

Stacked Chart Example That Will Be Built<\/h2>\n

Now, it\u2019s time for the tutorial itself! I will explain how to create a cool interactive stacked chart without hassle using JavaScript.<\/p>\n

The first stacked chart to be built in the tutorial is an interactive stacked column chart. After that, I\u2019ll show you how to customize it in a few lines of code. Finally, you will learn how to convert a stacked column chart into a percent stacked column chart and into a stacked bar chart, which will also be extremely straightforward.<\/p>\n

Still under the impression of last month\u2019s Beijing 2022 Winter Olympics<\/a>, I decided to look at the 10 countries with the most Olympic medals won, visualizing how many total medals \u2014 and gold, silver, and bronze \u2014 their athletes took home.<\/p>\n

Take a look at the final JavaScript-based stacked chart that I will get by the end of this tutorial!<\/p>\n

\"The<\/p>\n

Building JavaScript Stacked Chart<\/h2>\n

An impressive JS stacked chart can be built in just 4 simple steps. <\/p>\n