{"id":472,"date":"2023-11-13T07:55:51","date_gmt":"2023-11-13T12:55:51","guid":{"rendered":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/?p=472"},"modified":"2023-12-15T13:10:11","modified_gmt":"2023-12-15T18:10:11","slug":"pie-charts-and-donut-charts","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2023\/11\/13\/pie-charts-and-donut-charts\/","title":{"rendered":"Guilty pleasures: Pie Charts and Donut Charts"},"content":{"rendered":"\n\n\n
\"Abby<\/td>\nGuest Writer: Abby Skofield<\/a>
\n<\/strong>In today's article, Abby Skofield slices through the debate about pie charts and introduces two new delectable desserts recently added to the MATLAB menu. Abby is a software engineer on the MATLAB Charting Team. Abby started her MathWorks career in the User Experience (UX) group, supporting the graphics team in the lead up to the release of the new graphics system in R2014b. Some of us might remember those changes 😉. In the UX group, Abby had the opportunity to work with hundreds of customers to learn about how they used MATLAB Graphics, their wish lists, and she got to dig in to the technical details with her engineering colleagues. She switched roles in 2020 to join their ranks as a software engineer, where she continues to enjoy learning about customer use cases while also getting hands-on time in the code.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
\n
I've been working with the MATLAB Charting team for 12 years, but you don't need to be surrounded by data viz nerds for that long to have heard the rumors about pie charts. At best, pie charts should be used carefully and sparingly; at worst, they \"subtract from the world's knowledge<\/em><\/a>.\" Pie charts have some haters, including my boss, who wears this shirt around the office sometimes.<\/div>\n
\"\"
\nEric Ludlam, development manager of the MATLAB Charting team.\u00a0\u00a0<\/em><\/div>\n
<\/div>\n
And that's why I'm surprised to find myself here today telling you about our brand spanking new piechart<\/span> <\/a><\/strong>released in R2023b. I have to admit, I find myself drawn back to pie charts again and again. And I know you are too, given the number of bug reports and enhancement requests we get from you about our existing pie<\/span> function.<\/div>\n

What's wrong with pie charts?<\/h2>\n
There are lots of different reasons why pie charts are tricky. They turn into a big mess as soon as you have more than a handful of wedges. They can be misleading if they are used to represent data that aren't parts of a whole (e.g., a pie chart showing the ages of people in your household). And at a basic, perceptual level humans are better at differentiating length (heights of different bars) as opposed to differentiating angle (pie wedges). For example, compare the pie and bar charts below.<\/div>\n
\n
\n
data = [10 11 9.5 16 18 17];<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
figure<\/div>\n<\/div>\n
\n
tiledlayout horizontal<\/span><\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
nexttile<\/div>\n<\/div>\n
\n
pie(data)<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
nexttile<\/div>\n<\/div>\n
\n
bar(data, FaceColor = \"flat\"<\/span>, CData = 1:6);<\/div>\n<\/div>\n
\n
clim([1 6])<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
% Axes niceness<\/span><\/div>\n<\/div>\n
\n
axis padded square<\/span><\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n

What's wrong with MATLAB's current pie chart?<\/h2>\n
Unfortunately, MATLAB's current pie chart, created with the pie<\/span><\/a> command, is an easy target for the haters not only because it's an empirically bad way to visualize data, but the MATLAB implementation doesn't support many of the programming conventions that MATLAB graphics objects have adopted over the last decade or so. We've heard from customers over and over again, pointing out strange behaviors and asking for simpler workflows and new features. A lot of the pain comes from the fact that pie<\/span> simply creates a bunch of patch and text objects in a Cartesian axes. Internally, we call this a \"bucket of parts\" chart because, well, that's what you get - a bucket of the parts used to cobble it together! (It's MATLAB, so of course your bucket is an array.)<\/div>\n
\n
\n
figure<\/div>\n<\/div>\n
\n
bucketOfPieParts = pie([10 11 9.5 16 18 17]);<\/div>\n<\/div>\n
\n
axis on<\/span><\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
bucketOfPieParts<\/div>\n
\n
\n
\n
bucketOfPieParts = <\/span><\/div>\n
\n

1\u00d712 graphics array:<\/p>\n

Patch Text Patch Text Patch Text Patch Text Patch Text Patch Text<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

There is no easy way to customize this pie chart as a whole after it's created - instead you need to use indexing or findobj<\/span> to get the right text or patch handles and set properties on those. For example, here's how you would have to work with the old pie<\/span> command to customize the chart's appearance and to use the standard ColorOrder colors you see elsewhere in MATLAB. (Requests for a simple way to change pie's colors is something we hear frequently from customers in the Community<\/a>.)<\/div>\n
\n
\n
figure<\/div>\n<\/div>\n
\n
p = pie([10 11 9.5 16 18 17]);<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
% Option 1: index to get every other handle which is a text object<\/span><\/div>\n<\/div>\n
\n
txt = p(2:2:end);<\/div>\n<\/div>\n
\n
set(txt,'Color'<\/span>,[0.5 0.5 0.5])<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
% Option 2: alternatively, use findobj to get the set of objects with the desired \"Type\"<\/span><\/div>\n<\/div>\n
\n
pch = findobj(p,'Type'<\/span>,'patch'<\/span>);<\/div>\n<\/div>\n
\n
set(pch,'EdgeColor'<\/span>,'w'<\/span>,'LineWidth'<\/span>,2)<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
colors = get(gca,'ColorOrder'<\/span>);<\/div>\n<\/div>\n
\n
colorsCellArray = mat2cell(colors,ones(7,1),3);<\/div>\n<\/div>\n
\n
set(pch,{'FaceColor'<\/span>},colorsCellArray(1:numel(pch)))<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Many of you have also reported running into surprising behaviors, most of which are due to the fact that the pie wedges are drawn in the data coordinates of a Cartesian axes. For example, the xlabel<\/span> and ylabel<\/span> functions appear to do nothing, while surprisingly the view(3)<\/span> command, which rotates the axes, actually works.<\/div>\n
\n
\n
figure<\/div>\n<\/div>\n
\n
pie([10 11 9.5 16 18 17])<\/div>\n<\/div>\n
\n
xlabel('Some important data'<\/span>) % doesn't show up, because pie sets the axes visibility off<\/span><\/div>\n<\/div>\n
\n
view(3) % wow, that works!<\/span><\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n

New & improved piechart<\/span> and donutchart<\/span> functions<\/h2>\n
Because we hear you, and because we don't judge you for needing an extra serving of pie, we are excited to introduce a new and improved piechart<\/span><\/a> and her fashion-forward BFF donutchart<\/span><\/a> in R2023b.<\/div>\n
\n
\n
data = [10 11 9.5 16 18 17];<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
figure<\/div>\n<\/div>\n
\n
tiledlayout('horizontal'<\/span>)<\/div>\n<\/div>\n
\n
nexttile<\/div>\n<\/div>\n
\n
pc = piechart(data);<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
nexttile<\/div>\n<\/div>\n
\n
donutchart(data);<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
pc % let's check out some of the properties ...<\/span><\/div>\n
\n
\n
\n
pc = <\/span><\/div>\n
\n

PieChart with properties:<\/p>\n

ColorOrder: [7\u00d73 double]
\nFaceAlpha: 0.6000
\nEdgeColor: [0.1500 0.1500 0.1500]
\nLabels: [\"12.3%\" \"13.5%\" \"11.7%\" \"19.6%\" \"22.1%\" \"20.9%\"]
\nData: [10 11 9.5000 16 18 17]
\nNames: [\"data1\" \"data2\" \"data3\" \"data4\" \"data5\" \"data6\"]<\/p>\n

Show all properties<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Both charts are real<\/span> graphics objects with properties, so you'll be able to work with them the way you do the other graphics objects you know and love. This also means we have a way to start addressing all your feature requests. Of course, we weren't able to deliver everything in this first version, but we are excited to have some fresh new ground to work on.<\/div>\n

Custom Styles<\/h3>\n
We've added properties to the new PieChart<\/span> and DonutChart<\/span> objects to give you some of the controls you've been looking for. For instance, in this example I'm setting the EdgeColor<\/span>, LineWidth<\/span> and InnerRadius<\/span> properties to achieve a more minimal look with white edges and a thinner donut. And the colororder<\/span><\/a> command can be used to change the color palette with one line of code! Note also that I'm shifting the StartAngle<\/span> to -45 degrees to change the orientation of the chart, and I could have swapped the Direction<\/span> of the wedges to clockwise if I had wanted to. The ability to change the orientation of a pie chart was another common request<\/a> for the old pie chart that we were never able to accommodate.<\/div>\n
\n
\n
figure<\/div>\n<\/div>\n
\n
dc = donutchart([60 17 8 15], [\"pass\"<\/span>,\"in progress\"<\/span>,\"filtered\"<\/span>,\"fail\"<\/span>]);<\/div>\n<\/div>\n
\n
dc.EdgeColor = 'w'<\/span>;<\/div>\n<\/div>\n
\n
dc.LineWidth = 2;<\/div>\n<\/div>\n
\n
dc.InnerRadius = 0.7;<\/div>\n<\/div>\n
\n
colororder meadow<\/span><\/div>\n<\/div>\n
\n
dc.StartAngle = -45;<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Support for Tables<\/h3>\n
The new piechart<\/span> and donutchart<\/span> functions support tables and table variable names as inputs. We've been adding support for plotting data directly from tables to many of our existing plotting functions, like plot<\/span> and scatter<\/span>, and the new piechart<\/span> and donutchart<\/span> functions extend the pattern. You can pass in a table as the first argument and then indicate which table variables to use for the data, and optionally the names.<\/div>\n
\n
\n
% Create an example table<\/span><\/div>\n<\/div>\n
\n
Status = [\"pass\"<\/span>,\"in progress\"<\/span>,\"filtered\"<\/span>,\"fail\"<\/span>]';<\/div>\n<\/div>\n
\n
January = [132 4 24 228]';<\/div>\n<\/div>\n
\n
February = [240 68 32 60]';<\/div>\n<\/div>\n
\n
March = [344 12 4 48]';<\/div>\n<\/div>\n
\n
t = table(Status, January, February, March)<\/div>\n<\/div>\n
\u00a0 \u00a0 \u00a0t = 4\u00d74 table<\/span><\/div>\n
\n
\n
\n
\n
\n\n\n\n\n\n\n\n\n
<\/th>\nStatus<\/th>\nJanuary<\/th>\nFebruary<\/th>\nMarch<\/th>\n<\/tr>\n<\/thead>\n
1<\/th>\n\"pass\"<\/td>\n132<\/td>\n240<\/td>\n344<\/td>\n<\/tr>\n
2<\/th>\n\"in\u00a0progress\"<\/td>\n4<\/td>\n68<\/td>\n12<\/td>\n<\/tr>\n
3<\/th>\n\"filtered\"<\/td>\n24<\/td>\n32<\/td>\n4<\/td>\n<\/tr>\n
4<\/th>\n\"fail\"<\/td>\n228<\/td>\n60<\/td>\n48<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
figure<\/div>\n<\/div>\n
\n
dc = donutchart(t,'January'<\/span>,'Status'<\/span>);
\ncolororder meadow<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n
You can even update your chart to display the data from a different variable! For instance, here we start by visualizing the data from the \"January\" variable, and then switch the DataVariable to \"February\" to see how things have changed from month to month. The ability to update the data on an existing object will also make the new objects great for app building and animation workflows.<\/div>\n
\n
\n
% Swap the data variable to look at another month<\/span><\/div>\n<\/div>\n
\n
dc.DataVariable = 'February'<\/span>;<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Interactive Graphics Workflows<\/h3>\n
Finally, the new PieChart<\/span> and DonutChart<\/span> objects support interactive workflows. You can explore your data with data tips by hovering over the chart. In this example, piechart<\/span> has binned a bunch of categorical values, allowing us to visualize the relative proportions of species in the array. The data tip shows us the count of how many \"virginica\" items were binned into the yellow wedge. And you can interactively modify the properties I described earlier, and discover what other properties are available, in the Property Inspector.<\/div>\n
load fisheriris.mat<\/span><\/div>\n
piechart(categorical(species([1:75 135:end])));<\/span><\/div>\n
\"\"
\n\"\"<\/div>\n

What's next?<\/h2>\n
We can't wait to hear what you think of these new charts! Are you #teamdonut with me, or maybe you like things the old fashioned way? And what features are you excited for us to add next? Based on past requests, I expect I'll hear from many of you about what you want to do with those labels - do tell!<\/div>\n

 <\/p>\n