{"id":18584,"date":"2019-11-06T15:32:53","date_gmt":"2019-11-06T14:32:53","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=18584"},"modified":"2026-01-12T11:35:39","modified_gmt":"2026-01-12T11:35:39","slug":"what-chart-to-use-when-your-data-adds-up-to-100","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/best-practices\/what-chart-to-use-when-your-data-adds-up-to-100\/","title":{"rendered":"What chart to use when your data adds up to 100%"},"content":{"rendered":"<p>One of the most common uses of charts is illustrating part-to-whole relationships, aka. \u201cdata composition.\u201d The Pie chart may be the most popular chart type for this purpose, but other chart types may be just as good (or much better, experts will argue).<\/p>\n<p>In this article, we will look at ways to effectively communicate parts-to-whole relationships effectively using pie, donut, sunburst, stacked bar\/column, stacked area, and treemap charts.<\/p>\n<p>Which chart to use is primarily driven by the nature of the data. As a rule of thumb, for simple datasets (six or fewer elements), a pie or donut chart works well. For more dense datasets, other charts are better to illustrate composition, such as stacked bar, column, or area charts. For nested (hierarchical) data sets, a sunburst and treemap might be right for the job.<\/p>\n<p>Let&#8217;s explore these chart types and see where we might want to pick chart type over another.<\/p>\n<h4>Simple data set<\/h4>\n<h5>Pie chart<\/h5>\n<p>The pie chart is the most popular way to visualize composition, thanks to its simple design. The ingredients or elements are presented as fractional parts of a whole. The <a href=\"https:\/\/codepen.io\/mushigh\/full\/ExxvjYy\">chart below<\/a> shows the composition of gasses in the air we breathe.<\/p>\n<p class=\"demo-container\"><iframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\"  src=\"https:\/\/codepen.io\/mushigh\/embed\/ExxvjYy?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A pie chart displays the composition of gasses in the air we breathe\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/ExxvjYy'>Air composition using pie chart<\/a> by mustapha<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>Nitrogen, in blue, is the most dominant component of the air with 78%, where Oxygen, in green, represents 20.9% of the air composition.<br \/>\nA pie chart, like all the composition charts, can be easily designed to meet the needs of people with disabilities (check <a href=\"https:\/\/codepen.io\/mushigh\/full\/rNNJgrP\">demo below<\/a>):<\/p>\n<p class=\"demo-container\"><iframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\"  src=\"https:\/\/codepen.io\/mushigh\/embed\/rNNJgrP?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A monochrome pie chart displays the composition of gasses in the air we breathe\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/rNNJgrP'>Air composition using pie chart (monochrome fill)<\/a> by mustapha<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p><b>Remark<\/b><br \/>\nA pie chart with more than six elements makes it hard to differentiate similar \u201cslices\u201d. But even with a low number of slices, you can increase readability by how you order the slices. Look at these two examples (<a href=\"https:\/\/cloud.highcharts.com\/show\/HDEk9HaS\">demo 1<\/a> and <a href=\"https:\/\/cloud.highcharts.com\/show\/PVcsAw-h\">demo 2<\/a>), both containing exactly the same data about when people buy donuts. One is sorted by time of day, the other by the size of the slice. Which one does a better job at ranking the most popular times of day for donut sales?<\/p>\n<div id=\"highcharts-HDEk9HaS\"><script src=\"https:\/\/cloud.highcharts.com\/inject\/HDEk9HaS\/\" defer=\"defer\"><\/script><\/div>\n<p><iframe class=\"highcharts-iframe\" style=\"border: 0; width: 100%; height: 500px;\" src=\"https:\/\/cloud.highcharts.com\/embed\/PVcsAw-h\/\" title=\"A pie chart displays the time of the day when people buy donuts\"><\/iframe><\/p>\n<p>If you have more than six slices, see if it is possible to divide them into multiple charts, or use other chart types such as a sunburst, column, or treemap.<\/p>\n<h5>Donut chart<\/h5>\n<p>Speaking of donuts, the Donut chart is the same as a pie chart, but by only displaying an area along the outer edge of the pie, it becomes easier to compare the elements to each other.<\/p>\n<p>The <a href=\"https:\/\/codepen.io\/mushigh\/full\/vYYJNmo\">demo below<\/a> shows the air composition using a donut chart:<\/p>\n<p class=\"demo-container\"><iframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\" src=\"https:\/\/codepen.io\/mushigh\/embed\/vYYJNmo?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A donut chart displays the composition of gasses in the air we breathe\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/vYYJNmo'>Air composition using donut chart<\/a> by mustapha<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h4>Nested data set<\/h4>\n<h5>Sunburst<\/h5>\n<p>The sunburst chart looks like a pie chart nested by one or more Donut charts. It is a comprehensive, yet, compact way to show the composition of a data set that contains a parent-child relationship.<\/p>\n<p>The <a href=\"https:\/\/codepen.io\/mushigh\/full\/MWWveev\">chart below<\/a> represents the protein content in 100 grams of different kinds of food:<\/p>\n<p class=\"demo-container\"><iframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\"  src=\"https:\/\/codepen.io\/mushigh\/embed\/MWWveev?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A pie chart displays the protein content in 100 grams of different kinds of food:\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/MWWveev'>Sunburst: Protein content of foods per 100g<\/a> by mustapha<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>The chart above is structured along four primary categories (the inner pie chart) with distinct colors: Meat, Fish, Grains &amp; Seeds, and others. The outer \u201cdonut chart\u201d breaks down each primary category into smaller elements, ordered from the highest to the lowest protein content.<\/p>\n<p>This chart can get really busy, and should, therefore, be used with care. The primary reason for choosing this chart over similar charts, like the treemap, would be that you want all the child-elements to be immediately visible.<\/p>\n<p>One thing to note, however, is that the Sunburst chart does allow for drill-down, as well. If your audience is able to interact with the chart, it is possible to unveil the child-level data by clicking on a parent item (see <a href=\"https:\/\/codepen.io\/mushigh\/full\/xxxWZGr\">demo below<\/a>):<\/p>\n<p class=\"demo-container\"><iframe height=\"650\" style=\"width: 100%;\" scrolling=\"no\" src=\"https:\/\/codepen.io\/mushigh\/embed\/xxxWZGr?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A sunburst chart displays the urban vs rural road fatalities in 2017\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/xxxWZGr'>Urban vs rural road fatalities in 2017 (data composition with sunburst)<\/a> by mustapha<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h5>Treemap<\/h5>\n<p>The Treemap, like Sunburst, visualizes the composition of a nested dataset. For some datasets, either chart type could be used, as long as the number of child-level slices isn&#8217;t too densely laid out to be readable. For data-dense charts, the Treemap is an ideal choice.<\/p>\n<p>The treemap <a href=\"https:\/\/codepen.io\/mushigh\/full\/dyydRpW\">demo below<\/a> shows the same data as the previous sunburst chart; it also has the drill-down option to allow the reader to explore the data further.<\/p>\n<p class=\"demo-container\"><iframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\" src=\"https:\/\/codepen.io\/mushigh\/embed\/dyydRpW?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A treemap chart displays the urban vs rural road fatalities in 2017\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/dyydRpW'>Urban vs rural road fatalities in 2017 (data composition)<\/a> by mustapha<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/iframe><\/p>\n<p><b>Remark<\/b><br \/>\nBoth the Sunburst and Treemap charts display nested data sets. Nevertheless, each chart type has its own advantages and limits. The Sunburst chart allows the readers to see all the details quickly, and it is an ideal static chart type, but this comes at the expense of the space, since the sunburst requires a large area to display a large amount of data. The Treemap, on the other hand, is perfect for a compact and limited space, where readers have the option to explore the data to get more insight thanks to its drill-down feature. While the Treemap is easy to read, even in it&#8217;s initial &#8220;static&#8221; state, its power is really unparalleled as a compact, interactive chart.<\/p>\n<h4>Time series<\/h4>\n<h5>Stacked column chart<\/h5>\n<p>A Stacked Column chart is great for displaying the composition of time series data that is also broken down into categories. The temporal aspect is something that pie and sunburst charts can not show.<br \/>\nThe <a href=\"https:\/\/codepen.io\/mushigh\/full\/LYYzBmg\">chart below<\/a> displays the percentage composition of the foreign-born population in the US from 1960 to 2016. A stacked column is the perfect chart to visualize such data, since data composition and progress over time are shown on the same chart.<\/p>\n<p class=\"demo-container\"><iframe height=\"550\" style=\"width: 100%;\" scrolling=\"no\"  src=\"https:\/\/codepen.io\/mushigh\/embed\/LYYzBmg?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A stacked column chart displays the percentage of the foreign born population in the US\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/LYYzBmg'>Stacked column chart (composition)<\/a> by mustapha<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>According to the chart, European and Canadians were the major immigrant groups in the US, from the 60s to the 90s. From the 2000s, 75% of the immigrants are from Asia, Latin America, and Mexico, where the European and Canadian groups are around 14%.<\/p>\n<h5>Stacked bar chart<\/h5>\n<p>Stacked bar charts are similar to the stacked column chart, except that the data is displayed horizontally instead of vertically.<br \/>\nThe bar stacked <a href=\"https:\/\/codepen.io\/mushigh\/full\/QWWqVvO\">chart below<\/a> displays the same data as the column stacked chart used above:<\/p>\n<p class=\"demo-container\"><iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\"  src=\"https:\/\/codepen.io\/mushigh\/embed\/QWWqVvO?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A stacked bar chart displays the percentage of the foreign born population in the US\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/QWWqVvO'>Stacked bar chart (composition)<\/a> by mustapha<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p><b>Remark<\/b><br \/>\nIf you have data with a long list on the X-axis, then the stacked bar chart is the right choice, as the stacked bar chart progresses vertically. This can be favorable for mobile devices, as you can scroll up and down to see the full timeline.<\/p>\n<h5>Stacked area<\/h5>\n<p>Stacked area charts are like the column and bar stacked charts; they are all used to display the progress of data composition over time. Stacked area charts offer an attractive trend display thanks to the smooth flow representation using area instead of columns or bars (check the <a href=\"https:\/\/codepen.io\/mushigh\/embed\/yLLzxjq\">demo below<\/a>):<\/p>\n<p class=\"demo-container\"><iframe height=\"550\" style=\"width: 100%;\" scrolling=\"no\" src=\"https:\/\/codepen.io\/mushigh\/embed\/yLLzxjq?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A stacked area chart displays the percentage of the foreign born population in the US\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/yLLzxjq'>Stacked area chart (composition)<\/a> by mustapha<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>Due to the area structure, a stacked area chart is a very effective accessible chart (see <a href=\"https:\/\/codepen.io\/mushigh\/embed\/XWWZLJv\">demo below<\/a>):<\/p>\n<p class=\"demo-container\"><iframe height=\"550\" style=\"width: 100%;\" scrolling=\"no\" src=\"https:\/\/codepen.io\/mushigh\/embed\/XWWZLJv?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A stacked monochrome area chart displays the percentage of the foreign born population in the US\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/XWWZLJv'>Stacked area chart composition (monochrome fill)<\/a> by mustapha<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>Hopefully, this made you think about how to best display data about parts-to-whole relationships. Feel free to share in the comment section below your favorite tricks and tips to visualize data composition most effectively.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A step by step article to learn which chart types to use to show data set composition or part-to-whole relationships.<\/p>\n","protected":false},"author":32,"featured_media":18606,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1104],"tags":[1063],"coauthors":[699],"class_list":["post-18584","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-best-practices","tag-data-visualization"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=18584"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18584\/revisions"}],"predecessor-version":[{"id":29221,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18584\/revisions\/29221"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/18606"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=18584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=18584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=18584"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=18584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}