{"id":614,"date":"2015-01-22T15:24:00","date_gmt":"2015-01-22T15:24:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=614"},"modified":"2025-02-25T13:59:31","modified_gmt":"2025-02-25T13:59:31","slug":"pie-chart-vs-bar-chart","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/pie-chart-vs-bar-chart","title":{"rendered":"Pie Chart vs Bar Chart: Which One To Choose?"},"content":{"rendered":"\n<p>As an example, here\u2019s a bare-bones pie chart with only three categories, showing some fictitious data about sales of jars of spices.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.infragistics.com\/community\/resized-image\/__size\/250x252\/__key\/communityserver-blogs-components-weblogfiles\/tim_5F00_brock\/0121.pie1.png\" alt=\"an example, here\u2019s a bare-bones pie chart with only three categories, showing some fictitious data about sales of jars of spices\" title=\"an example, here\u2019s a bare-bones pie chart with only three categories, showing some fictitious data about sales of jars of spices\"\/><\/figure>\n\n\n\n<p>It\u2019s clear from the chart that only a quarter of the sales are of cumin. You can also probably tell that more jars of saffron were sold than ginger. But you might struggle to tell whether the difference between saffron sales and ginger sales is greater or less than the difference between ginger sales and cumin sales. We are much better at spotting straight lines and right angles than we are at accurately estimating acute and obtuse angles (see, for example, the introduction&nbsp;<a href=\"http:\/\/www.pnas.org\/content\/102\/4\/1228.full\" rel=\"noopener\">here<\/a>).<\/p>\n\n\n\n<p>How might things look with bars?<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.infragistics.com\/community\/resized-image\/__size\/450x240\/__key\/communityserver-blogs-components-weblogfiles\/tim_5F00_brock\/0647.pie1b.png\" alt=\" How might things look with bars?\" title=\"How might things look with bars?\"\/><\/figure>\n\n\n\n<p>The ordering with this display is completely obvious, but it should also be fairly clear that sales of ginger are actually closer to sales of cumin than of saffron. What\u2019s not clear is that cumin represents 25% of sales.<\/p>\n\n\n\n<p>While pie charts do naturally give us a sense of part-to-whole, we\u2019re not very good at the perceptual tasks required to decode most of the data encoded within them. Specifically, research (eg&nbsp;<a href=\"https:\/\/vis.arc.vt.edu\/%7Enpolys\/projects\/safas\/science.pdf\" rel=\"noopener\">Cleveland and McGill)<\/a>&nbsp;has shown that we are more adept at perceiving lengths and positions along aligned scales \u2013 typical visual tasks when reading a bar chart \u2013 than we are at judging angles and areas as we do when studying a pie chart.<\/p>\n\n\n\n<p>Of course charts should have proper labels, so we can add those. The relative differences are now obvious from the pie chart because we can read the labels. But that\u2019s using verbal rather than visual reasoning. We can read numbers from a table too, but the table has the advantage of alignment. And a simple sentence stating the values \u2013 eg \u201c43% of jars sold were saffron, 32% were ginger, and 25% were cumin.\u201d \u2013 takes up much less space.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.infragistics.com\/community\/resized-image\/__size\/650x0\/__key\/communityserver-blogs-components-weblogfiles\/tim_5F00_brock\/4834.pie2.png\" alt=\" Sales of Spices\" title=\" Sales of Spices\"\/><\/figure>\n\n\n\n<p>If we sold nine different spices instead of three we probably wouldn\u2019t want to just list the proportions in a sentence. But with a pie chart and nine sectors things become cluttered, as illustrated by extending our fictitious data. By contrast, the conventional bar chart scales well.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.infragistics.com\/community\/resized-image\/__size\/650x0\/__key\/communityserver-blogs-components-weblogfiles\/tim_5F00_brock\/0624.pie3.png\" alt=\"  Sales of Spices 2 \" title=\" Sales of Spices 2\"\/><\/figure>\n\n\n\n<p>It\u2019s not just clutter that undermines the pie chart. If we rely on the labels rather than estimating the (largely acute) angles then those numbers we wish to compare must be stored in working memory. This is limited&nbsp;to only&nbsp;<a href=\"http:\/\/www.ncbi.nlm.nih.gov\/pmc\/articles\/PMC2864034\/\" rel=\"noopener\">a few verbal \u201cchunks\u201d<\/a>&nbsp;of information, placing restrictions on chart comprehension. It\u2019s the same problem one encounters when trying to make sense of a table of numbers and a primary reason why a well-designed chart&nbsp;is often more useful.<\/p>\n\n\n\n<p>One sector (cumin) in the three-spice chart could clearly be seen to represent 25%. In the nine-spice pie chart it\u2019s obvious that the sum of saffron and ginger sales amount to 50% of the total. Similarly, the sum of ginger, cumin and turmeric can also be seen to amount to 50% of all sales. (As noted earlier, we are good at spotting 90 and 180 degree angles.) By deduction or visual inspection we must also have sales of saffron equalling sales of turmeric and cumin combined and sales of ginger equalling the sales of the remaining five spices combined. None of this is particularly obvious from the bar chart.<\/p>\n\n\n\n<p>This is in-line with some research by&nbsp;<a href=\"http:\/\/psych.utoronto.ca\/users\/spence\/Spence_Lewandowsky_1991.pdf\" rel=\"noopener\">Spence and Lewandowsky<\/a>&nbsp;that suggests we are better at judging summed combinations of sectors in pie charts than of bars in bar charts. Taking that research at face value leads to an obvious question to ask oneself \u2013 is the purpose of your chart to allow the intended user to compare arbitrary combinations of components with other arbitrary combinations of components? If so, a pie chart&nbsp;<em>may<\/em>&nbsp;be a reasonable choice (especially if the data gives rise to summed shares of 25% or 50%).<\/p>\n\n\n\n<p>Finally, a popular alternative to the pie chart is the doughnut chart, where the center of the pie has been removed and (frequently) replaced with some text. Do that with the spices data set and the nice, clear 90 and 180 degree angles are gone. I\u2019m not aware of any perceptual advantage of this practice.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.infragistics.com\/community\/resized-image\/__size\/350x376\/__key\/communityserver-blogs-components-weblogfiles\/tim_5F00_brock\/1220.pie4.png\" alt=\" Finally, a popular alternative to the pie chart is the doughnut chart, where the center of the pie has been removed and (frequently) replaced with some text. \" title=\"Finally, a popular alternative to the pie chart is the doughnut chart, where the center of the pie has been removed and (frequently) replaced with some text. \"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Further reading<\/h3>\n\n\n\n<p>Stephen Few discusses the&nbsp;<a href=\"http:\/\/www.perceptualedge.com\/articles\/08-21-07.pdf\" rel=\"noopener\">perceptual problems with pie charts<\/a>&nbsp;in more detail, covering some of the issues discussed here. Ian Spence provides an interesting&nbsp;<a href=\"http:\/\/www.psych.utoronto.ca\/users\/spence\/Spence%202005.pdf\" rel=\"noopener\">history of the pie chart<\/a>&nbsp;and defends its use.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.infragistics.com\/resources\/sample-applications\/infragistics-jquery-marketing-dashboard\"><img decoding=\"async\" src=\"https:\/\/www.infragistics.com\/community\/resized-image\/__size\/650x0\/__key\/communityserver-blogs-components-weblogfiles\/tim_5F00_brock\/4857.7242.getthecode_5F00_728x90.jpg\" alt=\" \"\/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Imagine you want a chart that shows how some whole is divided up among its constituent parts. Popular convention may tell you to think in terms of a pie chart.<\/p>\n","protected":false},"author":21,"featured_media":2367,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-614","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=614"}],"version-history":[{"count":3,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/614\/revisions"}],"predecessor-version":[{"id":2373,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/614\/revisions\/2373"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2367"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}